CODEWITHSUNDEEP
jsonangularpie-chartkendo-ui-angular2kendo-chart
Federico
Federico

Reputation: 404

How to set chart series color

How to set chart series color?

I would like to set the color of pie chart item

<kendo-chart-series-item
    type="pie"
    [data]="source"
    field="value"
    [color]="color" // it doesn't work
    categoryField="name" >

enter image description here

Upvotes: 0

Views: 2671

Answers (1)

antoineso
antoineso

Reputation: 2151

You need to add it in your data and then add a colorField="colorField" in the <kendo-chart-series-item> something like this :

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart [style.height.px]="200">
      <kendo-chart-series>
        <kendo-chart-series-item
          [autoFit]="autofit"
            type="pie" [data]="data"
            categoryField="kind" field="share"
            colorField="colorField"
            >
          <kendo-chart-series-item-labels
            position="outsideEnd"
            color="#000"
            [content]="labelContent">
          </kendo-chart-series-item-labels>
        </kendo-chart-series-item>
      </kendo-chart-series>
      <kendo-chart-legend [visible]="false"></kendo-chart-legend>
    </kendo-chart>
    <label>
      <input type="checkbox" [(ngModel)]="autofit" />
      <span>Toggle Autofit</span>
    </label>
  `
})
export class AppComponent {
  public autofit = true;
  public data: any[] = [{
    kind: 'Solar', share: 0.052, colorField:"red"
  }, {
    kind: 'Wind', share: 0.225, colorField:"#000"
  }, {
    kind: 'Other', share: 0.192, colorField:"blue"
  }, {
    kind: 'Hydroelectric', share: 0.175, colorField:"yellow"
  }, {
    kind: 'Nuclear', share: 0.238, colorField:"orange"
  }, {
    kind: 'Coal', share: 0.118, colorField:"green"
  }];

  public labelContent(e: any): string {
    return e.category;
  }
}

This example is based on Kendo UI demo stackblitz.

Upvotes: 1

Related Questions