[Solved]-Update Chart Colors When Using Styled HighCharts Version-Highcharts

The equivalent of the colors array in a styled mode is .highcharts-color-{n} css class combined with chart.colorCount property.

css:

.highcharts-color-0 {
  fill: rgb(40,97,152);
  stroke: rgb(40,97,152);
}

...

.highcharts-color-11 {
  fill: rgb(141,198,253);
  stroke: rgb(141,198,253);
 }

js:

var chart = Highcharts.chart('container', {
  chart: {
    colorCount: 12
  },

To have exactly the same effect as in a non-styled mode, you need to override some css rules from Highcharts css.

.highcharts-point {
  stroke-width: 0
}

The best option is to create your own css file or override default Highcharts css.

example: http://jsfiddle.net/pugshon6/

If you look at the pattern plugin source code, there is information about last revision date - 2016-10-05, so the plugin should not be outdated.

I came across the same "feature" in new Highcharts and I also wanted to keep different style in JavaScript.

So after dig into the Highcharts code I found that it generates class name according to the provided color index (by default it uses 0-9 color indexes and classes for these indexes).

So I specified fake color index for data-serie "colorIndex": 55, and highcharts generated class accordingly .highcharts-data-label-color-55. And this solved the problem! Now JS color with fill attribute wins over fake css class, unless you will define .highcharts-data-label-color-55 :-)

E.g. my data for heatmap:

"series": [
  {
    "data": [...],
    "type": "heatmap",
    "dataLabels": {
      enabled: true,
      color: '#000000'
    },
    "colorIndex": 55
  }
],

E.g. my data for pie chart:

"series": [
          {
            data: [
              {
                name: 'N 1',
                colorIndex: 55,
                y: 10
              },
              {
                name: 'N 2',
                colorIndex: 55,
                y: 20
              },
              {
                name: 'N 3',
                colorIndex: 55,
                y: 30
              },
              {
                name: 'N 4',
                colorIndex: 55,
                y: 40
              },
            ]
          }
        ],