Chart overlap and align

• June 20, 2022 at 2:33 pm #38123
  
  mustadirmahmood

  I am actually trying to implement one chart on top of another. The bottom chart will have all the data points and the top one will have position absolute and backgroundColor: Transparent so that the bottom chart is visible.

  The problem I am facing now is that, I can not get the two chart’s x-axis to align (so that their x-axes starts and ends together).

  Please let me know if you have any suggestions
  Please check the fiddle for details
  https://jsfiddle.net/6rw7u8ez/

  Thanks

  June 24, 2022 at 12:21 pm #38265
  
  Vishwas R

  @mustadirmahmood,

  You can align y-axis of both the charts so that the x-axis of both also gets aligned. This can be done by setting axis margin to top chart based on bounds of bottom chart.
  chartTop.axisY[0].set("margin", (chartBottom.axisY[0].bounds.x2 - chartBottom.axisY[0].bounds.x1 - chartTop.axisY[0].bounds.x2 + 5));

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

  Considering this as duplicate of Make transparent background, hence closing the same.

  —
  Vishwas R
  Team CanvasJS