100% Stacked Bar chart - assign same colour every time

[Karthik]

hi,

I have a 100% Stacked Bar chart that displays various 'States'. I would like to assign same colour to those states even when toggled. For example, green should assigned only to 'Complete' state.  Having 'SeriesColor' at 'kendo-chart' component level doesn't work. Any idea how to achieve this?

Please see stackblitz example in the link below
https://stackblitz.com/edit/angular-10-thmpbt-bfoybs?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

With Toggle On - green is assigned to 'Complete' state

With toggle off - orange is assigned to Complete state. But I need green to remain for Complete

Regards
Karthik

[Stoyan]

Hi Karthik,

Thanks for the provided information and snapshots.

The reason why the color of the Complete state is changing is because the seriesColors property is assigning only the first HEX color because there is only one state (in this scenario the Complete state) when the "Include Complete" checkbox is ticked off.

To keep the green color for the Complete state when the logic inside onIncludeCompleteStateChangedEvent method executes, create a variable which will hold initially the first three colors for each state and when the checkbox is ticked on / off, modify the variable and pass what colors should it mentain.

I've created a short StackBlitz demo that demonstrates the said above:

https://stackblitz.com/edit/angular-10-thmpbt-bjjjfl?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

I hope this helps. 

Regards,
Stoyan
Progress Telerik

[Karthik]

That worked. Thanks Stoyan.

-Karthik