feat: multiple y axes

[scaltunsoy]

Description

Related issue(s)

#855
#827

What kind of change does this PR introduce? (check at least one)

• Bug fix (non-breaking change which fixes an issue)
• New Feature (non-breaking change which adds functionality)
• New Feature (BREAKING CHANGE which adds functionality)
• Refactor
• Build-related changes
• Other, please describe:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

How has This been tested?

Storybook. 4 new stories has been added in total.

Screenshots (if appropriate):

Multiple y axes:

Y axis on the right side:

The PR fulfills these requirements:

• It's submitted to the main branch
• When resolving a specific issue, it's referenced in the related issue section above
• My change requires a change to the documentation. (Managed by Tremor Team)
• I have added tests to cover my changes
• Check the "Allow edits from maintainers" option while creating your PR.
• Add refs #XXX or fixes #XXX to the related issue section if your PR refers to or fixes an issue.
• By contributing to Tremor, you confirm that you have read and agreed to Tremor's CONTRIBUTING.md guideline. You also agree that your contributions will be licensed under the Apache License 2.0 license.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tremor-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 19, 2024 0:03am

[leonlarsson]

This would absolutely come in handy

[jbergstroem]

My project requires two y axes as well -- anything blocking this to land?

[leonlarsson]

One feature I would love is to have multiple Y axes that are independent. Having checked the Storybook preview, it seems like one Y axis having a much higher number affects the other Y axis:

Ideally for me, I would have something like this from MUI Charts:
Here, one axis has a very high number, but it doesn't affect the display of the other axis.

[jbergstroem]

One feature I would love is to have multiple Y axes that are independent.

I think this is how it should work out of the box.

[scaltunsoy]

@leonlarsson

I changed “Mar 21” data point of “Sales (blue line)” from 2000 to 15000 in Storybook.
The green line was not affected. It keeps its ratio.

[leonlarsson]

@scaltunsoy

If you instead edit the other line ("Successful Payments"), it affects both series

[scaltunsoy]

@leonlarsson

The blue line is not affected when I changed the green line. Do you have a specific setting other than curveType="natural"?

[leonlarsson]

@scaltunsoy Oh, sorry. I just noticed you're on AreaChart and I am looking at the LineChart. LineChart seems to have the behaviour I'm describing

[scaltunsoy]

Thank you @leonlarsson.

I think I fixed the issue. It seems like I forgot to pass yAxisId to the Line component.

[leonlarsson]

Great! Hoping to see this shipped :)

[gjohnsx]

hoping to see this implemented soon

[kalingwu]

we would love to have this feature made available!

[severinlandolt]

Hi @scaltunsoy accidentally deleted the beta branch, would you mind creating a new PR?

[scaltunsoy]

Hi @scaltunsoy accidentally deleted the beta branch, would you mind creating a new PR?

Hi @severinlandolt. Here is the new PR: #1028.