highcharts / highcharts-android

Android wrapper for Highcharts usage
Other
128 stars 30 forks source link

ScrollablePlotArea does not provide vertical scroll for bar type chart #243

Closed TusharGabani25890 closed 8 months ago

TusharGabani25890 commented 2 years ago

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)?

soommy12 commented 2 years ago

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

TusharGabani25890 commented 2 years ago

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.

MikolajMichalczak commented 8 months ago

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
    }
}