Highcharts test tool

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',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false

    },
    
    title: {
        text: 'Sensor'
    },
    
    pane: {
          center: ['50%', '50%'],
        size: '60%',
        startAngle: -130,
        endAngle: 130,
        background: [{
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#FFF'],
                        [1, '#333']
                    ]
                },
                borderWidth: 1,
                outerRadius: '112%'
            }, {
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#333'],
                        [1, '#FFF']
                    ]
                },
                borderWidth: 1,
                outerRadius: '120%'
            }, {
                // default background
            }, {
                backgroundColor: '#111',
                borderWidth: 0,
                outerRadius: '105%',
                innerRadius: '103%'
            }]

    },
    yAxis: {
        min: 0,
        max: 400,
        center: ['50%', '80%'],
       // size: '130%',
        lineWidth: 0,
        lineColor: 'black',
        gridLineWidth: 0,
        minPadding: 0,
        maxPadding: 0,
        endOnTick: false,
        startOnTick: false, // todo: fix tickInterval
        
        minorTickInterval: 5,
        minorTickWidth: 1,
        minorTickLength: 5,
        minorTickPosition: 'inside',
        minorGridLineWidth: 0,
        minorTickColor: '#666',

        tickPixelInterval: 30,
        tickInterval: 50,
        tickWidth: 2,
        tickPosition: 'inside',
        tickLength: 10,
        tickColor: '#666',
      ...