HighCharts LN PS

by Joshua Salwen

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div style="height:270px;width:700px;border:1px solid #000;">
    <div id="container" style="height:700px;width:270px;"></div>
</div>

JavaScript

Highcharts.setOptions({
    credits: {
        enabled: false
    },
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        reflow: false,
        events: {
            click: function(event) {
                alert('global click');
            },
            selection: function(event) {
                alert('global selection');
            }
        }
    },
    title: {
        align: 'left',
        x: 0,
        y: 5,
        style: {
            color: '#0B333C',
            fontSize: '12px',
            fontWeight: 'bold'
        }
    },
    tooltip: {
        formatter: function() {
            return '<b>' + this.point.name + ': ' + 
                Highcharts.numberFormat(this.percentage, 1) + '%</b><br/>(' + this.y + ')';
        }
    },
    plotOptions: {
        pie: {
            borderWidth: 0,
            size: 92,
            enableMouseTracking: true,
            allowPointSelect: false,
            cursor: 'pointer',
            dataLabels: {
                enabled: false
            },
            showInLegend: true
        }
    }
});
var pieSmall = {
    legend: {
        y: 92,
        labelFormatter: function() {
            return this.name.length > 12 ? this.name.substring(0, 10) + '...' : this.name;
        },
        width: 85
    },
    plotOptions: {
        pie: {
            size: 92,
            enableMouseTracking: false
        }
    }
};
var pieLarge = {
    legend: {
        y: 92,
        labelFormatter: function() {
            return this.name.length > 12 ? this.name.substring(0, 10) + '...' : this.name;
        },
        width: 280
    },
    plotOptions: {
        pie: {
            size: 272,
            enableMouseTracking: false
        }
    }
};
var pieBase = {
    legend: {
        align: 'right',
        verticalAlign: 'top',
        x: 0,
        layout: 'vertical',
        borderColor: null,
        reversed: true
    },
    chart: {
        renderTo:...