Highcharts Demo

author(s): Grzegorz Blachliński

by Chitkala More

HTML

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



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

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 500px;
    margin: 1em auto;
}
.legend-box {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    float:left;
}
.highcharts-legend-item .blue-table-head-section {
    width: 120px;
    padding: 20px 15px;
    position: relative;
    background: #dbf3fe !important;
    white-space: pre-wrap;
    margin:10px;
  
    float:left;
}

.fnt16{
  font-family:'Open Sans';
  font-size: 16px;
  color:#050505;
}
.mt10{
  display:inline-block;
  margin-top:10px;
}

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },  
   
    title: {
		text: '<span style="font-size:12px;color:#050505;font-weight:400;">Total Patients<span><br><span class="fnt16">52800</span>',
		align: 'center',
		verticalAlign: 'middle',
		floating: true,
		y: 20,
    x:-140,
		style: {
			color: '#050505',
			fontWeight: '600',
			fontSize: '14px'
		}
	},
     exporting: {
        enabled: false,
    },
    credits: {
        enabled: false
    },
   plotOptions: {
		pie: {
			dataLabels: {
				enabled: true,
				format: '<span><span style="font-size:11px;color:rgba(5,5,5,.8);font-weight:400;white-space:pre-wrap;width:120px;">{point.name}</span><br><span class="fnt16 mt10"> {point.y}</span></span>',
				style: {
					color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
					width: '100px'
				},
				connectorColor: '#7f7f7f',
				softConnector: false,
				distance: 40,
			},		
			startAngle: 0,
			endAngle: 360,
			borderWidth: 0,
			minSize: 120,
		//	center: ['50%', '50%']
		}
	},
    legend:{
     enabled: true,
       align: 'right',
       verticalAlign: 'middle',
        layout: 'vertical',
       // floating:true,
        symbolRadius: 0,
         useHTML: true,
         alignColumns: true,
        x: 0,
        y: 0,
        symbolPadding: 0,
        symbolWidth: 0.1,
        symbolHeight: 0.1,
        symbolRadius: 0,
        useHTML: true,
        symbolWidth: 0, 
       /*  labelFormatter: function () {
            return '<div class="w200 mb10"><span class="legend-box" style="background-color:' + this.color + ';"></span><span class="fnt11" style="font-family:Open Sans;">' + this.name + '<span class="fnt11" style="font-family:Open Sans;color:#000;"><span class="fnt16"> (' + this.y + ')</span></span></span></div>';
        }, */
         labelFormatter: function () {
                var points = this.yData,
                    avg = 0,
                    counter = 0;
               /* ...