Highcharts Linear Gauges

by Torstein Hønsi

HTML

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

<div id="container1" class="container"></div>
<div id="container2" class="container"></div>

CSS

.container {
    width: 300px;
    height: 70px;
    margin: 1em auto;
}

JavaScript

$('#container1').highcharts({
    
    chart: {
        type: 'bar'
    },
    
    title: {
        text: null
    },
    
    credits: {
        enabled: false
    },
    
    yAxis: {
        min: 0, 
        max: 100,
        opposite: true,
        title: {
            text: null
        },
        plotBands: [{
            from: 0,
            to: 50,
            color: '#55BF3B' // green
        }, {
            from: 50,
            to: 80,
            color: '#DDDF0D' // yellow
        }, {
            from: 80,
            to: 100,
            color: '#DF5353' // red
        }]
    },

    xAxis: {
        labels: {
            enabled: false
        },
        tickLength: 0
    },

    series: [{
        data: [75],
        showInLegend: false,
        color: '#000000',
        dataLabels: {
            enabled: true,
            style: {
                color: 'black'
            }
        }
    }]

});

$('#container2').highcharts({
    
    chart: {
        inverted: true,
        type: 'scatter'
    },
    
    title: {
        text: null
    },
    
    credits: {
        enabled: false
    },
    
    yAxis: {
        min: 0, 
        max: 100,
        opposite: true,
        title: {
            text: null
        },
        plotBands: [{
            from: 0,
            to: 50,
            color: '#55BF3B' // green
        }, {
            from: 50,
            to: 80,
            color: '#DDDF0D' // yellow
        }, {
            from: 80,
            to: 100,
            color: '#DF5353' // red
        }]
    },

    xAxis: {
        labels: {
            enabled: false
        },
        tickLength: 0,
        min: 0,
        max: 1
    },

    series: [{
        data: [75],
        animation: false,
        showInLegend: false,
        color: '#000000',
        dataLabels: {
            enabled: true,
            style: {
                color: 'black'
            }
        }
    }]

});