Gauge chart labels - Javascript highcharts

Javascript examples for highcharts:Gauge Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Gauge Chart

Description

Gauge chart labels

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function () {//w w w  .j  a  v  a  2s  .  c  om
    var gaugeOptions = {
        chart: {
            type: 'solidgauge'
        },
        title: null,
        pane: {
            center: ['50%', '85%'],
            size: '140%',
            startAngle: -90,
            endAngle: 90,
            background: {
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },
        tooltip: {
            enabled: false
        },
        yAxis: {
            stops: [
                [0.1, '#55BF3B'], // green
                [0.5, '#DDDF0D'], // yellow
                [0.9, '#DF5353'] // red
            ],
            lineWidth: 0,
            minorTickInterval: null,
            tickPositioner: function () {
                var positions = [],
                    numberOfTicks = 5;
                    tick = this.min,
                    increment = (this.max - this.min) / (numberOfTicks - 1);
                for (tick; tick - increment <= this.max; tick += increment) {
                    positions.push(Math.round(tick * 100) / 100);
                }
                return positions;
            },
            tickWidth: 0,
            title: {
                y: -70
            },
            labels: {
                y: 16
            }
        },
        plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: 5,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        }
    };
    $('#container-temp').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
            min: 10.39,
            max: 23.83,
            title: {
                text: 'Speed'
            }
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Temperature',
            data: [23.23],
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                       '<span style="font-size:12px;color:silver">C</span></div>'
            },
            tooltip: {
                valueSuffix: ' C'
            }
        }]
    }));
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script src="https://code.highcharts.com/modules/solid-gauge.js"></script> 
      <div style="width: 600px; height: 400px; margin: 0 auto"> 
         <div id="container-temp" style="width: 300px; height: 200px; float: left"></div> 
      </div>  
   </body>
</html>

Related Tutorials