Highcharts Demo

author(s): Torstein Hønsi

HTML

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

JavaScript

$(function () {
    var chart;
    $('#pie_chart').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: null
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                showInLegend: true,
                dataLabels: {
                    enabled: true,
                    defer: false,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        colors: ['#77AEFF', '#94D664', '#E3DE51', '#D69567', '#D66664', '#aaaaab', '#a89375'],
        legend: {
            enabled: true
        },
        series: [{
            type: 'pie',            
            data: [
                ['$64,351.70', 90.0], {
                    name: '$4,580.37',
                    y: 6.0,
                    sliced: true,
                    selected: true
                }, ['$742.31', 1.0],
                ['$1231.43', 2.0],
                ['499.97', 1.0],
                ['$74.54', 0.0],
                ['$32.35', 0.0], 
            ]
        }]
    }, function (chart) { // on complete
        $(document).ready(function () {
            chart.legend.allItems[0].update({
                name: 'Current'
            });
            chart.legend.allItems[1].update({
                name: '31-60'
            });
            chart.legend.allItems[2].update({
                name: '61-90'
            });
            chart.legend.allItems[3].update({
                name: '91-120'
            });
            chart.legend.allItems[4].update({
                name:...