Nunwood VOC Metric Gauge

by Danielle Parkinson

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/solid-gauge.js"></script>

<div id="container" style="width: 800px; height: 800px; margin: 0 auto">
</div>

JavaScript

if (!Highcharts.theme) {
    Highcharts.setOptions({
        chart: {
            backgroundColor: 'rgba(255,255,255,0)',
            style: {
                fontFamily: 'Chivo',
                color: '#e6e6e6'
            },
        },
        colors: ['#334653', '#003466', '#617582'],
        title: {
            style: {
                color: '#e6e6e6'
            }
        },
        tooltip: {
            style: {
                color: '#e6e6e6'
            }
        }
    });
}

Highcharts.chart('container', {

    chart: {
        type: 'solidgauge',
        width: 500,
        height: 500
    },
    
    credits: {
    	enabled: false
    },

    title: {
        text: ' ',
        style: {
            fontSize: '24px'
        }
    },

    tooltip: {
        borderWidth: 0,
        backgroundColor: 'none',
        shadow: false,
        style: {
            fontSize: '20px',
        },
        pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
        positioner: function (labelWidth) {
            return {
                x: 200 - labelWidth / 2,
                y: 180
            };
        }
    },

    pane: {
        startAngle: 0,
        endAngle: 360,
        background: [{ // Track for Move
            outerRadius: '100%',
            innerRadius: '91%',
            backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0])
                .setOpacity(0.3)
                .get(),
            borderWidth: 0
        }, 
        { // Track for Move
            outerRadius: '90%',
            innerRadius: '81%',
            backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
                .setOpacity(0.3)
                .get(),
            borderWidth: 0
        }]
    },

    yAxis: {
        min: 0,
        max: 100,
        lineWidth: 0,
        tickPositions: []
    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
        ...