Highcharts Demo

author(s): Torstein Hønsi

by Kesav Telaprolu

HTML

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

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

CSS

#container {
    min-width: 310px;
    max-width: 800px;
    height: 400px;
    margin: 0 auto
}

JavaScript

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        margin: [0, 0, 0, 0],
        spacingTop: 23,
        spacingBottom: 23,
        spacingLeft: 23,
        spacingRight: 23,
        plotBorderWidth: 0,
        events: {
            load: function() {
                var x = this.chartWidth / 2,
                    y = this.chartHeight / 2,
                    r = x > y ? y : x;

                this.renderer
                    .circle(x, y, 0.65 * r)
                    .attr('fill', '#F0F')
                    .add()
            }
        }
        //polar: true,
        //type: 'inline'
    },
    exporting: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        size: '10%',
        series: {
            states: {
                hover: {
                    enabled: false
                }
            }
        },
        pie: {
            innerSize: 10,
            backgroundColor: 'red',
            depth: 5,
            dataLabels: {
                connectorWidth: 0
            }
        }
    },
    tooltip: {
        enabled: false
        //pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    title: {
        text: '<div style="background-color:#2cb5e1;">Today WalkIn<br>67<br>Average wait time<br> 02:00</div>',
        align: 'center',
        verticalAlign: 'middle',
        y: 5,
        style: {
            color: '#000',
            fontWeight: 'bold',
            fontSize: '28px',
        }
    },
    legend: {
        layout: "vertical",
        align: "right",
        verticalAlign: "middle",
    },
    series: {
        states: {
            hover: {
                enabled: false
            }
        }
    },
    series: [{
            type: 'pie',
            dataLabels: false,
            shadow: false,

            data: [{
                name: '',
                y: 7,
                color: '#fc525a',
            }, {
              ...