I have a line chart created in d3 (but drawn with Skia, since it’s for mobile app using react native, I use d3 for calculations, scales etc.), which has 2 lines on it. Both of the lines have different scales (range of the first one is quite large, something like [50000, 60000], the second one has a much smaller range, something like [-0.15, 0.6]).
I’m facing a problem with having a nice y axes for both of them. My current solution is that I have one “primary” scale for line1, which has nice numbers on it, eg. [50k, 52.5k, 55k, 57.5k, 60k] and the axis for my “secondary” scale is generated this way:
I want both yAxes to have numbers in the same spots (the same y point) to draw one set of ref lines on the chart for both of them, so for each number I show on primary axis, I take it’s y position and check what number is there on my secondary scale, then I use this number. The problem with this solution is, that for my secondary scale numbers aren’t nice on the axis, they could be eg. [-0.155, 0.015, 0.185, 0.355, 0.525].
I would like to make both of my axes have nice number and most importantly, to always have 0 for my secondary scale on y axis, but for this I need to somehow create both of them together, rather than separately, so that they are aligned.
Of course just using .nice() from d3 won’t work here. It generates 2 nice scales, but it doesn’t help, if I need them aligned on y axis.
I know, that d3 doesn’t have a functionality like this, already searched the internet for it. I have seen some solutions to align scales, if they both start from 0, but it’s not the case here.
I also know that it’s possible, since eg. HighCharts is able to achieve it, but since it’s not open source, I can’t check how they do it.
Do you know how can I achieve it?