Highcharts Demo

author(s): Torstein Hønsi

by Chitkala More

HTML

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

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

JavaScript

// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'column',
        backgroundColor: '#f8f8f8',
         spacingTop: 20,
        spacingBottom: 20,
        spacingLeft: 0,
        width: 300,
        height:200,
       
    },
    title: {
        text: 'Top 5 Disease',
        align: 'center',
        verticalAlign: 'bottom',
        floating: true,
      	y: 10,
						style: {
							color: '#717171',
							fontWeight: '600',
							fontSize: '11px'
						}
    },
 		credits: {
						enabled: false
					},
    xAxis: {
        type: 'category',
        labels: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: 'Patients'
        },
         tickInterval: '2000',
        labels: {
        format: '{value:,.0f}',
        
    }
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: false,
                format: '{point.y:.1f}%'
            }
        }
    },

    tooltip: {
        headerFormat: '',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.f}</b><br/>'
    },

    series: [{
        name: '',
        colorByPoint: true,
        colors: ["#bae1ff", "#ff8b94", "#bac9ff", "#a8e6cf", "#ffdfba"],
        data: [{
            name: 'Diabetes Mellitus ',
            y: 7000,
            drilldown:null
        }, {
            name: 'Neurological Disorder',
            y: 8000,
            drilldown:null
        }, {
            name: 'Asthma',
            y: 5900,
            drilldown: null
        }, {
            name: 'Skin Infections',
            y: 4000,
            drilldown: null
        }, {
            name: 'Neoplasm',
            y: 3500,
            drilldown: null
        }]
    }],
   
});