CODEWITHSUNDEEP
highchartszoomingbar-chart
Phil
Phil

Reputation: 107

Highcharts Bar Chart Zoom not working

If you use a bar chart in Highcharts, the zoom does not seem to work properly. You can select the area and also the button "Reset zoom" appears. The chart, however, is not zoomed in.

The only code I added to the basic bar example was the zoom type:

chart: {
    type: 'bar',
    zoomType: 'x'
},

Complete example: http://jsfiddle.net/966off9e/

Is this a bug or a feature? ;-)

Upvotes: 2

Views: 10344

Answers (3)

mustapha mekhatria
mustapha mekhatria

Reputation: 3919

Just add 'minRange' to the xAxis: http://jsfiddle.net/mushigh/axy8v9oa/

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar',
            zoomType: 'x'
        },
        title: {
            text: 'Historic World Population by Region'
        },
        subtitle: {
            text: 'Source: Wikipedia.org'
        },
        xAxis: {
            categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
            title: {
                text: null
            },
            minRange: 1,
        },
        yAxis: {
            title: {
                text: 'Population (millions)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Year 1800',
            data: [107, 31, 635, 203, 2]
        }, {
            name: 'Year 1900',
            data: [133, 156, 947, 408, 6]
        }, {
            name: 'Year 2008',
            data: [973, 914, 4054, 732, 34]
        }]
    });
});

Upvotes: 3

Emiliano Sangoi
Emiliano Sangoi

Reputation: 921

Another possibility is that the amount of data is bigger than the cropThreshold variable. See this related post.

You can also see the official docs for this variable. Every kind of graphic has this variable with different default values. You should check it out to be sure.

Upvotes: 0

Raein Hashemi
Raein Hashemi

Reputation: 3384

I think this is somehow a bug in Highcharts, when you use categorized axis. But a workaround would be using a min for that axis:

xAxis: {
        categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
        title: {
            text: null
        },
        min: 0
}

Here's the DEMO

Upvotes: 4

Related Questions