CODEWITHSUNDEEP
csshighcharts
wergeld
wergeld

Reputation: 14442

Update Chart Colors When Using Styled HighCharts Version

Under v5+ of HighCharts we are given the option to use 2 versions. One version works just like the v4 and below where styling and chart logic are wrapped up together. The other version is new to v5 where the styling is handled in CSS and the logic is handled in javascript as before. We are currently using the "old" version. But, now we have a requirement to include some pattern fill capability (as seen here). This forces us to use the CSS version. However, this CSS version breaks our ability to set the chart options for color theme as we have been doing:

$('#plain').click(function () {
    chart.update({
        colors: ['rgb(40,97,152)', 'rgb(57,114,169)', 'rgb(65,122,177)', 'rgb(74,131,186)', 'rgb(82,139,194)', 'rgb(90,147,202)', 'rgb(99,156,211)', 'rgb(107,164,219)', 'rgb(116,173,228)', 'rgb(124,181,236)', 'rgb(133,190,245)', 'rgb(141,198,253)', 'rgb(150,207,255)', 'rgb(158,215,255)', 'rgb(167,224,255)', 'rgb(175,232,255)', 'rgb(184,241,255)', 'rgb(192,249,255)', 'rgb(201,255,255)'],
        chart: {
            inverted: false,
            polar: false
        },
        subtitle: {
            text: 'Plain'
        }
    });
});

Testable path - click on the "plain" button at the bottom. The bars should change to a blue hue. Working (not using CSS version): jsFiddle

Not working (using CSS version): jsFiddle

What would be the acceptable way to do this under the CSS version? We do a lot of stuff currently in the "old" version where we build out the HighCharts javascript code in .NET that includes lots of styling dependent on certain parameters (text string length, chart dimensions, values of points, etc). My fear is that I am now forced to code in tons of permutations into CSS files. It should also be noted that we have more than one chart on a page and not all charts need the same styling applied.

Our other option for the pattern fill was to use a plugin but it has not been udpated in over 3 years (was written by HighCharts dev so that is good).

Upvotes: 4

Views: 2558

Answers (2)

Alexey Vol
Alexey Vol

Reputation: 1930

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
              },
            ]
          }
        ],

Upvotes: 2

morganfree
morganfree

Reputation: 12472

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.

Upvotes: 1

Related Questions