CODEWITHSUNDEEP
csshighcharts
ellier7
ellier7

Reputation: 427

Highcharts stylemode and colorByPoint

I have a Highcharts bar graph and I would like each bar to be red or green, depending if the value is positive or negative. I am using 

plotOptions: {
    bar: {
    colorByPoint: true
    }
}

and setting the colors I want to use. Without styled mode, the colors work correctly. With styled mode, the colors get overridden by the CSS. How can I use both styled mode and colorByPoint?

See jsfiddle: http://jsfiddle.net/er1187/gbok7s33/

My colors work only if style mode is commented out

Upvotes: 0

Views: 441

Answers (1)

Conan
Conan

Reputation: 2709

Try attacking the problem with pure CSS:

  • Disable colorByPoint option

  • Define a standard colour for the series, e.g.

    .highcharts-color-0 {
    fill: #008000;
    stroke: #004000;
}

  • Highcharts defines a highcharts-negative class for negative figures, so we can override the default colour based on that:

    .highcharts-negative {
    fill: #800000;
    stroke: #400000;
}

See updated fiddle: http://jsfiddle.net/gbok7s33/6/

EDIT: If there's always going to be the same number of datapoints and you want to target a specific one, try re-enabling colorByPoint and updating the CSS to:

[class^='highcharts-color-'], [class*=' highcharts-color-']{
    fill: #008000;
    stroke: #004000;
}

Assuming you want to target point 4, use the following (note, zero-based index):

.highcharts-color-3 {
    fill: #000080 !important;
    stroke: #000040 !important;
}

NB: !important is needed to override the .highcharts-negative class.

See updated fiddle: http://jsfiddle.net/gbok7s33/7/

Upvotes: 1

Related Questions