CODEWITHSUNDEEP
javascripthighcharts
Nick
Nick

Reputation: 6940

Highcharts specify height of plot area only

I have a column chart in Highcharts. The x-axis labels can vary in height. Currently I have the chart "height" property set to 200. This makes the height of the entire chart, including the x-axis labels 200 pixels. So if the x-axis labels are taller, the plot area gets shortened.

plot with tall labels plot with short labels

As you can see the two plots are the same overall height but the actual size of the bars is different. I would rather set the height of the plot area and let the labels take up as much space below as they need. As far as I can tell there is no simple way to set the height of the plot area, does anyone have any ideas (possibly how to set the height of the y-axis ticks or something?

Upvotes: 1

Views: 2095

Answers (2)

user5260143
user5260143

Reputation: 1096

Try this:

pane: {
      size: 300 //here you can give number or string or percantege
    }

This solution required highchart-more

Upvotes: 0

Nick
Nick

Reputation: 6940

I spent so long fiddling around with this before posting the question, and then of course found the solution right after asking.

chart: {
    type: "column",
    height: 220,
    marginBottom: 100,
}

By setting the marginBottom to a number large enough to encompass the tall and short labels, the charts are now consistent. This is still not my favorite solution and I would love a way to enforce a height of the plot area itself, but this is what solved my specific issue this time.

Upvotes: 3

Related Questions