CODEWITHSUNDEEP
javascriptchartshighchartscolumn-width
user2899140
user2899140

Reputation: 1

How to calculate group padding in Highcharts based on x-axis width

I'm using Highcharts to render different charts on a webpage I'm working on. Some charts has single columns, and other charts has several data series. Number of categories on the x-axis differs as well. In additional, the web design is responsive so that the chart width changes.

I don't want any space between each column on each group, but there should be distance between groups. The size of each column should be fixed. In other words, I need to set the value for groupPadding.

I have set pointPadding to be 0. But to prevent overlapping columns and/or space between them when chart width differs I have figured out that I have to calculate the groupPadding by myself in the javascript code. Because of all the differences I have in charts this groupPadding value has to be dynamic.

I know how to do this mathematicly, but I need to get the xAxis width programmaticly for this since that value is not constant. My first thought was to use the width of the chart container, but the x axis is smaller than this one since y-axis and margin/spacing uses space.

It is possible to get the x-axis width after the chart is rendered, but I need this before - that is, when I set all options to the chart. How can I do that?

Upvotes: 0

Views: 1079

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

You can't get that value before, because it doesn't exist. However, for such cases you have load event.

In that event you have access to this.xAxis[0].width which is width of the axis. Then you can simply do your calculation and call this.series[0].update({ groupPadding: new_value });

Upvotes: 0

Related Questions