Wrong scale in dual axis line chart?

[lke27]

I want to create a dual axis line chart, Y1 axis shows the actual figure(price) and Y2 axis shows the index (rebased number of price), as following:

However the lines are not overlapped in superset, which is misleading:

superset version: 0.36.0

[issue-label-bot]

Issue-Label Bot is automatically applying the label #bug to this issue, with a confidence of 0.79. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[mistercrunch]

We do some basic math in superset to align the ticks on both sides. Are you saying the visualization shown is wrong or that it doesn't match your expectations of how axis/range should be set?

[lke27]

We do some basic math in superset to align the ticks on both sides. Are you saying the visualization shown is wrong or that it doesn't match your expectations of how axis/range should be set?

I would say that it is wrong because the "index" is just a rebase number of "price", so the lines should be totally overlapped.
My expectation is the two axis scale should be aligned. For example, as showing in the 2nd graph above, when I point to the green data point at "21/11/2018", the price showing in tooltip is 11.3K, but it does not align to the price (left) axis, which is at ~11.2K. It is misleading.

And if in case there are two sets of data, one is not a rebase of another, you want to compare the trend/pattern of them, the chart cannot present it accuratley because the scales are not aligned. And there is no function for us to change the scale settings of both axis.

[junlincc]

Thanks for reporting, we will investigate this issue next week and let you know.

[lke27]

Thanks for reporting, we will investigate this issue next week and let you know.

Hi @junlincc, may I know any updates?

[mistercrunch]

It does not look wrong to me. At least the the datapoint that you show in your screenshot looks right. 11.3k could be rounded up from ~11251 (the number formatter does that)

[lke27]

It does not look wrong to me. At least the the datapoint that you show in your screenshot looks right. 11.3k could be rounded up from ~11251 (the number formatter does that)

So it is because the figures are rounded in superset? How can I change it to not being rounded? I can't find the where to modify it..

[junlincc]

@lke27 if you take a closer look at your first graph where both lines perfectly aligned, there are actually two sets of gridlines.

@betodealmeida had a PR couple years ago to align gridlines in multi-lines chart to create better visual. in order to do so, y axis got stretched or compressed. in your second graph, y(price) is higher than the y(index) on the left side , they overlap in the middle, and y(index) is higher than y(price) on the right side.

in theory, a rebased number y2 axis should overlap with y1 axis, but that will compromise either the perfectly aligned grid, or a set of nice/rounded index number. See below.

We certainly can provide a solution to give user the option to create the first chart in above screen shot where two lines are overlap with messy index, if that's helpful.

@mistercrunch

[betodealmeida]

To add to @junlincc's comment, chart 3 when the grids don't align would look much uglier. Here's an example from before we implemented 2:

It's basically a problem of choosing 2 out of 3:

1. Series align
2. Grids align
3. Labels look nice

Initially we had (1) and (3) (example 3), then we moved to (2) and (3) (example 2).

[junlincc]

@lke27 instead of further investing in this NVD3 chart, we decided to migrate to Echarts multi-y axis chart. you should expect the new chart coming in the near future.

https://echarts.apache.org/examples/en/

closing issue for now.

[lke27]

Understood. We have then decided not using dual axis line chart until the new chart come up.. thanks for all of your detailed explanation.