CODEWITHSUNDEEP
highcharts
curious1
curious1

Reputation: 14717

Highcharts: what is my chart not zoomable?

I am new to Highcharts. I have a column chart. jsfiddle: http://jsfiddle.net/mddc/Lvfkv20y/5/

Here is the chart code:

$('#container').highcharts({
    chart: {
            type: 'column',
            zoomType: 'x',
            panning: true,
            panKey: 'shift',
            resetZoomButton: {
                theme: {
                    display: 'none'
                }
            }
    },
    xAxis: {
        categories:["Option 1", "Option 2", "Option 3", "Other"]
    },
    yAxis: {
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    series: [{
        name: 'Test',
        data: [["23.1%", 3], ["15.4%", 2], ["38.5%", 5], ["23.1%", 3]]        
    }]
});

I am trying to make it zoomable. However, the chart has no response when I click and select an area.

Thanks and regards.

Upvotes: 0

Views: 170

Answers (2)

Jugal Thakkar
Jugal Thakkar

Reputation: 13472

To add to @Ben Shi's answer, you do not have enough data. But enough being a subjective word, you can instruct Highcharts, how much is really enough.

Use the xAxis.minRange configuration to override minimum how many data points should show on the chart, the default is roughly five points

minRange: Number

The minimum range to display on this axis. The entire axis will not be allowed to span over a smaller interval than this. For example, for a datetime axis the main unit is milliseconds. If minRange is set to 3600000, you can't zoom in more than to one hour.

The default minRange for the x axis is five times the smallest interval between any of the data points.

On a logarithmic axis, the unit for the minimum range is the power. So a minRange of 1 means that the axis can be zoomed to 10-100, 100-1000, 1000-10000 etc.

Generally a value of 1 would be sufficient in most cases

 xAxis: {
      minRange: 1
 }

If you want maximum zooming, set this to a negative number, setting to 0 would force the default behavior

Override Min Range to allow more zooming @ jsFiddle

Upvotes: 1

Ben Shi
Ben Shi

Reputation: 56

I don't think there is anything wrong with your code. You simply do not have enough datapoints for the zooming function to work. Try adding more datapoints and you should be able to zoom!

Upvotes: 3

Related Questions