Highstocks: colorAxis marker color conflicts with styledMode

[xy2i]

Expected behaviour

When setting a colorAxis and styling markers with it, with styledMode on, we should expect the color to be set on each marker, since we are styling it within Highcharts. (Are there other ways to do this?)

Actual behaviour

With styledMode on, each marker has a color, done by setting a fill attribute on each marker. With styledMode on, the color for each marker is not set.

Live demo with steps to reproduce

styledMode off: https://jsfiddle.net/xy2iii/1L0sgm8r/
styledMode on: https://jsfiddle.net/xy2iii/exyb7ko9/

Product version

Latest Highstocks (v8.2.0)

Affected browser(s)

Firefox, Chrome

Thank you for your time!

[pawelfus]

Thank you for reporting this issue @xy2iii

Simplified demo:
https://jsfiddle.net/BlackLabel/adz8kb6s/3/

Workaround:
Demo: https://jsfiddle.net/BlackLabel/adz8kb6s/4/
Plugin:

(function(H) {
  H.addEvent(
    H.Series,
    'afterRender',
    function() {

      if (!this.chart.styledMode || !this.colorAxis) {
        return;
      }

      this.points.forEach(function(point) {
        if (point.graphic && point.color) {
          point.graphic.attr({
            fill: point.color
          });
        }
      })
    }
  );
})(Highcharts);

Internal note:
Check if Highcharts Maps or Heatmap/Treemap series have the same issue. If not, let's implement the same solution across the Highcharts & Stock products.

[pawelfus]

Internal note:
Heatmap works fine: https://jsfiddle.net/BlackLabel/adz8kb6s/6/ - let's check if we can use the same solution across all of the series, depending how deep it interferes with basic logic. Be careful, to let this happen only when colorAxis exists and is connected to the series, otherwise CSS should be used.