YouTip LogoYouTip

Highcharts Combinations Dualaxes

[![Image 1: Highcharts Combination Chart](#)Highcharts Combination Chart](#) The following example demonstrates a dual Y-axis, column chart, and line chart combination. We have already learned the basic configuration syntax of Highcharts in previous chapters. Next, let's look at other configurations. * * * ## Configuration ### yAxis Configuration Add the values for two Y-axes in the yAxis property. var yAxis = [{ // First Y-axis }, { // Second Y-axis }}] ### Example Filename: highcharts_combinations_dualaxes.htm
$(document).ready(function() { var chart = { zoomType: 'xy' }; var subtitle = { text: 'Source: ' }; var title = { text: 'Monthly Average Temperature and Rainfall in Tokyo' }; var xAxis = { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], crosshair: true }; var yAxis= [{ // First Y-axis labels: { format: '{value}xB0C', style: { color: Highcharts.getOptions().colors } }, title: { text: 'Temperature', style: { color: Highcharts.getOptions().colors } } }, { // Second Y-axis title: { text: 'Rainfall', style: { color: Highcharts.getOptions().colors } }, labels: { format: '{value} mm', style: { color: Highcharts.getOptions().colors } }, 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); }); The output of the above example is: [![Image 2: Highcharts Combination Chart](#)Highcharts Combination Chart](#)
← Highcharts Combinations ScatteHighcharts Tree Maps β†’