Highcharts Gauge Demo

how to make semi-circular gauges with needle pivots

by Anand Rathod

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="containerSimple" style="width: 500px; height: 500px; margin: 0 auto"></div>
<br />
<div id="containerUgly" style="width: 500px; height: 500px; margin: 0 auto"></div>

JavaScript

// simple chart
$(function () {
   var simpleChart = new Highcharts.Chart({
        chart: {
            renderTo: 'containerSimple',
            type: 'gauge',
        },

        pane: {
            startAngle: -90,
            endAngle: 90,
            // center: ['50%', '100%']
            background: [],
            // size: 400,
            // backgroundColor: '#E4E3DF'
        },

        plotOptions: {
            gauge: {
                dial: // simpleDialNeedle
                {
                    // needle extending from pivot
                    baseLength: 10, // how high the fat part rises
                    baseWidth: 4, // fat part of needle                   
                    rearLength: 0.5, // below the pivot                    
                    radius: 80, // this is how tall the needle goes (%)
                    // backgroundColor: '#f00',
                    borderColor: '#fff',
                    borderWidth: 0,
                }
            }
        },

        yAxis: [{

            // value settings
            min: 0,
            max: 100,
            endOnTick: false,
            offset: -4,
            labels: // simpleDialLabelNumbers
            {
                distance: 25,
                rotation: 'auto', // 0
                align: 'center',
                style: {
                    color: '#666',
                    fontWeight: 'bold',
                    fontSize: '1.4em',
                }
            },

            // line
            lineWidth: 10,
            lineColor: '#77c5db',

            // tick
            tickLength: 15,
            tickWidth: 3,
            tickColor: '#77c5db',
            tickPosition: 'outside',

            // minor tick
            minorTickColor: '#00f',
            minorTickPosition: 'outside',
            minorTickLength: 3,
            //



            plotBands: [
            // simpleDialPlotband
            {
                from: 0,
                to: 100,
       ...