set the y-axis properly in solid gauge chart - Javascript highcharts

Javascript examples for highcharts:Gauge Chart

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

Description

set the y-axis properly in solid gauge chart

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> 
      <style id="compiled-css" type="text/css">

body {/*from   w ww . java  2s  . c  o m*/
   background: lightblue;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
$(function () {
    $('#gauge').highcharts({
        chart: {
            type: 'solidgauge',
            backgroundColor: 'transparent',
            spacing: [0,0,0,0]
        },
        title: null,
        pane: {
            center: ['50%', '70%'],
            size: '100%',
            startAngle: -90,
            endAngle: 90,
            background: {
                backgroundColor: '#fff',
                innerRadius: '75%',
                outerRadius: '100%',
                shape: 'arc',
                borderColor: 'transparent'
            }
        },
        tooltip: {
            enabled: false
        },
        // the value axis
        yAxis: {
            min: 0,
            max: 100,
            stops: [
                [0.5, '#e74c3c'], // red
                ],
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            gridLineWidth: 0,
            gridLineColor: 'transparent',
            labels: {
                enabled: false
            },
            title: {
                enabled: false
            }
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            solidgauge: {
                innerRadius: '75%',
                dataLabels: {
                    y: -45,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        },
        series: [{
            data: [83],
            dataLabels: {
                format: '<p style="text-align:center;">{y}%</p>'
            }
        }]
    });
});
    });

      </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.src.js"></script> 
      <div id="gauge" style="height:142px;"></div>  
   </body>
</html>

Related Tutorials