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

});

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

});

• javascript
• colors
• highcharts

Share Improve this question Follow asked Dec 30, 2013 at 19:21 user1621308user1621308 17233 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.