I am working on a solution where I may need to plot multiple series in a single chart to show an analysis on the given data.
Therefore, I have used Angular nvd3 multiChart to display multiple bar charts based on right-Y axis, while the other chart based on left-Y axis. I am using the same X axis with the Date value (in milliseconds) as all these charts representing a time-line behaviour.
However, I am finding little bit of difficulty in correctly calibrating the X axis for all the charts though they are based on same time values.
All the series aligned to right handed Y axis uses X axis accurately while the left handed series is not aligned to current x axis values. This is clearly shown in the following image attached.
Here's the [http://plnkr.co/edit/YigpxP?p=preview]2 attached.
By going through the StackOverflow related questions I understood that this is related to the scale used in different chart types.
Appreciate a reasonable solution to this problem with your valuable input.
This can be solved with the following trick. However, I don't think it'll be a more realistic solution when comes in to general usage.
If all series do have same X coordinates, this problem won't arise. If subsequent series don't have data points for every x coordinate, need to introduce bogus (dummy) points to resolve this.
However, this problem is due to different scaling types used in different graphs. Hence, a proper solution should accompany with a reasonable code change, I guess.