nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Custom Coding the Pie chart to display colors based on certain conditions and not choose the default

Aneesh V S

Hi,
 
I need to custom code the colors for specific series, say for example I want the color red for value 'ABC' and color blue for value 'DEF' (pls refer attachment). I have currently chosen the colors from the series palette, I have chosen red as the first color and blue as the second color.
 
Imagine, If there is no value for 'ABC' and there is only values for 'DEF', the color red gets assigned to 'DEF" but we needed blue for'DEF'.
 
The colors are chosen based on the order given in the series palette, but I need to custom code it. I tried custom coding in the script before rendering series option but somehow could not succeed on it.
 
Please find the data source and the screenshot, It would be of great help, If someone could help on this.

Find more posts tagged with

Comments

kclark

A quick and simple solution, if your chart is based on the order of the dataset coming in would be to do something like this
<pre class="_prettyXprint _lang-">
var r = [255, 205, 155, 105, 55];
var counter = 0;

function beforeDrawDataPoint( dph, fill, icsc )
{
fill.set(r[counter], 0, 0);
counter++;
}

</pre>
Data point 1 = 255,0,0
Data point 2 = 205,0,0
Data point 3 = 155,0,0
Data point 4 = 105,0,0
Data point 5 = 55,0,0
 
Then if data point 1 doesn't exist then the color values get shifted by one.