Highcharts Demo

author(s): Torstein Hønsi

by hendrikdegraaf

HTML

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

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

CSS

#container {
    height: 400px;
}

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'pie',
        spacingTop: 20,
        style: {
            fontFamily: 'Roboto,Helvetica Neue,Helvetica,Arial,sans-serif',
        },
        events: {},
    },
    title: {
        margin: 30,
        align: 'center',
        style: {
            color: '#212934',
            fontSize: '18px',
            fontWeight: 'normal',
            fontStyle: 'normal',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
        },
        text: '2024 - Fully Immunized child',
    },
    subtitle: {
        align: 'center',
        style: {
            color: '#4a5768',
            fontSize: '13px',
            fontWeight: 'normal',
            fontStyle: 'normal',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
        },
    },
    yAxis: [
        {
            min: 0,
            title: {
                text: null,
            },
            gridLineColor: '#F1F1F1',
            labels: {
                style: {
                    color: '#404b5a',
                    fontSize: '11px',
                    fontWeight: 'normal',
                    fontStyle: 'normal',
                },
            },
            id: 'AXIS_0',
            reversedStacks: true,
            opposite: false,
        },
    ],
    series: [
        {
            colorByPoint: true,
            allowPointSelect: true,
            cursor: 'pointer',
            data: [
                {
                    id: 'tDZVQ1WtwpA',
                    name: 'Hospital',
                    y: 3442,
                },
                {
                    id: 'RXL3lPSK8oG',
                    name: 'Clinic',
                    y: 9378,
                },
                {
                    id: 'CXw2yu5fodb',
                    name: 'CHC',
                    y: 45716,
                },
            ],
            colors:...