Hi


I've been create column chart and I set data to 10 column per chart. But my bars are very thin.

How to set size of bar of chart ?


Thanks.

Hi Jiroj,

You will probably have to provide advanced configuration for your charts, and use this setting to specify the width of your columns.

Jorge Martins wrote:

Hi Jiroj,

You will probably have to provide advanced configuration for your charts, and use this setting to specify the width of your columns.


Thanks. I'll try your solution.

Hi Jiroj,


Did you try to inspect the element in your browser, catch his class and edit his CSS in your app?


Best regards,

Ricardo

Jiroj Vattanaburanaphan wrote:

Hi


I've been create column chart and I set data to 10 column per chart. But my bars are very thin.

How to set size of bar of chart ?


Thanks.

Hi Jiroj Vattanaburanaphan,

All you need to do is just add following classes to style sheet where you are using the column chart:

SyntaxEditor Code Snippet

/*for width of cloumn */
rect.highcharts-point {
    width: 70px;
}

Hello,

I encounter the same problem right now (OutSystems 10). I want to limit the width of each bar to a maximum width. With CSS I can change the width, but this does not deliver a satisfying result (bars are shifted to the left in comparison with the steps on the x-axis). In my opinion you should use the highcharts options as much as possible.

There is an advanced option called series.column.maxPointWidth (link). How do I apply this correctly? How can I debug any interactions between OutSystems and Highcharts more effectively?

Currently I use the implementation below:

This does change anything at all in the user interface. The width of each bar still is bigger than 50 pixels. Therefore I think that I used the AdvancedFormat action in a wrong way.

The result of the AdvancedFormat_Init action is the following:


Any help would be nice!

Kind regards, Jonathan

You can enclose the chart by a container and add a CSS with width to that container. I hope this will help you to fix the chart width issues. Waiting for your response.


Thank you,

Sudip

Hi Jonathan,

Just by glancing at it, your HighCharts AdvancedFormat seems correct...

You can always inspect the generated JavaScript on your browser... the full HighCharts JSON will be there and you can see what's being generated by OutSystems. Feel free to post it here for us to take a look, if you can't figure it out.

Jorge Martins wrote:

You can always inspect the generated JavaScript on your browser... 

Where can I find the generated JSON? When I look on basic highcharts examples then the command "highcharts.chart()" is commonly used to draw a diagram on the page. I cannot see this command anywhere in the files generated by OutSystems.


Sudip Dey wrote:

You can enclose the chart by a container and add a CSS with width to that container. I hope this will help you to fix the chart width issues. Waiting for your response.


Thank you,

Sudip

Hi Sudip, Width issues is not about the chart , Issue is that bar width of the chart( shown in color)

you can try this 

plotOptions: {
        series: {
            pointWidth: 20    
        }
    },

//20 is width paraeter you can change it from min. 1 to max 50


Thank you,

Nikhil

Hi Jonathan,

the way you set these values looks correct.  One thing that comes to mind is that  you maybe forgot to assign the result of your SetMaxWidth Action to the chart : 


I often forget this bit and then wonder why it won't do as I told ;-)

Dorine