gauge chart with gradient plotband - Javascript highcharts

Javascript examples for highcharts:Gauge Chart

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

Description

gauge chart with gradient plotband

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://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {//from   ww w.  j  a va 2s . c  o  m
    var chart = new Highcharts.Chart({
       chart: {
           renderTo: 'container',
           type: 'gauge'
       },
       pane: {
          startAngle: -150,
          endAngle: 150
       },
      yAxis: {
         min: 0,
         max: 100,
            plotBands: [{ // mark the weekend
                color: {
                    linearGradient: [300, 300, 0, 0],
                    stops: [
                        [0, 'rgb(255, 255, 255)'],
                        [1, 'rgb(150, 200, 155)']
                    ]
                },
                from: 0,
                to: 100
            }],
      },
      plotOptions: {
         gauge: {
            dial: {
               radius: '100%',
               backgroundColor: 'silver',
               borderColor: 'black',
               borderWidth: 1,
               baseWidth: 10,
               topWidth: 1,
               baseLength: '90%', // of radius
               rearLength: '50%'
            }
         }
      },
       series: [{
           data: [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/exporting.js"></script> 
      <div id="container" style="width: 400px; height: 300px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials