Highcharts - VU Meter Chart

We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter.

An example of a Gauge with dual axes is given below.

Configurations

Let us now see the additional configurations/steps taken.

chart.type

Configure the chart type to be gauge based. Set the type as 'gauge'.

var chart = {
   type: 'guage'
};

pane

Applies only to polar charts and angular gauges. This configuration object holds general options for the combined X and Y axes set. Each xAxis or yAxis can reference the pane by index.

var pane = {
   startAngle: -150,
   endAngle: 150
};

Example

highcharts_vumeter.htm

Live Demo

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>    
      <script src = "https://code.highcharts.com/highcharts-more.js"></script>    
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
      $(document).ready(function() {  
            var chart = {
               type: 'gauge',
               plotBorderWidth: 1,
               plotBackgroundColor: {
                  linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                  stops: [
                     [0, '#FFF4C6'],
                     [0.3, '#FFFFFF'],
                     [1, '#FFF4C6']
                  ]
               },
               plotBackgroundImage: null,
               height: 200
            };
            var credits = {
               enabled: false
            };
            var title = {
               text: 'VU meter'
            };
            var pane = [
               {
                  startAngle: -45,
                  endAngle: 45,
                  background: null,
                  center: ['25%', '145%'],
                  size: 300
               }, 
               {
                  startAngle: -45,
                  endAngle: 45,
                  background: null,
                  center: ['75%', '145%'],
                  size: 300
               }
            ];
            var 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,
                  minorTickPosition: 'outside',
                  tickPosition: 'outside',
                  labels: {
                     rotation: 'auto',
                     distance: 20
                  },
                  plotBands: [{
                     from: 0,
                     to: 6,
                     color: '#C02316',
                     innerRadius: '100%',
                     outerRadius: '105%'
                  }],
                  pane: 1,
                  title: {
                     text: 'VU<br/><span style = "font-size:8px">Channel B</span>',
                     y: -40
                  }
               }
            ];
            var plotOptions = {
               gauge: {
                  dataLabels: {
                      enabled: false
                  },
                  dial: {
                     radius: '100%'
                  }
               }
            };
            var series = [
               {
                  data: [-20],
                  yAxis: 0
               }, 
               {
                  data: [-20],
                  yAxis: 1
               }
            ];     
            
            var json = {};   
            json.chart = chart; 
            json.credits = credits;
            json.title = title;       
            json.pane = pane; 
            json.yAxis = yAxis; 
            json.plotOptions = plotOptions;  
            json.series = series;      
            
            // Add some life
            var chartFunction = function (chart) {
               setInterval(function () {
                  if (chart.series) { // the chart may be destroyed
                     var left = chart.series[0].points[0],
                     right = chart.series[1].points[0],
                     leftVal,
                     rightVal,
                     inc = (Math.random() - 0.5) * 3;
                     leftVal =  left.y + inc;
                     rightVal = leftVal + inc / 3;
                     
                     if (leftVal < -20 || leftVal > 6) {
                        leftVal = left.y - inc;
                     }
                     if (rightVal < -20 || rightVal > 6) {
                        rightVal = leftVal;
                     }
                     left.update(leftVal, false);
                     right.update(rightVal, false);
                     chart.redraw();
                  }
               }, 500);
            };
            $('#container').highcharts(json, chartFunction);  
         });
      </script>
   </body>
   
</html>

Result

Verify the result.

highcharts_angular_gauges.htm