angular gauge: multiple dials with different colors - Javascript highcharts

Javascript examples for highcharts:Gauge Chart

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

Description

angular gauge: multiple dials with different colors

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 {// w  w w. ja  v  a  2  s.co m
   background: lightblue;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
$(function () {
    $('#gauge').highcharts({
        chart: {
            type: 'solidgauge',
            backgroundColor: '#fff'
        },
        title: null,
        pane: {
            center: ['50%', '80%'],
            size: '130%',
            startAngle: -90,
            endAngle: 90,
            background: {
                backgroundColor: '#FFF',
                innerRadius: '90%',
                outerRadius: '105%',
                shape: 'arc',
                borderColor: '#fff'
            }
        },
        tooltip: {
            enabled: false
        },
        // the value axis
        yAxis: {
            min: 0,
            max: 100,
            stops: [
                [0.1, '#e74c3c'], // red
                [0.5, '#f1c40f'], // yellow
                [0.9, '#2ecc71'] // green
                ],
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            gridLineWidth: 0,
            gridLineColor: 'transparent',
            labels: {
                enabled: false
            }
        },
        series: [{
            data: [83],
            innerRadius:'120%',
            radius: '110%'
        }, {
            data: [50],
            innerRadius:'110%',
            radius: '100%'
        }, {
            data: [19 ],
            innerRadius:'90%',
            radius: '80%'
        }]
    });
});
    });

      </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:242px;"></div>  
   </body>
</html>

Related Tutorials