Highcharts Speedometer

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/master/highcharts.js"></script>
<script src="http://code.highcharts.com/master/highcharts-more.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 <a  target="_top" href="http://jsfiddle.net/highcharts/BFN2F/">Clock demo</a></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'
    },
    
    yAxis: {
        min: 0,
        max: 200,
        center: ['50%', '80%'],
        size: '130%',
        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: -90,
        endAngle: 90,
        labels: {
            step: 2,
            rotation: 'auto',
            align: 'center',
            distance: 15,
            x: 0,
            y: 0
        },
        title: {
            text: 'km/h'
        },
        background: [{
            shape: 'cutoff'
        }], 
        plotBands: [{
            from: 0,
            to: 120,
            color: '#55BF3B' // green
        }, {
            from: 120,
            to: 160,
            color: '#DDDF0D' // yellow
        }, {
            from: 160,
            to: 200,
            color: '#DF5353' // red
        }]        
    },

    series: [{
        name: 'Speed',
        data: [80],
        tooltip: {
            valueSuffix: ' km/h'
        },
        dataLabels: {
            enabled: false
        }
    }]

}, 
// Add some life
function (chart) {
    setInterval(function () {
        var point = chart.series[0].points[0],
            newVal,
...