CODEWITHSUNDEEP
javascriptcolorshighcharts
user1621308
user1621308

Reputation: 172

Highcharts - Column With Negative Values - Column Color

I have a working chart with negative values. I would like to have columns with positive values to be blue and columsn with negative vlaues to be red.

Here is what I have:

$(function () {

     // Radialize the colors
     Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors,         function(color) {

return {
    radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
    stops: [
         [0, color],
         [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
    ]
};
});

// Build the chart
$('#moda').highcharts({
    chart: {
         plotBackgroundColor: null,
         plotBorderWidth: null,
         plotShadow: false
    },
    colors: [
         'blue'
    ],
    title: {
         text: ''
    },
    xAxis: {
         categories: moda,
    },
    tooltip: {
         pointFormat: '{series.name}: <b>{point.y}</b>',
         percentageDecimals: 0
    },
    series: [{
         type: 'column',
         data: moda,
    }]
});

});

Upvotes: 5

Views: 8146

Answers (1)

wergeld
wergeld

Reputation: 14442

Since you are not describing how you are populating moda for your data series here are some generalities:

  • The series.data.color item is accessible. So, when building the series.data up you could calculate what color it should be based on the value.
  • You are only allowing one color in your list: colors: [ 'blue' ],
  • Another option is to set the negativeColor.

Upvotes: 5

Related Questions