Panning in Highcharts (In Mobile Devices)

Question

Im using highcharts for plotting a column type chart. Data on x-axis is not a timestamp based one. It is normal categories only. Like the one in the below mentioned fiddle.

JSFIDDLE : http://jsfiddle.net/BalajiR/d1LL2tvk/4/

I have enabled panning, so that the user can pan across the chart to view the complete chart. It is working fine in browser as like in the fiddle. But, the same is not working for touch devices, which is expecting a zoomed chart for panning .

I don't want any zoom functionality. Just same behaviour as like browser in device (Panning).

Please share any way to implement the same.

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column',
                backgroundColor: '#F0F0F0',
                panning:true
            },

            title: {
                text: null
            },
            xAxis: {
                categories: ['PLAN_1','PLAN_2','PLAN_3','PLAN_4','PLAN_5','PLAN_6','PLAN_7','PLAN_8','PLAN_9','PLAN_10'],
                min:0,
                max: 3
            },
            legend: {
                enabled: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        this.series.name +': '+ this.y;
                }
            },
            plotOptions: {

                column: {
                    grouping: false,
                    pointWidth: 30
                }
            },
            series: [{
                name: 'Total',
                data: [8, 10, 5, 9, 6, 8, 10, 5, 9, 6],
                color: '#97BF0D'
            }, {
                name: 'Actionable',
                data: [4, 5, 2, 4, 3, 4, 5, 2, 4, 3],
                color: '#FFFFFF'
            }]
        });
    });

Regards, Balaji R

set zoomType and panning will work. Example: jsfiddle.net/d1LL2tvk/10 (tested on android / naxus4). — Sebastian Bochan
Is there any way to get it working on mobile devices without zoom functionality as it's working on browser? — Ashish

ZekeDroid ZekeDroid · Accepted Answer · 2014-08-31T16:41:25

I haven't implemented it myself yet and there may be a cleaner way of doing this but here's a potential solution:

Your browser lets you pan because it is the default action of the event onDrag; this event occurs when the user clicks and drags across the screen. Your mobile platform is using onZoom instead because there isn't a dragging functionality on it.

What I would do is manually set the event to pan like you want it to on the onZoom event. If you found the default behavior of onDrag, you could do

onZoom(e){// same behavior as onDrag};

All of this is defined in the events key.

Panning in Highcharts (In Mobile Devices)

1 Answers