Home Forums Chart Support Aligning both Y and Y2 axis across two charts Reply To: Aligning both Y and Y2 axis across two charts

#37617

@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