CODEWITHSUNDEEP
highcharts
cucuru
cucuru

Reputation: 3708

highcharts chart height apart from legend

I want to create charts with fixed height, depending on user interaction, some chart can be empty, so there are no legend.

My problem is I want all of them with the same height, and then, if there is legend it's above the chart, this height should be increased by the legend.

I can't get it, it's my try.

options = {
  chart: {
    zoomType: 'x',
    height: 300
  },
  legend: {
     enabled: 'true',
     align: 'center',
     verticalAlign: 'bottom',
     layout: 'horizontal',
     maxHeight: 50
  }
};

As result, what I have is, if there is legend, a 250px chart and if it's not a 300px chart. What I want is always a 300px chart, and if legend, 50px more to contain it.

how can I solve it?

Upvotes: 1

Views: 1307

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

In the chart load event you can use the chart.setSize method to increase the height of the chart by the height of the legend.

function addLegendHeight(chart) {
    var legendSpace = chart.legend.legendHeight -
        chart.legend.padding;

    if (legendSpace) {
        chart.setSize(null, chart.chartHeight + legendSpace);
    }
}

Highcharts.chart('container', {
    chart: {
        ...,
        events: {
            load: function() {
                addLegendHeight(this);
            }
        }
    },
    ...
});

Live demo: http://jsfiddle.net/BlackLabel/seqah1by/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#setSize

Upvotes: 1

Related Questions