[Solved]-Dual y-axis matching on Highcharts-Highcharts

A very nice question !!!

It is more of a math/geometry issue than a programming/highchart issue. But hey there is an entire subject on this jugglery. Computer Graphics !!

If I got your question right (I hope I did, else spent an hour solving a non-existent problem, and another drafting an understandable answer).

• You always want valueX1(90) to align with valudY1(60) and valueX2(140) to align with valueY2(90). X and Y are plotted on different y-axis.

Here is the solution. All we need to do is align the min's and max's of the two axes correctly for the required points to also align correctly by themselves.

Here is how we do that.

• Accept the min & max that is calculated by highcharts as it is for one of the axes and calculate the min & max of the other axis based on the following. (Which axis to accept can be tricky, will leave that to be out of scope for this question or as home work =] ). Lets go ahead with accepting the 1st axis' values from highchart and calculate values for second ourselves.

• How to calculate min2/max2 based on min1/max1?

  We use something known as Two-point form of solving linear equations

  y - y1 = (y2-y1)/(x2-x1)*(x-x1)
  

  here x1=90,y1=60,x2=140,y2=90. Put a value of x to get corresponding value of y. Put min1 to get min2, put max1 to get max2.

Code

var ticksX = {
    t1: 90,
    t2: 140
};
var ticksY = {
    t1: 60,
    t2: 90
};

function findY(X) {
    return ticksY.t1 + (X - ticksX.t1) * (ticksY.t2 - ticksY.t1) / (ticksX.t2 - ticksX.t1);
}

Adjust min/max of series2 based on calculated (by highcharts) min/max of series1 on chart load

var chart = new Highcharts.Chart({...}, function() {
  var minX = this.yAxis[0].getExtremes().min;
  var maxX = this.yAxis[0].getExtremes().max;
  this.yAxis[1].setExtremes(findY(minX), findY(maxX));
});​

Aligning ticks in multiple axes | Highchart & Highstock @ jsFiddle

You will need to fiddle around with the ticks settings and gridlines. Will leave that out of scope here as they make up more for a different question

Update: Code to readjust the ticks based on new extremes

//Adjusting ticks
var ticks = 5;
var intervalX = (maxX - minX) / (ticks - 1);
var intervalY = (maxY - minY) / (ticks - 1);
var xTicks = [],
    yTicks = [];
for (var i = 0; i < ticks; i++) {
    xTicks.push(minX + i * intervalX);
    yTicks.push(minY + i * intervalY);
}

chart.yAxis[0].options.tickPositions = xTicks;
chart.yAxis[1].options.tickPositions = yTicks;

chart.yAxis[0].redraw(false);
chart.yAxis[1].redraw(false);
chart.redraw();