How to support a legacy style option (like series.color) in Highcharts CSS styled mode

Question

I'm attempting to update a large number of charts to the new Highcharts CSS styled mode. Some of these charts use legacy API options for styles—like series.color and point.color—that are no longer supported in the CSS branch of Highcharts.

Is there a way for me to shim support for these color options to provide backwards compatibility? Such as by extending the renderer, or something else?

Here's an example of series and point options I'd like to support:

Highcharts.chart('container', {
    chart: { type: 'column' },
    series: [{
        color: 'red',
        data: [1, {y: 8, color: 'green'}, 3]

    }, {
        data: [4, {y: 3, color: 'purple'}, 4]
    }]
});

On JSFiddle

Answer 1

You can use Highcharts.chart.userOptions to get the passed in values.

While looping over series and the series.data properties you can see if any color properties set and update styles accordingly.

var chart = Highcharts.chart('container', {
    chart: { type: 'column' },
    series: [{
        data: [1, {y: 8, color: 'green'}, 3, 4],
        color: 'red'
    }, {
        data: [4, {y: 3, color: 'purple'}, 4, 2]
    }]
});

setLegacyColors(chart.userOptions);


function setLegacyColors(chartOptions) {

  for (var seriesIdx = 0; seriesIdx < chartOptions.series.length; seriesIdx++) {

    var series = chartOptions.series[seriesIdx];
    var seriesColor = series.color;

    if (seriesColor) {
      $(".highcharts-point.highcharts-color-" + seriesIdx + ", .highcharts-legend-item.highcharts-color-" + seriesIdx + " .highcharts-point, .highcharts-tooltip .highcharts-color-" + seriesIdx).css('fill', seriesColor);
    }

    for (var dataPointIdx = 0; dataPointIdx < series.data.length; dataPointIdx++) {

      if (Object(series.data[dataPointIdx]) === series.data[dataPointIdx]) { // only consider datapoints that are objects

        var dataPointColor = series.data[dataPointIdx].color;

        if (dataPointColor) {
          $(".highcharts-point.highcharts-color-" + seriesIdx + ", .highcharts-legend-item.highcharts-color-" + seriesIdx + " .highcharts-point, .highcharts-tooltip .highcharts-color-" + seriesIdx).eq(dataPointIdx).css('fill', dataPointColor);
        }
      }
    }
  }
}

@import 'https://code.highcharts.com/css/highcharts.css';

#container {
	height: 200px;
	max-width: 800px;
	min-width: 320px;
	margin: 0 auto;
}

/* Since we're redefining colors after highcharts.css, we need to be specific 
because otherwise some properties would be overwritten. Note that the preferred and 
much simpler way to change the color scheme is to set the colors array in the highcharts.scss 
SASS file and build it to CSS. */
.highcharts-point.highcharts-color-0,
.highcharts-legend-item.highcharts-color-0 .highcharts-point,
.highcharts-tooltip .highcharts-color-0 {
	fill: #7cb5ec;
}
.highcharts-tooltip.highcharts-color-0,
.highcharts-data-label-connector.highcharts-color-0 {
	stroke: #b3597c;
}

.highcharts-point.highcharts-color-1,
.highcharts-legend-item.highcharts-color-1 .highcharts-point,
.highcharts-tooltip .highcharts-color-1 {
	fill: #434348;
}
.highcharts-tooltip.highcharts-color-1,
.highcharts-data-label-connector.highcharts-color-1 {
	stroke: #c4688c;
}

.highcharts-point.highcharts-color-2,
.highcharts-legend-item.highcharts-color-2 .highcharts-point,
.highcharts-tooltip .highcharts-color-2 {
	fill: #90ed7d;
}
.highcharts-tooltip.highcharts-color-2,
.highcharts-data-label-connector.highcharts-color-2 {
	stroke: #78a8d1;
}

.highcharts-point.highcharts-color-3,
.highcharts-legend-item.highcharts-color-3 .highcharts-point,
.highcharts-tooltip .highcharts-color-3 {
	fill: #f7a35c;
}
.highcharts-tooltip.highcharts-color-3,
.highcharts-data-label-connector.highcharts-color-3 {
	stroke: #7991d2;
}

.highcharts-point.highcharts-color-4,
.highcharts-legend-item.highcharts-color-4 .highcharts-point,
.highcharts-tooltip .highcharts-color-4 {
	fill: #8085e9;
}
.highcharts-tooltip.highcharts-color-4,
.highcharts-data-label-connector.highcharts-color-4 {
	stroke: #7d7bd4;
}

.highcharts-point.highcharts-color-5,
.highcharts-legend-item.highcharts-color-5 .highcharts-point,
.highcharts-tooltip .highcharts-color-5 {
	fill: #f15c80;
}
.highcharts-tooltip.highcharts-color-5,
.highcharts-data-label-connector.highcharts-color-5 {
	stroke: #977dd5;
}

.highcharts-point.highcharts-color-6,
.highcharts-legend-item.highcharts-color-6 .highcharts-point,
.highcharts-tooltip .highcharts-color-6 {
	fill: #e4d354;
}
.highcharts-tooltip.highcharts-color-6,
.highcharts-data-label-connector.highcharts-color-6 {
	stroke: #b3597c;
}

.highcharts-point.highcharts-color-7,
.highcharts-legend-item.highcharts-color-7 .highcharts-point,
.highcharts-tooltip .highcharts-color-7 {
	fill: #2b908f;
}
.highcharts-tooltip.highcharts-color-7,
.highcharts-data-label-connector.highcharts-color-7 {
	stroke: #b27fd6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/js/highcharts.js"></script> 

<div id="container"></div>