Highcharts Adaptive Chart Height Plugin

by supertrue

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgithub.com/highcharts/adapt-chart-to-legend/master/adapt-chart-to-legend.js"></script>


<div id="container" xxxstyle="height: 300px"></div>

JavaScript

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        borderWidth: 1,
        height: 300
    },
    
    title: {
        text: 'Chart height adjusts to the legend height'
    },

    credits: {
        enabled: false
    },

    legend: {

        itemWidth: 150,
        adjustChartSize: true,
        width: 200,
        navigation: {
          enabled: false
        }
    },

    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'
    }]
});