Stacking two datasets on y-axis

[LoganMcnulty]

Hi Everyone,

React-charts is so light-weight and user-friendly, thanks for making it.

Seeking help with a scaling inquiry. Trying to stack two datasets on top of each other. The first dataset scales from 0.00-100.00 (a score), and the next from theoretically 0.00-infinity (stock price). The two datasets often vary greatly in scale, affecting legibility of the graph with my current settings.

Have played around with the type parameters etc., but no luck finding my solution.

Image example - the score is in red, and price is in blue.

Links to live examples
Example 1
Example 1
Example 1

Thoughts? And thank you so much in advance.

Logan

[LoganMcnulty]

May have found my answer at this link

https://react-charts.js.org/examples/multiple-axes

[LoganMcnulty]

Having trouble with passing data in the correct format. Erroring at .map of data = React.useMemo = () => ...

[tannerlinsley]

One option here is to normalize the chart values into percentage of change over time, so they can be compared accurately. The next option is to use a dual-secondary axis.

[LoganMcnulty]

Thanks for inquiring. Have made progress since post, here's an update if you're interested.

Top graph = multi-axis (price and score are two separate axis on purpose bc score is an oscillator).
Bottom graph = multi-type (the area over the bars looks great!)

Now going to move Trend Edge into volume graph, and add moving averages to price graph.

Thanks again, react-charts is awesome.

[mustafa-hanif]

https://react-charts.js.org/examples/multiple-axes

The link is no longer valid, pleae help