CODEWITHSUNDEEP
javascriptcsshighcharts
Kamal
Kamal

Reputation: 1954

how to sync height & y-axis baseline of multiple chart in highcharts

I have multiple charts on a page which are supposed to have uniform height & y-axis baseline, so that the user could compare each chart apple-2-apple.

I rotate the x-axis label to 90 degrees so that it would look nicer and won't overlap with each other, but the problem is, label's length is different from chart to chart, this makes highcharts automatically adjust the height and y-axis baseline of the charts.

enter image description here

How can I make the chart's height and y-axis baseline to be fixed for all the charts on the page?

Upvotes: 2

Views: 776

Answers (1)

wf4
wf4

Reputation: 3827

You can use marginBottom to set the bottom margin of the chart:

$('#container').highcharts({
    chart: {
        marginBottom: 150
    }
});

that will ensure that the bottom of the chart will always remain the same size.

here you can see an example with 2 charts side-by-side, one with longer names and the other with shorter names.

http://jsfiddle.net/ktxn7ewx/

Here is the HighCharts API: http://api.highcharts.com/highcharts#chart.marginBottom

Upvotes: 4

Related Questions