Closed TusharGabani25890 closed 8 months ago
Hi @TusharGabani25890 ! Thank you for the question. Can you please provide your chart configuration?
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.
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
}
}
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)?