Highcharts Speedometer

by Torstein Hønsi

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="http://code.highcharts.com/radial/highcharts.js"></script>
<script src="http://code.highcharts.com/radial/highcharts-more.js"></script>
<script src="http://code.highcharts.com/radial/modules/exporting.js"></script>

<div id="resizer" style="min-width: 350px; min-height: 200px">
    <div id="inner-resizer">
        <div id="container" style="height: 300px">
        </div>
    </div>
</div>

<button class="set" data-value="0">Set 0</button>
<button class="set" data-value="80">Set 80</button>
<button class="set" data-value="120">Set 120</button>

<p style="margin-top: 1em">See also
    <ul>
        <li><a target="_top" href="http://jsfiddle.net/highcharts/BFN2F/">Clock demo</a></li>
        <li><a target="_top" href="http://jsfiddle.net/highcharts/QeJGx/">Half gauge demo</a></li>
        <li><a target="_top" href="http://jsfiddle.net/highcharts/HzexJ/">Dual axes</a></li>
    </ul>
</p>

CSS

body {
    margin: 10px;
}
#resizer {
    border: 1px solid silver;   
}
#inner-resizer { /* make room for the resize handle */
    padding: 10px;
}

JavaScript

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        type: 'gauge',
        backgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
            stops: [
                [0, '#EEE'],
                [1, '#CCC']
            ]
        },
        borderWidth: 1
    },
    
    title: {
        text: 'Speedometer'
    },
    
    pane: {
        startAngle: -150,
        endAngle: 150,
        background: [{
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#FFF'],
                    [1, '#333']
                ]
            },
            borderWidth: 0,
            outerRadius: '109%'
        }, {
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#333'],
                    [1, '#FFF']
                ]
            },
            borderWidth: 1,
            outerRadius: '107%'
        }, {
            // default background
        }, {
            backgroundColor: '#DDD',
            borderWidth: 0,
            outerRadius: '105%',
            innerRadius: '103%'
        }]
    },
       
    yAxis: {
        min: 0,
        max: 200,
        lineWidth: 0,
        lineColor: 'gray',
        gridLineWidth: 0,
        minPadding: 0,
        maxPadding: 0,
        endOnTick: false,
        startOnTick: false, // todo: fix tickInterval
        
        minorTickInterval: 'auto',
        minorTickWidth: 1,
        minorTickLength: 10,
        minorTickPosition: 'inside',
        minorGridLineWidth: 0,
        minorTickColor: '#666',

        tickPixelInterval: 30,
        tickWidth: 2,
        tickPosition: 'inside',
        tickLength: 10,
        tickColor: '#666',
        startAngle: -150,
        endAngle: 150,
        labels: {
            step: 2,
            rotation: 'auto'
        },
        title: {
            text:...