0
votes

I am using Highcharts for Area Chart and displaying 2 y-axis but unable to set different min, max and tick intervals for them.

We need help in implementing multiple y axis with set values of min , max and tick intervals.

We are using Highcharts for Area Chart with 2 Y axis one on left side of the chart and other on right side of the chart. On left side of Y Axis we need the tick interval to be of 5 which is currently being shown as 20. Whereas on the right side of Y axis we need the tick interval of 10 which is currently being shown as 20. Siimilarly the min and max values for both the Y axis needs to be different. How we can we implement this ?

Appreciate the help.

Below is my highcharts config:

chart: {
    type: 'area',
},
title: {
    text: null
},
xAxis: {
    min: 0,
    max: 600,
    tickInterval: 50,
    title: {
        text: ""
    }
},  
yAxis: [{
    min: 10,
    max: 40,
    tickInterval: 5,
    title: {
        text: ''
    }
},{
    min: -30,
    max: 30,
    tickInterval: 10,
    title: {
        text: ''
    },
    opposite: true
}],
size: {
    width: 1050,
    height: 170
},
series: [{
    showInLegend : false,
    name: '',
    yAxis: 0,
    color: 'red',
    lineWidth: 1,
    data: [33.69, 33.68, 33.68, 33.68, 33.68, 33.86, 33.59, 33.96, 33.89, 33.98]
},{
    showInLegend : false,
    name: '',
    yAxis: 0,
    color: 'orange',
    lineWidth: 1,
    data: [21.71, 30.42, 30.42, 30.42, 30.42, 31.03, 21.63, 29.81, 30.92, 21.63]
},{
    showInLegend : false,
    name: '',
    yAxis: 1,
    color: 'black',
    lineWidth: 1,
    data: [-8.44, -8.65, -8.65, -8.65, -8.65, -8.68, -8.62, -8.77, -8.56, -8.73]

};

enter image description here

1
please provide jsfiddle for thisDipali Vasani
This is fiddle link for that jsfiddle.net/w2dmpwc7Mustafa Sunelwala

1 Answers

1
votes

you will have to use

alignTicks: false

here is updated fiddle