Hello,
I have two separate charts which has content related to each other. The top charts has data, the chart below has price calculations. Each are placed on the same time scale of the X axis. The charts also synchronize when zooming in.
CanvasJS has an option to set the width of the charts. My two charts are both set to 100% width. There is a problem when the top chart has two or more datasets on the Y axis, while the chart below has only one dataset on the Y axis. The ‘center stage’ of the two charts don’t align anymore.
CanvasJS adds about 20 pixels for each visible dataset. Because of this the time scale of the two charts don’t really align vertically. This is causing issues because particularly when zooming in into a specific time range, a 20px offset causes an entirely different price calculation for a different time.
What I’d like to have is both charts to be set at the same fixed widths. Ideally I would set the ‘main stage’ of the chart to be ‘80%’ center aligned of the canvas. This would leave 10% space on the left for datasets on the left and 10% space on the right for datasets aligned on the right side of the Y axis.
To demonstrate, I have this JS Fiddle. This has two identical charts, the top chart has one invisible dataset. This causes the main stage of the chart to be larger then the one below.
.
