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/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; max-width: 600px; height: 600px; margin: 0 auto"></div>

CSS

g.highcharts-pane-group > path{
  fill: #fff;
   stroke: none;
   stroke-width: 0;
}
.level-wrapper .highcharts-gauge-series .highcharts-dial {
   fill: #20226a;
   stroke-width: 5px;
   d: path("M -8.67 -4.5 L 60.69 -1.5 L 82.7 0.5 L 82.7 0.5 L 58.69 1.5 L -8.67 4.5 Z");
}

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'gauge',
        plotBackgroundColor: '#fff',
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false
    },

    title: {
        text: 'My Blood Glucose Level',       
        y:450,
       
    },
   subtitle: {
    text: 'Normal',
    y:420,
    style:{
    color:'#f00',
    fontSize:'32px'
    }
},

    pane: {
        startAngle: -90,
        endAngle: 90,  
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 300,

        minorTickInterval: 'auto',
        minorTickWidth: 0,
        minorTickLength: 0,
        minorTickPosition: 'inside',
        minorTickColor: '#f00',

        tickPixelInterval: 0,
        tickWidth: 2,
        tickPosition: 'inside',
        tickLength: 10,
        tickColor: '#000',
        labels: {
            step: 2,
            rotation: 'auto'
        },
        title: {
            text: 'mg/dl',
            
        },
        plotBands: [{
            from: 0,
            to: 100,      
             color: {
                 
                   radialGradient: { cx: 0.2, cy: 0.8, r: 1 },
                  stops: [
                     [0, '#2ac58f'],
                     [1, '#d1c54d']
                  ]
                },
                from: 0,
                to: 100
        }, {
            from: 100,
            to: 200,
             color: {
                     radialGradient: { cx: 0.3, cy: 0.6, r: 1 } ,
                    stops: [
                        [0, '#cac54f'],
                        [1, '#ff7d43']
                    ]
                },
        }, {
            from: 200,
            to: 300,
            color: {
                      radialGradient: { cx: 0.3, cy: 0.6, r: 1 } ,
                    stops: [
                        [0, '#ff7d43'],
                        [1, '#ff544f']
                    ]
                },
        }]
    },

    series: [{
        name: 'Glucose',
       ...