CODEWITHSUNDEEP
javascriptangularjschartsnvd3.js
Aviro
Aviro

Reputation: 2155

Angular nvd3 MultiChart X Axis Calibration issue with dual Y Axis

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.
enter image description here

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.

Upvotes: 2

Views: 889

Answers (1)

Aviro
Aviro

Reputation: 2155

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.

Upvotes: 1

Related Questions