Highcharts Demo

author(s): Grzegorz Blachliński

by Chitkala More

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

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

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 500px;
    margin: 1em auto;
}

caption {
	padding-bottom: 15px;
	font-family: 'Verdana';
	font-size: 1.2em;
	color:#555;
}

table {
	font-family: 'Verdana';
	font-size: 12pt;          
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 2px auto;
    text-align: center;
    width: 100%;
}

table tr:nth-child(odd) {
  background-color: #fff;
}

table tr:nth-child(even) {
  background-color: #FCF9F9;
}

th {
	font-weight: 600;
    padding: 10px;
}

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'variablepie'
    },  
  
    title: {
			text: '$5,000,000',
			align: 'center',
			verticalAlign: 'middle',
			floating: true,
			y: 20,
      x:-50
		},
     exporting: {
        enabled: false,
    },
    credits: {
        enabled: false
    },
  legend: {
    enabled: true,
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    itemMarginBottom: 10,
    symbolWidth: 10,
    symbolHeight: 10,
    symbolPadding: 10,
  },
	
    tooltip: {
        headerFormat: '',
       pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
          'Patients: <b>{point.y}' 
    },
  
    series: [{
        minPointSize: 10,
        innerSize: '30%',
        zMin: 0,       
        showInLegend: true,
        dataLabels: {
					enabled: true,
					format: '<span>{point.y} </span>',					
					connectorColor: '#ccc',
					softConnector: true,
				},
        data: [{
            name: 'ER',
            y: 7000,
            z: 90,
            color:'#ffbe4c'           
        }, {
            name: 'Outpatient',
            y: 3000,
            z: 30,
             color:'#77b7e9'
        }, {
            name: 'Urgent Care',
            y: 9000,
            z: 135,
            color:'#8585b0'
        }, {
            name: 'Rx',
            y: 2000,
            z: 137.5,
             color:'#8ad186'
        }, {
            name: 'SNF',
            y: 7000,
            z: 161.8,
             color:'#faa163'
        }, {
            name: 'HHA',
            y: 11000,
            z: 484.5,
             color:'#7d89e4'
        }, {
            name: 'ASC',
            y: 1000,
            z: 235.6,
             color:'#ff6487'
        }, {
            name: 'Palciative Care',
            y: 4000,
            z: 235.6,
             color:'#77d8b9'
        }, {
            name: 'Hospital',
            y: 4000,
            z: 235.6,
             color:'#ff8686'
       ...