Highcharts Demo

author(s): Torstein Hønsi

by Kondal Durgam

HTML

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

<div id="health" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('health', {
				chart: {
		          type: 'pie'
		        },
		        credits: {
	                  enabled: false
	              },
	              exporting: {
	                enabled: false
	               },
		        title: {
		          text: '',
		          y:140
		        },
				colors: ['#1b3264', '#5bc7ff', '#5b8eff', '#135af4'],
				 plotOptions: {
			   		pie: {
					 	borderColor: '#000000',
					 	innerSize: '70%',
					 	dataLabels: {
					   		enabled: true,
					   		format: '<b>{point.name}</b>: {point.percentage:.1f} %',
				   			style: {
								 width: '50px',
				 				color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
				   			}
					 	}
				   }
				 },
				 tooltip: {
				   pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
				 },
				 series: [{
				         name: 'Source',
				         data: [
				           ['Pysical visit', 59],
				           ['Call centre', 31],
				           ['Mela', 9],
				           ['Self', 2]
				         ]
				       }]
				   },
				   function(chart) {
				       chart.renderer.text('Total<br>39000', 120, 130)
				         .css({
				           color: '#000',
				           fontSize: '12px',
				         }).attr({
				           zIndex: 5
				         })
				         .add();
				     });
			    });