Highcharts test tool

by philderksen

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 150px; height: 100px; margin: 0 auto; border: 1px solid #eee"></div>

JavaScript

$(function () {
    var chart = new Highcharts.Chart({
    
        chart: {
            renderTo: 'container',
            type: 'gauge',
            margin: [0, 0, 0, 0],
            plotBorderWidth: 1,
            height: 100
        },
    
        // Remove title, export menu, legend, credits.
		title: { text: null },
		exporting: { enabled: false },
		legend: { enabled: false },
		credits:  { enabled: false },
        
        pane: {
            startAngle: -45,
            endAngle: 45,
            background: null,
            center: ['50%', '115%'],
            size: 145
        },                        
    
        yAxis: {
            min: 0,
            max: 100,
            minorTickPosition: 'outside',
            minorTickLength: 5,
            minorTickWidth: 2,
            minorTickInterval: 5,
            tickPosition: 'outside',
            tickLength: 10,
            tickWidth: 3,
            tickInterval: 25,
            labels: {
                rotation: 0,
                distance: 20,
                style: {
                    size: '120%',
                    fontWeight: 'bold'
                }
            },
            // Red band on left-side.
            plotBands: [{
                from: 0,
                to: 25,
                color: '#C02316',
                innerRadius: '100%',
                outerRadius: '115%'
            }]
        },
        
        plotOptions: {
            gauge: {
                dataLabels: {
                    enabled: false
                },
                dial: {
                    radius: '100%',
                    baseWidth: 7
                }
            }
        },            
    
        series: [{
            data: [80],
            yAxis: 0
        }] 
    });
});