180
Views
7
Comments
Solved
How to set bar column chart width in React

I am using studio 11.5 version and using the "ColumnChart". I am trying to increase the width of it. Can any one help please?

2022-10-11 21-19-04
Fábio Miguel Ferreira Coelho
Solution

I didn't understand that, but if he wants to change the width of the columns we should consult the Highcharts documentation - pointWidth: number.

On the logic, where he assigns the DataPoint List he should assign the value of the width to the "AdvancedFormat.HighchartsJSON". 

After that assign the "AdvancedFormat" property of the chat.

Example for width = 5

Example for width = 50

Please find the OML file attached.

Kind regards,

FC

FC_TestOS.oml
2022-10-11 21-19-04
Fábio Miguel Ferreira Coelho
Solution

Nice!

I'm glad I could help you.

Have fun with OutSystems :)

UserImage.jpg
srinivas aravala
Solution

Hi Miguel, I tried your solution it worked 


Thank you.

Sr

2022-10-11 21-19-04
Fábio Miguel Ferreira Coelho
Solution

Nice!

I'm glad I could help you.

Have fun with OutSystems :)

2022-10-11 21-19-04
Fábio Miguel Ferreira Coelho

Hi Srinivas,

I hope you´re doing well.

Basically, you need to create a CSS class, choose the value for the width and apply it to the chart.

If you did not apply a CSS class: 

If you apply a CSS class: 


Please find the OML file attached.

Let me know if this solves your issue.

Kind regards,

FC

FC_TestOS.oml
2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

What you are doing is changing the width of the entire chart, not just the width of the columns, like the OP asked.

2022-10-11 21-19-04
Fábio Miguel Ferreira Coelho
Solution

I didn't understand that, but if he wants to change the width of the columns we should consult the Highcharts documentation - pointWidth: number.

On the logic, where he assigns the DataPoint List he should assign the value of the width to the "AdvancedFormat.HighchartsJSON". 

After that assign the "AdvancedFormat" property of the chat.

Example for width = 5

Example for width = 50

Please find the OML file attached.

Kind regards,

FC

FC_TestOS.oml
2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Hi Srinivas,

Like with all charts formatting, the Highcharts documentation is your friend. You need to set either the pointWidth as plotOptions, or series column pointWidth. Or, if you don't want to mess with pixels, check the pointPadding setting (plotOptions, series).

UserImage.jpg
srinivas aravala
Solution

Hi Miguel, I tried your solution it worked 


Thank you.

Sr

2022-10-11 21-19-04
Fábio Miguel Ferreira Coelho
Solution

Nice!

I'm glad I could help you.

Have fun with OutSystems :)

2024-12-10 11-32-22
Vikas Mohite

Hello guys,

I am facing same thing regarding bar chart,

I am trying to increase the width of bars. Can any one help please? 

if possible please share an OML of application.


Thanks & Regards

Vikas Mohite

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.