react-charts
react-charts copied to clipboard
[beta]: multiple secondary axes can't scale independently
Created a repro that has two buttons, "zoom in" and "zoom out", that multiply the values of the second series by a value to make them larger than the first series.
As the second series is connected to the right axes, I wouldn't expect that the left axes change scale as well.
Repro:
https://codesandbox.io/s/react-query-multi-axes-l4zlf?file=/src/MultipleAxes.tsx
Video:
https://user-images.githubusercontent.com/1196524/129100804-6234ce57-d6d4-49ab-9c40-d3d11e911060.mp4
Same issue persists in beta. Should be default behavior otherwise no point having two vertical scales. Not obvious how to make the left scale independent of the right scale from user-code as problem seems deep in node_modules/react-charts, perhaps in es/components/voronoi.js In case it helps someone else try to fix it, I found that it's this line in MultipleAxes.tsx which refers to object property "secondaryAxisId" which triggers a second vertical scale, but it appears to be an internal variable. In the author's codesandbox.io example, 3 of the 6 series are referenced by the secondaryAxisId of "2", but as OP points out, it scales identically to the "undefined" axis id: data.forEach((d, i) => (d.secondaryAxisId = i > 2 ? "2" : undefined))