Highcharts - Gauge Chart with Dual Axes

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

An example of a Gauge Chart 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

This 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_guage_dualaxes.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',
               plotBackgroundColor: null,
               plotBackgroundImage: null,
               plotBorderWidth: 0,
               plotShadow: false	 
            };
            var credits = {
               enabled: false
            };
            var title = {
               text: 'Speedometer with dual axes'
            };
            var pane = {
               startAngle: -150,
               endAngle: 150
            };
            // the value axis
            var yAxis = [
               {
                  min: 0,
                  max: 200,
                  lineColor: '#339',
                  tickColor: '#339',
                  minorTickColor: '#339',
                  offset: -25,
                  lineWidth: 2,
                  
                  labels: {
                     distance: -20,
                     rotation: 'auto'
                  },
                  tickLength: 5,
                  minorTickLength: 5,
                  endOnTick: false
               }, 
               {
                  min: 0,
                  max: 124,
                  tickPosition: 'outside',
                  lineColor: '#933',
                  lineWidth: 2,
                  minorTickPosition: 'outside',
                  tickColor: '#933',
                  minorTickColor: '#933',
                  tickLength: 5,
                  minorTickLength: 5,
                  
                  labels: {
                     distance: 12,
                     rotation: 'auto'
                  },
                  offset: -20,
                  endOnTick: false
               }
            ];
            var series = [
               {
                  name: 'Speed',
                  data: [80],
                  dataLabels: {
                     formatter: function () {
                        var kmh = this.y,
                        mph = Math.round(kmh * 0.621);
                        return '<span style = "color:#339">' +
                           kmh + ' km/h</span><br/>' +
                           '<span style = "color:#933">' + mph + ' mph</span>';
                     },
                     backgroundColor: {
                        linearGradient: {
                           x1: 0,
                           y1: 0,
                           x2: 0,
                           y2: 1
                        },
                        stops: [
                           [0, '#DDD'],
                           [1, '#FFF']
                        ]
                     }
                  },
                  tooltip: {
                     valueSuffix: ' km/h'
                  }
               }
            ];     
            var json = {};   
            json.chart = chart; 
            json.credits = credits;
            json.title = title;       
            json.pane = pane; 
            json.yAxis = yAxis;    
            json.series = series;      
   
            // Add some life
            var chartFunction = function (chart) {
               setInterval(function () {
                  var point = chart.series[0].points[0],
                     newVal,
                     inc = Math.round((Math.random() - 0.5) * 20);
                  
                  newVal = point.y + inc;
                  if (newVal < 0 || newVal > 200) {
                     newVal = point.y - inc;
                  }
                  point.update(newVal);
               }, 3000);
            };
            $('#container').highcharts(json, chartFunction);  
         });
      </script>
   </body>
   
</html>

Result

Verify the result.

highcharts_angular_gauges.htm