Highcharts Adaptive Chart Height Plugin

by gopinaghr

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>

JavaScript

/**
 * Highcharts plugin for adjustable chart height in response to legend height
 */ (function (H) {
    H.wrap(H.Legend.prototype, 'render', function (proceed) {
        var chart = this.chart;

        proceed.call(this);

        if (this.options.adjustChartSize && this.options.verticalAlign === 'bottom') {
            chart.chartHeight += this.legendHeight;
            chart.marginBottom += this.legendHeight;
            chart.container.style.height = chart.container.firstChild.style.height = chart.chartHeight + 'px';

            this.group.attr({
                translateY: this.group.attr('translateY') + this.legendHeight
            });
        }
    });

}(Highcharts));
// End plugin

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        width: 500
    },

    title: {
        text: 'Chart height adjusts to the legend height'
    },

    credits: {
        enabled: false
    },

    legend: {
        width: 300,
        itemWidth: 150,
        adjustChartSize: true
    },

    series: [{
        data: [6, 4, 2],
        name: 'First Series'
    }, {
        data: [7, 3, 2],
        name: 'Second Series'
    }, {
        data: [9, 4, 8],
        name: 'Third Series'
    }, {
        data: [1, 2, 6],
        name: 'Fourth Series'
    }, {
        data: [4, 6, 4],
        name: 'Fifth Series'
    }, {
        data: [1, 2, 7],
        name: 'Sixth Series'
    }, {
        data: [4, 2, 5],
        name: 'Seventh Series'
    }, {
        data: [8, 3, 2],
        name: 'Eighth Series'
    }, {
        data: [4, 5, 6],
        name: 'Ninth Series'
    }, {
        data: [4, 5, 6],
        name: 'Ninth Series'
    }, {
        data: [4, 5, 6],
        name: 'Ninth Series'
    }, {
        data: [4, 5, 6],
        name: 'Ninth Series'
    }, {
        data: [4, 5, 6],
        name: 'Ninth Series'
    }, {
        data: [4, 5, 6],
        name: 'Ninth Series'
    }, {
        data: [4, 5, 6],
        name: 'Ninth Series'
    }, {
...