Home › Forums › Chart Support › Aligning both Y and Y2 axis across two charts › Reply To: Aligning both Y and Y2 axis across two charts
It is possible to align both the primary and the secondary Y-axis. Aligning the y-axis for multiple charts can be achieved by setting the margin property. The margin value has to be calculated based on the bounds of the primary and secondary y-axis as shown in the code below –
function alignYAxes(charts) {
var axisYBound = 0, axisY2Bound = 0, axisYChartIndex = 0, axisY2ChartIndex = 0;
for(var i = 0; i < charts.length; i++) {
if(charts[i].axisY[0].bounds.x2 > axisYBound) {
axisYBound = charts[i].axisY[0].bounds.x2;
axisYChartIndex = i;
}
if(charts[i].axisY2[0].bounds.x1 > axisY2Bound) {
axisY2Bound = charts[i].axisY[0].bounds.x2;
axisY2ChartIndex = i;
}
}
for(var i = 0; i < charts.length; i++) {
if(axisYChartIndex !== i)
charts[i].axisY[0].set("margin", charts[axisYChartIndex].axisY[0].bounds.x2 - (charts[i].axisY[0].bounds.x2 - charts[i].axisY[0].bounds.x1));
if(axisY2ChartIndex !== i)
charts[i].axisY2[0].set("margin", charts[axisY2ChartIndex].width - (charts[axisY2ChartIndex].axisY2[0].bounds.x1 - (charts[i].axisY2[0].bounds.x1 - charts[i].axisY2[0].bounds.x2)));
}
}
Also, kindly take a look at this JSFiddle with the code to align both the primary and secondary y-axis for multiple charts.
—
Adithya Menon
Team CanvasJS