gauge needles attribute settings - Javascript highcharts

Javascript examples for highcharts:Gauge Chart

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

Description

gauge needles attribute settings

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 () {/*from www .j  a v  a2 s .  co m*/
   $('#container').highcharts({
       chart: {
           type: 'gauge',
           plotBorderWidth: 1,
           plotBackgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1,x3:0,y3:2 },
              stops: [
                 [0, '#FFF4C6'],
                 [0.3, '#FFFFFF'],
                 [1, '#FFFFFF']
              ]
           },
           plotBackgroundImage: null,
           height: 200
       },
       title: {
           text: 'VU meter'
       },
       pane: [{
           startAngle: -45,
           endAngle: 45,
           background: null,
           center: ['50%', '145%'],
           size: 300
       },
              {
           startAngle: -45,
           endAngle: 45,
           background: null,
           center: ['50%', '145%'],
           size: 300
       }],
       yAxis: [{
           min: -20,
           max: 6,
           minorTickPosition: 'outside',
           tickPosition: 'outside',
           labels: {
              rotation: 'auto',
              distance: 20
           },
           plotBands: [{
              from: 0,
              to: 6,
              color: '#C02316',
              innerRadius: '100%',
              outerRadius: '105%'
           }],
           pane: 0,
           title: {
              text: 'VU<br/><span style="font-size:8px">Channel A</span>',
              y: -40
           }
       },
               {
           min: -20,
           max: 6,
           pane: 1,
           title: {
              text: null,
           }
       }],
       plotOptions: {
          gauge: {
             dataLabels: {
                enabled: false
             }
          }
       }
 ,
       series: [{
            data: [{y:-5, color: 'red'}],
            yAxis: 0,
                    dial: {
                        backgroundColor : 'red'
                    }
       },{
            data: [{y:-3,color:'green'}],
            yAxis: 1,
                    dial: {
                        backgroundColor : 'green'
                    }
        },{
            data: [{y:-1,color:'blue'}],
            yAxis: 0,
                    dial: {
                        backgroundColor : 'blue'
                    }
    }]
   });
});

      </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: 300px; height: 300px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials