jsonangularpie-chartkendo-ui-angular2kendo-chart

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


Solution

  • 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.