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