CODEWITHSUNDEEP
javascripthtmlhighcharts
Geeky
Geeky

Reputation: 79

How I can change the axis both side in y axis?

I want to display the stacked bar graph in a different way. I have 3 values in series A, B & A-B and I want it on the stacking: normal. I want A, B & A-B should be stacked on positive side together. The value of A-B, either it can be positive or negative, but it should display on the positive axis and it should stack with A & B.

If A-B value is positive then it should come in green otherwise it should come in red.

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<script>

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Column chart with negative values'
    },
    xAxis: {
        categories: ['A1', 'A2', 'A3', 'A4', 'A5']
    },
    credits: {
        enabled: false
    },
     plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: 'A',
        data: [5, 4, 4, 2, 2]
    }, {
        name: 'B',
        data: [2, 7, 3, 7, 1]
    }, {
        name: 'A-B',
        data: [3, -3, 1, -5, 1]
    }]
});

</script>

Upvotes: 0

Views: 96

Answers (2)

ppotaczek
ppotaczek

Reputation: 39149

You can preprocess your data to convert y to absolute value and set individual color:

var abData = [3, -3, 1, -5, 1];

abData.forEach(function(el, i) {
  abData[i] = {
    y: Math.abs(el),
    color: el > 0 ? 'green' : 'red'
  }
});

Live demo: http://jsfiddle.net/BlackLabel/h4gs2wLd/

API Reference: https://api.highcharts.com/highcharts/series.column.data.color

Upvotes: 2

Ferhat BAŞ
Ferhat BAŞ

Reputation: 797

You can use "zones" paramters for your solution, I am not sure but somewhere can be formatter solution if you need extreme situation

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<script>

Highcharts.chart('container', {
chart: {
    type: 'bar'
},
title: {
    text: 'Column chart with negative values'
},
xAxis: {
    categories: ['A1', 'A2', 'A3', 'A4', 'A5']
},
credits: {
    enabled: false
},
 plotOptions: {
    series: {
        stacking: 'normal'
    }
},
series: [{
    name: 'A',
    data: [5, 4, 4, 2, 2]
}, {
    name: 'B',
    data: [2, 7, 3, 7, 1]
}, {
    name: 'A-B',
    data: [3, -3, 1, -5, 1],
    zones: [
          {
            value: 0,
            color: '#f50303'
          }, 
          {
            color: '#1eb300'
          }
        ]
}]
});

Upvotes: 0

Related Questions