How to make chart values a specific color's depending on the value.

[Emreh258]

Hi everyone,

I create reports with column, bar and pie charts every 3 months, but each one will have a different range of values in it (for example one chart might have 15 values in it, and the next might only have 6 of those same values. To compare between the charts, I would like the value "Website" to be the same color in every chart it is included in, and so on with every value.

I currently do this with the following CSS code in the header: 

/* CSS for Website */
rect.highcharts-point.highcharts-color-0,
g.highcharts-legend-item.highcharts-bar-series.highcharts-color-0.highcharts-series-0>rect {
  fill: #FFA07A;
}
/* CSS for Family/Friend Recommendation */
rect.highcharts-point.highcharts-color-1,
g.highcharts-legend-item.highcharts-bar-series.highcharts-color-1.highcharts-series-1>rect {
  fill: #8ede8e;

...and so on for all values.

While this works to change the colors; when I have a chart that has no values called "Website", this means I have to go into this code and change the numbers of every following section to by subtracting 1 to make sure they are the color that is associated with that value. 

Does anyone know a solution where the color can be set based on the value? E.g. "Website" = #FFA07A and "Family/Friend Recommendation" = #8ede8e

I am an amateur with CSS and a complete rookie with Javascript so wouldn't know where to start...

Many thanks in advance.