Highcharts Demo - JSFiddle

author(s): Torstein Hønsi

by HemalathaThanigaivel

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

CSS

#container {
	width: 400px;
	margin: auto;
	height: 400px;
	margin: 0 auto;
}

JavaScript

Highcharts.setOptions({
     colors: [ '#9a88bb', '#e73c35', '#96c852', '#f3863a','#00a457', '#757479','#2e566c']
    });
    
$(function () {
    
        // Create the chart
        $('#container').highcharts({
            chart: {
                type: 'pie',
            },
            title: {
                text: ''
            },
            yAxis: {
                title: {
                    text: 'Total percent market share'
                }
            },
            plotOptions: {
                pie: {
                    shadow: false,
                    center: ['50%', '50%']
                }
            },
            tooltip: {
        	    enabled : true
            },
            credits:{
               enabled : false
            },
            series: [{
                name: 'Versions',
                size: '30%',
                data : [{
                    name : 'consumption',
                    y: 1,
                    color: "white"
                }],
                startAngle: -90,
                endAngle: 90,
                dataLabels: {
                    enabled: true,
                    useHTML : true,
                    formatter: function() {
                        return  '<span id="test" style="font-size:20px"><center>667KWH</center></span>'+
                        '<center> Total Usage </center>';
                    },
                    distance: -20,
                    color:'black'
                },
               tooltip: {
                    pointFormat: ''
                }
            },{
                name: 'Versions',
                data:[{name: 'Total charges', y :14, color: Highcharts.getOptions().colors[6]}],
                size: '30%',
                innerSize: '0%',
                startAngle: 90,
                endAngle: 270,
                dataLabels: {
                      enabled: true,
                      useHTML : true,
                      formatter: function() {
         ...