How could I change default color for a bar/column based on its value?
I was thinking that I could use "color" property of the kendo-chart-series-item (https://www.telerik.com/kendo-angular-ui/components/charts/api/SeriesItemComponent/)
"<kendo-chart-series-item type="column" [data]="data?.ColumnData?.slice(1)" axis="secondAxis" name="Packs" [color]="checkColor($point)">"
public checkColor(point) {
console.log("Point:", point);
}
However when code runs "point" is undefined.
1 Answer, 1 is accepted
The input should be set to a function reference in order for the function to be called for each point - example.
Regards,
Daniel
Progress Telerik
Rank 1
Hi
Is there a way to dynamically assign the chart series color based on a color array? I want to assign each bar a color i define in my data ... the issue I have is the function reference does not have access to "this" context ...
In my sample
https://stackblitz.com/edit/angular-2m4hhy?file=app/app.component.ts
I want to return the color based on the index of my color array, like my attachment, using :
return this.colors[point.index];
You can use lambda function or bind the function context to access the component - update example.
Regards,
Daniel
Progress Telerik