score:9

*Accepted answer*

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();
```

Source: stackoverflow.com

#### Related Query

- Dual y-axis matching on Highcharts
- Dual axis using percentage and absolute value to same serie in Highcharts
- Highcharts how to draw dual axis negative stack bar?
- how to zoom dual x axis at same time in highcharts
- Highcharts with dual axis and stacking - R
- Generating highcharts issues in dual axis column chart
- Google Charts, HighCharts or ChartJS Dual Axis Gantt Chart and Line Chart Visualization
- Highcharts dual axis set yRange
- Highcharts dual x axis column + line is adding ticks to secondary x axis
- Highcharts highstocks - Dual chart axis issue
- Highcharts dual X axis chart not scaling axis
- HighCharts - dynamic graph & no tick mark on the right hand side dual axis
- HighCharts - dynamic graph & no tick mark on the right hand side dual axis
- Hide axis and gridlines Highcharts
- Change HighCharts axis title
- how to set the interval of points on Y - Axis highcharts
- How replicate the value of Y Axis on both sides of the axis in Highcharts
- Highcharts Area graph, use 2 fill colors above / below X axis
- Highcharts y axis thousands separator
- Javascript Highcharts v3.0.5 - How to hide Y Axis Title when using multiple Y Axis
- Highcharts - set maximum range for yAxis but keep axis dynamic within that range
- Highcharts how to change x axis options
- Highcharts - How to start x axis from an arbitrary value
- Highcharts - best way to handle and display zero (or negative) values in a line chart series with logarithmic Y axis
- Highcharts - Long multi-line y axis labels causing following label to be removed
- Highcharts - with datetime axis labels overlap
- Change Y Axis vertical line color in Highcharts
- How to add space between chart and axis in highcharts
- Highcharts reset y Axis
- highcharts - removing decimal places on Y axis with only one point

#### More Query from same tag

- highcharts- stacked bar, how can I make the chart cover the width 100%?
- Change Highchart's pie chart .xls file category column name
- Mulitple data points at single point of time highcharts
- How to create a Jquery array object
- How to make a black-and-red line in highcharts
- Creating a drilldown chart with Highcharts that contain double(multiple) columns for each column (see example for better explanation)
- How to show tickPositions as start and end for each bar in highcharts?
- highcharts, Set minimum height for stacked column chart?
- How to add comma formated labels for Y-axis in Highcharts?
- displaying entire value on the y-axis in highcharts when the range between the intervals are high
- Highcharts Sunburst chart - What is the range of colorVariation.to values?
- Highcharts organization change size image and position
- Highcharts: passing additional information to a tooltip
- Execute function after zoom highcharts
- Highcharts stacked bar negative / positive total
- Color selection based on a function for Highchart graphs?
- Flexdashboards and Leaflet and marker click with Highcharts
- Creating graph with x-axis only using D3
- How to remove bullet from tooltip when using highchart?
- Highcharts - Disable the legend of secondary y axis by default
- Emulate hover on iPad chart
- How to disable the animation of the datalabels on a pie chart with HIghcharts?
- Highcharts - Can it do this type of graph?
- Struggling to get this JSON data into highcharts
- How to display tooltip data below x-axis category labels using Highcharts
- Highcharts : Single point in x-axis of datetime type shows 00:00:00:0000
- Labels are not rendering for plotLines highcharts
- how to add xAxis.tick dynamically
- highcharts js move series data container up
- highcharts 3 addPoint Point order