highcharts : issue in plotting 2 graphs in 1 chart - highcharts

Question

I have 2 graphs in 1 chart. The range of x-axis values for 1st graph is from 1 to 100. The range of x-axis values for 2nd graph is from 1 to 30. So, when the graphs are plotted in the chart, the 2nd graph gets plotted in very small area. So, it becomes difficult to read 2nd graph. My requirement - both the charts to be readable. Can anyone help me in doing this? Thanks in advance.

Answer 1

You could set up two axes - one for each series.
Example: http://jsfiddle.net/4v0a07op/
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: [{
},{
opposite: true
}],
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: [{
name: '1 to 30',
xAxis: 1,
data: [11,12,13,14,15,16,17,18,19,10,11,12,13,14,15,16,17,18,19,10,11,12,13,14,15,16,17,18,19,10]
}, {
name: '1 to 100',
xAxis: 0,
data: [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]
}]
});
});