Highcharts Adaptive Chart Height Plugin
by hoss
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgithub.com/highslide-software/adapt-chart-to-legend/master/adapt-chart-to-legend.js"></script>
<div id="container" style="height: 300px"></div>
JavaScript
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: [7, 3, 2],
name: 'Second Series'
}, {
data: [7, 3, 2],
name: 'Second Series'
}, {
data: [7, 3, 2],
name: 'Second 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: [4, 6, 4],
name: 'Fifth Series'
}, {
data: [4, 6, 4],
name: 'Fifth Series'
}, {
data: [4, 6, 4],
name: 'Fifth Series'
}, {
data: [4, 6, 4],
name: 'Fifth Series'
}, {
data: [4, 6, 4],
name: 'Fifth Series'
}, {
data: [4, 6, 4],
name: 'Fifth Series'
}, {
data: [4, 6, 4],
name: 'Fifth Series'
}, {
data: [4, 6, 4],
name: 'Fifth Series'
}, {
data: [4, 6, 4],
name: 'Fifth Series'
}, {
data: [4, 6, 4],
name: 'Fifth Series'
}, {
data: [4, 6, 4],
name: 'Fifth Series'
}, {
data: [4, 6, 4],
name: 'Fifth Series'
}, {
data: [4, 6, 4],
name: 'Fifth Series'
}, {
data: [4, 6, 4],
name: 'Fifth Series'
}, {
data: [4, 6, 4],
name: 'Fifth Series'
}, {
data: [4, 6, 4],
name: 'Fifth Series'
}, {
data: [4, 6, 4],
name: 'Fifth Series'
}, {
...