Highcharts Demo

author(s): Torstein Hønsi

HTML

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

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

CSS

body {
  background-color: black;
}

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'gauge',
        height: '53%',
        margin: [-30, 15, 30, 15],
        backgroundColor: 'transparent',
        plotBackgroundColor: 'transparent',
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false
    },

    title: '',

    pane: {
        startAngle: -90,
        endAngle: 90,
        background: null,
				size: '140%',
				center: ['50%', '96%']
    },

    plotOptions: {
        gauge: {
            dial: {
                radius: '90%',
                backgroundColor: '#d2d2d2',
                borderWidth: 0,
                baseWidth: 13,
                topWidth: 0,
                baseLength: '0%',
                rearLength: '0%'
            },
            pivot: {
                backgroundColor: '#d2d2d2',
                radius: 6            		
            }
        }
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 300,
        
        title: {
            text: ''
        },
        lineWidth: 0,

				tickPositions: [ 49, 115, 164, 189 ],
        tickWidth: 0,
        minorTicks: false,
        labels: {
        		rotation: 'auto',
            distance: 3,
            style: {
  		          color: 'white',
                fontSize: '80%'
	          }
        },
        
        plotBands: [{
        		thickness: '60%',
            from: 0,
            to: 49,
            color: '#ff2902'
        }, {
        		thickness: '60%',
            from: 49,
            to: 115,
            color: '#ff9f26'
        }, {
        		thickness: '60%',
            from: 115,
            to: 164,
            color: '#377f1d'
        }, {
        		thickness: '60%',
            from: 164,
            to: 189,
            color: '#ff9f26'
        }, {
        		thickness: '60%',
            from: 189,
            to: 300,
            color: '#ff2902'
        }]
    },

    series: [{
        name: 'Stufe 3',
        data: [195],
       ...