Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="pieChart" style="height: 400px; width: 500"></div>

CSS

.tooltip-opt {
    border: 2px dashed white;
    padding: 3px;
    
}

JavaScript

//$(document).ready(function() {    
$(window).bind("load", function() {

    pie1Options = {
        chart: {
            renderTo: 'pieChart',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            backgroundColor: 'rgba(0,0,0,0)'
        },
        title: {
            text: ''
        },
        legend: {
            enabled: false
        },
        tooltip: {
          useHTML:true,
            formatter: function() {
                return Highcharts.numberFormat(this.percentage, 2) + '%<br />' + '<b>' + this.point.id + '<br />Record ID ' + this.point.name + '</b><br />Value: ' + Highcharts.numberFormat(this.y, 2);
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                  useHTML:true,
                    enabled: true,
                    color: '#000000',
                    zIndex:0,
                    textAlign:'center',
                    style:{
                    textAlign:'center',
                    },
                    formatter: function() {
                        return '<center>'+Highcharts.numberFormat(this.percentage, 2) + '% <br> Record ID ' + this.point.name + '</b> | ' + Highcharts.numberFormat(this.y, 2)+'</center>';
                    }
                },
                showInLegend: false
            }
        },
        credits: {
            enabled: false
        }
    };
    var pie1 = new Highcharts.Chart(pie1Options, function(p1) {
        p1.addSeries({
            type: 'pie',
            name: 'Value',
            data: [{
                id: 'Product',
                y: 40.00,
                name: '001'},
            {
                id: 'Title 2',
                y: 10.00,
                name: '002'}]
        });
    });
});