HighCharts panning in x direction not working-CodePudding

I am using highcharts for my charts. I want to enable panning in x direction but i couldn't find it working even after enabling it. Please find code snippet used

let options = HIOptions()
    
chart = HIChart()
chart.type = "column"
chart.panning = HIPanning()
chart.panning.enabled = true
chart.panning.type = "x"
chart.pinchType = "x"
chart.events = HIEvents()
chart.events.load = HIFunction(jsFunction: "function() { var proceed = this.pointer.pinch; this.pointer.pinch = function(e) { if (e.touches.length === 1 && e.type === 'touchmove') { this.chart.pan(e, this.chart.options.panning); } else { proceed.call(this, e); if (e.type === 'touchstart') { this.chart.mouseDownX = this.pinchDown[0].chartX; this.chart.mouseDownY = this.pinchDown[0].chartY; } } } }")
options.chart = chart
options.credits.enabled = false

Any help is appreciated on enabling panning.

CodePudding user response：

Let's try use this configuration:

let options = HIOptions()
        
let chart = HIChart()
chart.panning = HIPanning()
chart.panning.enabled = true
chart.panning.type = "x"
chart.pinchType = "x"
chart.events = HIEvents()
chart.events.load = HIFunction(jsFunction: "function() { this.pointer.pinchTranslateDirection = function(horiz, pinchDown, touches, transform, selectionMarker, clip, lastValidTouch, forcedScale) { return Highcharts.Pointer.prototype.pinchTranslateDirection.call(this.pointer, horiz, pinchDown, [touches[0]], transform, selectionMarker, clip, lastValidTouch, forcedScale) }; this.showResetZoom = function() {}; }")
options.chart = chart

API References: https://api.highcharts.com/ios/highcharts/Classes/HIPanning.html#//api/name/type

CodePudding user response：

I was able to scroll after adding scrollableArea below is the code snippet

let options = HIOptions()
    
chart = HIChart()
chart.type = "column"
chart.panning = HIPanning()
chart.panning.enabled = true
chart.panning.type = "x"
chart.pinchType = "x"
chart.events = HIEvents()
chart.events.load = HIFunction(jsFunction: "function() { var proceed = this.pointer.pinch; this.pointer.pinch = function(e) { if (e.touches.length === 1 && e.type === 'touchmove') { this.chart.pan(e, this.chart.options.panning); } else { proceed.call(this, e); if (e.type === 'touchstart') { this.chart.mouseDownX = this.pinchDown[0].chartX; this.chart.mouseDownY = this.pinchDown[0].chartY; } } } }")
options.chart = chart
options.credits.enabled = false

let chart = HIChart()
chart.scrollablePlotArea = HIScrollablePlotArea()
chart.scrollablePlotArea.minWidth = 700
chart.scrollablePlotArea.scrollPositionX = 0
options.chart = chart