I am currently using AG 12.3 and IG 12.3.
This question builds upon work previously done (AG Composite Chart). As I'm creating multiple charts (one for Design and another in a 3rd tab for Process), users would like to see some color coordination between them.
If the color for the Process "1C (PEFT)" is selected as Blue, then both the Stacked Area and Stacked Line series should be different shades of Blue for "1C (PEFT)" in the Process chart and Designs "AT-AT (1st Order)" and "AT-ST" should have at least 4 different shades of blue between the Stacked Area and Stacked Line series.
Is there a way built in that can service this?
My initial inclination is to go through a color study to establish 5 colors with 5 shades each, then repeat each in arrays and do selection based on `index % 10` logic (in reverse for Stacked Line series). I'd like to avoid this extra work, if possible.
Attaching modified example from previous question.
4544.DynamicStackedChart.zip
Hello Chris,
The best thing that I can recommend for managing colors in the IgxDataChart would be to utilize the brushes collection of the chart. Here is a link to the API about the brushes collection: https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html#brushes.
In the code example given there, the brushes collection is set to “red, green, blue.” This effectively creates a collection with red at index 0, green at index 1, and blue to index 2. This will map to the series collection of the chart, including the fragments of the stacked series. In other words, the series at index 0 will be red, the series at index 1 will be green, and the series at index 2 will be blue. If there are more than three series, the brushes collection will repeat itself.
Please let me know if you have any other questions or concerns on this matter.
Does the Brushes collection run based on CSS color names or is there another specific list that it uses? I assume it's also possible to use HEX/RGB codes.
This looks as if I'll still have to do a Color Study and wire the actual colors/shades to a string array that will have to be calculated so that it properly coordinates.
The brushes collection is based on CSS color names, and you can use HEX/RGB codes for it as well. The actual brushes you use are completely up to you though – there is nothing that will determine a palette or shades based on a single color built-in to the chart.
Sounds like another opportunity for improvement. Oh well. Thanks!