CODEWITHSUNDEEP
javascriptchartshighcharts
Leon Gaban
Leon Gaban

Reputation: 39018

How to set a Maximum yAxis range for HighChart graph?

Below is a bar graph where the green bars never go over 100 and the red bars never go below -100.

However in the graph's yAxis you can see -150%.

I found this fix here, however it did not work. yAxis: {min: 0, max: 100}

Is there another way to accomplish this?

enter image description here

Here is the area where I add those bar graphs

function addSentimentSeries(name, data) {
    var index = findTheIndex(name);

    var color = name === 'Positive sentiment' ? '#009900' : '#FF0000';

    if (index) {
        chart.series[index].update({
            showInLegend: false,
            yAxis: 2,
            type: 'column',
            name: name,
            color: color,
            data: data,
            dataGrouping: { enabled: false }
        }, true);
    } else {
        chart.addSeries({
            showInLegend: false,
            yAxis: 2,
            type: 'column',
            name: name,
            color: color,
            data: data,
            dataGrouping: { enabled: false }
        }, true);
    }

    chart.hideLoading();
    chart.redraw();
}

This is the 'fix' I implemented from the answer I found above, it did not do anything, my bar graphs still display -150%

vm.config.yAxis.push({
    height: '30%',
    top: '70%',
    gridLineWidth: 0,
    title: {
       text: 'Sentiment',
       style: { color: '#BFBFBF' }
    },
    yAxis: { min: 0, max: 100 },
    offset: 0,
    labels: {
        formatter: function() {
            return this.value + '%';
        },
        style: { color: '#BFBFBF' }
    },
    opposite: false
});

Upvotes: 1

Views: 365

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You should set the minPadding and maxPadding parameters as 0, then you reduce the spacing on a axis.

yAxis: {
   minPadding: 0,
   maxPadding: 0
}

Upvotes: 2

Related Questions