Aligning both Y and Y2 axis across two charts

[jrobinson]

I have two charts having the same X axis, but each chart has 2 Y axes and the Y axes are all different (see image) with varying widths of scale and labels on each side. I have been trying to figure out how to align the Y axes on both sides. In other words, the X axis should be the same length with aligned gridlines. I have searched the site for information related to this issue, and the following code I found works for aligning the first pair of Y axes (left side), but how do I modify this to go about aligning the seconds pair Y-axis (right side) when margin works from the top and left?

chart2.axisY[0].set("margin", chart1.axisY[0].bounds.x2 - (chart2.axisY[0].bounds.x2 - chart2.axisY[0].bounds.x1));

In Excel I had function to sync the plot areas once the charts were created.

[Adithya Menon]

@jrobinson,

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

[jrobinson]

Thanks for the function! I was attempting to come up with a personal solution using bounds and plotArea but your function at least works better than what I was coming up with. However it’s still not quite pixel perfect. The JSFiddle you linked has the bottom third chart just slightly out of alignment with the top two charts given its Y scale into the 1000s. With your function I’m still getting similar results when loading different sets of data having varying axes scale. I’ve seen some test cases with the Y1 axes slightly misaligned and/or the Y2 axes. Granted the margin of error is usually very small, but still noticeable and it throws off the alignment of the gridlines. Does this have to do with calculating the width of the Y axis title and labels included with the margin?

I was attempting to restructure my Excel function in Javascript using what properties CanvasJS exposes. Excel VBA had Width and InsideWidth properties for PlotArea which included and excluded the width of the axes labels respectfully.

• This reply was modified 1 year, 11 months ago by jrobinson.
• This reply was modified 1 year, 11 months ago by jrobinson.

[Adithya Menon]

@jrobinson,

This small error might be due to the margin property not being set for all the charts. Setting the margin property for all the charts seems to be working in this case. The bounds of the chart can be accessed via get method or dot notation.

Kindly take a look at this updated JSFiddle for an example on the same.

—
Adithya Menon
Team CanvasJS