Highcharts - Legend formatted
HTML
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
JavaScript
$(function () {
$(document).ready(function () {
/**
* 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,
translateY;
proceed.call(this); // call original legend render
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';
translateY = this.group.attr('translateY') + this.legendHeight;
this.group.attr('translateY', translateY);
this.group.alignAttr.translateY = translateY;
this.positionCheckboxes();
}
});
}(Highcharts));
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
legend:{
layout:'vertical',
labelFormatter: function () {
var c = this.change<0?'red':'green';
return "<span style='width:200px;display:inline-block;'>"+this.name+"</span><span style='width:40px;display:inline-block;'>"+this.y+"</span><span style='color:"+c+"'>"+this.change+"</span>";
},
useHTML:true
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
...