Encountering problems with a column chart where excessive data causes improper display on the UI, with no gaps between bars, no scroll option, and inability to increase bar width.
I have attached a screenshot and OML illustrating the issue I'm facing.
This is working for me, Thanks @Rupesh Patil.
Thanks @Amit Jain for helping.
Hi @Bhanu Pratap
You can add latest version for column graph and check below post.
https://www.outsystems.com/forums/discussion/97748/regarding-column-chart-issue/
I tried in personal env its working
I hope this helps
Thanks
Hi See the changes https://amitj.outsystemscloud.com/QDR_FavouriteChartColors/DemoScreen
also OML with attachment.Need to add advacned json for configuration like below
{
"chart": {
"type": "column",
"scrollablePlotArea": {
"minWidth": 1800,
"scrollPositionX": 0
}
},
"xAxis": {
"labels": {
"rotation": -45,
"style": {
"fontSize": "12px"
"yAxis": {
"min": 0,
"autoRotation": [-90]
"plotOptions": {
"column": {
"pointWidth": 50,
"pointPadding": 0.05,
"groupPadding": 0.1
"legend": {
"enabled": false
You can adjust the width for scroll.
Hi @Amit Jain,
Width issue resolved but now the color passed as input is not working, Can you please check the attached OML and help on that as well.HighChartsJSON -
"{ chart: { type: 'column', scrollablePlotArea: { minWidth: 2000, scrollPositionX: 0 } }, plotOptions: { column: { pointPadding: 0.05, groupPadding: 0.1 } }, legend: { enabled: false }, series: [{ data: Array.from({ length:"+LocChartData.Length+" }, () => Math.floor(Math.random() * 10) + 1) }]}"
ok,See this one https://amitj.outsystemscloud.com/QDR_FavouriteChartColors/DemoScreenAdded a local variable for color and pass in advanced js
Colors needs to be passed dynamically for each iterations, Using Local variable will not work for my case.
ok, so use only
"{ chart: { type: 'column', scrollablePlotArea: { minWidth: 2000, scrollPositionX: 0 } }, plotOptions: { column: { pointPadding: 0.05, groupPadding: 0.1 } }, legend: { enabled: false }}"
Is it working now ?