highcharts-android icon indicating copy to clipboard operation
highcharts-android copied to clipboard

ScrollablePlotArea does not provide vertical scroll for bar type chart

Open TusharGabani25890 opened this issue 2 years ago • 3 comments

Scrollable Plot area usually provides scroll over the X Axis for all the charts. But for Bar chart the X-Axis is Vertical and ScrollablePlotArea provides scroll horizontally. Is there any way to provide the scroll vertically( along X-Axis)?

TusharGabani25890 avatar Oct 14 '22 04:10 TusharGabani25890

Hi @TusharGabani25890 ! Thank you for the question. Can you please provide your chart configuration?

soommy12 avatar Nov 04 '22 13:11 soommy12

Here is the chart configuration :

{ "containerId": "widget-501", "chartType": "bar", "chartTitle": "Operating Exp. by Location", "chartSubtitle": "Nov'22", "useHTML": null, "useHTMLForSubtitle": null, "xAxis": [ { "Id": null, "title": "Location", "categories": [ "01 Beretania", "02 Dillingham", "03 Waipahu", "04 Kailua", "05 Newtown", "06 Wahiawa", "07 Kaimuki", "12 Pereira of Hilo", "15 Pereira of Kauai", "17 Pereira of Kona", "17 Pereira of Kona", "99 Pereira Holdings", "Bensalem", "Bustleton", "Cottman", "Eatontown", "Freehold", "Glassboro", "Hamilton", "Lumberton", "Marlboro", "Marlton", "MT Ephraim", "No Location (Intacct Comp)", "No Location (Intacct Comp)", "Philadelphia", "Turnersville", "Woodbridge", "Woodbury" ], "valuePrefix": "", "valueSuffix": "", "crosshairEnable": false, "oppositeEnable": false, "stackLabelEnable": false, "axisLabelEnable": true, "useHTML": false, "stackLabelRotation": 0, "max": 3 } ], "yAxis": [ { "Id": null, "title": "Operating Exp. %", "categories": null, "valuePrefix": "", "valueSuffix": "%", "crosshairEnable": false, "oppositeEnable": false, "stackLabelEnable": false, "axisLabelEnable": true, "useHTML": false, "stackLabelRotation": 0, "max": 3 } ], "series": [ { "name": "Operating Exp.", "color": null, "colors": [ "#ACC60F", "#CF815F", "#53BB77", "#7461AA", "#40B5C5", "#4E72B9", "#D75E82", "#10DBE8", "#9A658E", "#0E9A83", "#0A88E3", "#6B49AC", "#434245", "#A96924", "#447554", "#CF4444", "#A9AC00", "#A97906", "#66E072", "#9B57B1", "#FF4E96", "#773BFF", "#5CA5D8", "#C656D9", "#ACC60F", "#CF815F", "#53BB77", "#7461AA", "#40B5C5" ], "type": "bar", "gradientEnable": false, "valuePrefix": "", "valueSuffix": "", "yAxisPosition": 0, "stack": "", "data": [ 47.01, 51.99, 36.50, 30.43, 37.81, 34.63, 0.0, 35.87, 24.14, 0.0, 49.44, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0 ] } ] }

Kindly find reference video from below link :

https://drive.google.com/file/d/1EM6cr0JlUgJMlaArJzkdCVeWbtBej3Hm/view?usp=sharing

Note : Here chart height is fix. Same UI wants for mobile too.

TusharGabani25890 avatar Nov 21 '22 09:11 TusharGabani25890

Hi @TusharGabani25890! Apologies for the delayed response. According to the documentation: "Since v7.1.2, a scrollable plot area can be defined for either horizontal or vertical scrolling, depending on whether the minWidth or minHeight option is set."

chart: {
    scrollablePlotArea: {
        minHeight: 700
    }
}

MikolajMichalczak avatar Mar 11 '24 14:03 MikolajMichalczak