Chart with Dual Axes, Line and Column

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

An example of a combination chart having Dual Axes, Line and Column is given below.

Configurations

Let us now see the additional configurations/steps taken.

yAxis

Add two yAxis values in yAxis with other attributes.

var yAxis = [
   { // Primary yAxis 
   }, 
   
   { // Secondary yAxis
   }, 
   
   {
   }
]

Example

highcharts_combinations_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>  
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {  
            var chart = {
               zoomType: 'xy'
            };
            var subtitle = {
               text: 'Source: WorldClimate.com'   
            };
            var title = {
               text: 'Average Monthly Temperature and Rainfall in Tokyo'   
            };
            var xAxis = {
               categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
               crosshair: true
            };
            var yAxis = [
               { // Primary yAxis
                  labels: {
                     format: '{value}\xB0C',
                     style: {
                        color: Highcharts.getOptions().colors[1]
                     }
                  },
                  title: {
                     text: 'Temperature',
                     style: {
                        color: Highcharts.getOptions().colors[1]
                     }
                  }
               }, 
               { // Secondary yAxis
                  title: {
                     text: 'Rainfall',
                     style: {
                        color: Highcharts.getOptions().colors[0]
                     }
                  },
                  labels: {
                     format: '{value} mm',
                     style: {
                        color: Highcharts.getOptions().colors[0]
                     }
                  },
                  opposite: true
               }
            ];
            var tooltip = {
               shared: true
            };
            var legend = {
               layout: 'vertical',
               align: 'left',
               x: 120,
               verticalAlign: 'top',
               y: 100,
               floating: true,
               
               backgroundColor: (
                  Highcharts.theme && Highcharts.theme.legendBackgroundColor)
                  || '#FFFFFF'
            };
            var series = [
               {
                  name: 'Rainfall',
                  type: 'column',
                  yAxis: 1,
                  data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5,
                     216.4, 194.1, 95.6, 54.4],
                  tooltip: {
                     valueSuffix: ' mm'
                  }
               }, 
               {
                  name: 'Temperature',
                  type: 'spline',
                  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
                  tooltip: {
                     valueSuffix: '\xB0C'
                  }
               }
            ];     
      
            var json = {};   
            json.chart = chart;   
            json.title = title;
            json.subtitle = subtitle;      
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.tooltip = tooltip;  
            json.legend = legend;  
            json.series = series;
            $('#container').highcharts(json);  
         });
      </script>
   </body>
   
</html>

Result

Verify the result.

highcharts_combinations.htm