Highcharts Solid Gauge Chart Example

Keywords : Solid gauge chart example using highcharts, How to use highcharts to implement solid gauge chart with example

Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Highcharts - Solid Gauge Chart</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <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>
    <script type="text/javascript">
        $(function () {
            var chartype = {
                type: 'solidgauge'
            }
            var chartitle = null
            var chartpane = {
                center: ['50%', '85%'],
                size: '140%',
                startAngle: -90,
                endAngle: 90,
                background: {
                    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                    innerRadius: '60%',
                    outerRadius: '100%',
                    shape: 'arc'
                }
            }
            var chartooltip = {
                enabled: false
            }
            var chartyaxis = {
                stops: [
                    [0.1, '#55BF3B'], // green
                    [0.5, '#DDDF0D'], // yellow
                    [0.9, '#DF5353'] // red
                ],
                lineWidth: 0,
                minorTickInterval: null,
                tickPixelInterval: 400,
                tickWidth: 0,
                title: {
                    y: -70
                },
                labels: {
                    y: 16
                }
            }
            var chartplotoptions = {
                solidgauge: {
                    dataLabels: {
                        y: 5,
                        borderWidth: 0,
                        useHTML: true
                    }
                }
            }
            var gaugeOptions = {
                chart:chartype,
                title: chartitle,
                pane: chartpane,
                tooltip:chartooltip,
                yAxis: chartyaxis,
                plotOptions: chartplotoptions
            };
            // The speed gauge
            $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
                yAxis: {
                    min: 0,
                    max: 200,
                    title: {
                        text: 'Speed'
                    }
                },
                credits: {
                    enabled: false
                },
                series: [{
                    name: 'Speed',
                    data: [80],
                    dataLabels: {
                        format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                               '<span style="font-size:12px;color:silver">km/h</span></div>'
                    },
                    tooltip: {
                        valueSuffix: ' km/h'
                    }
                }]
            }));
            // The RPM gauge
            $('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
                yAxis: {
                    min: 0,
                    max: 5,
                    title: {
                        text: 'RPM'
                    }
                },
                series: [{
                    name: 'RPM',
                    data: [1],
                    dataLabels: {
                        format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
                               '<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
                    },
                    tooltip: {
                        valueSuffix: ' revolutions/min'
                    }
                }]
            }));
            // Bring life to the dials
            setTimeout(function () {
                // Speed
                var chart = $('#container-speed').highcharts(),
                    point,
                    newVal,
                    inc;
                if (chart) {
                    point = chart.series[0].points[0];
                    inc = Math.round((Math.random() - 0.5) * 100);
                    newVal = point.y + inc;
                    if (newVal < 0 || newVal > 200) {
                        newVal = point.y - inc;
                    }
                    point.update(newVal);
                }
                // RPM
                chart = $('#container-rpm').highcharts();
                if (chart) {
                    point = chart.series[0].points[0];
                    inc = Math.random() - 0.5;
                    newVal = point.y + inc;

if (newVal < 0 || newVal > 5) {
                        newVal = point.y - inc;
                    }
                    point.update(newVal);
                }
            }, 2000);
        });
    </script>
</head>
<body>
    <div style="width: 600px; height: 400px; margin: 0 auto">
        <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
        <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
    </div>
</body>
</html>

Highcharts Solid Gauge Chart Example

Example

Result