CODEWITHSUNDEEP
highcharts
Jekin Kalariya
Jekin Kalariya

Reputation: 3507

Can we Fixed High charts graph portion height irrespective of number of series or legends?

I have different high charts as shown below. I have more number of series in one graph and have only one series in other one, In this case in my actual screen graph portion of first graph is bigger than second one, so is it possible to keep graph height constant without considering number of series (legends which occupied height at bottom)?

Graph1-big height of graph portion

Graph2-small height of graph portion

Upvotes: 1

Views: 242

Answers (1)

morganfree
morganfree

Reputation: 12472

As was mentioned in the comment, you grab maximum of charts' margin bottom and set it for the rest of the chart. It should be set on load event in the last chart.

function adjustLegend() {
  var charts = Highcharts.charts;

  var marginBottomMax = charts
    .reduce((prevChart, currChart) => Math.max(prevChart.marginBottom, currChart.marginBottom));

  charts.forEach(chart => {
    if (chart.marginBottom < marginBottomMax) {
      chart.update({
        chart: {
          marginBottom: marginBottomMax
        }
      });
    }
  });
}

chart: {
  events: {
    load: adjustLegend
  }
},

example: http://jsfiddle.net/wsrtaq09/1/

If you know what should be the legend height, you can set legend.maxHeight.

legend: {
  layout: 'vertical',
  maxHeight: 50,
},

example: http://jsfiddle.net/wsrtaq09/2/

Upvotes: 1

Related Questions