Add support for biaxial charts

[dragosdydy]

Hello,

I have looked around, i have checked the docs, I can't still figure out how to do a biaxial line chart. I have added the axisRight, but it is possible to use different key for that axis ?
I am looking for something that Left Axis is the line chart for 1 value and the Right Axis is a line for other type of value.

It is achievable with Nivo? I could show some examples if needed.
Thank you.

[plouc]

Hello,

For now, it's not, the only way to achieve this will be to stack 2 charts and hide x-axis for one of them, really hacky :/ There's an ongoing work on scales to be able to support multiple scales (and axes), but it requires a lot of work and unfortunately I don't have any time left for my side projects for now.

[dragosdydy]

Oh, bad news! I really like how Nivo looks.
That solution seems a bit hacky, but i'll see how it goes.

Thank you so much for your work!

[stephanoshadjipetrou]

@dragosdydy did you manage to accomplish the biaxial chart with this hacky solution? and if yes, how?

[dragosdydy]

@stephanoshadjipetrou not really, in the meantime I switched to another library with more options for advanced data viz (amCharts), but not so beautiful as nivo.

[stephanoshadjipetrou]

@plouc Hi again :)

In order to implement this bi-axial feature does it depend on some other libraries modifications/additions or this could be done "right away" in the @nivo/line package?

Thanks

[siemvaessen]

@plouc - just wondering if you have any plans or that we can plan together on the implementation of this feature? Once we have some kind of plan based on the idea, we could potentially draw up some ETA's and see how has time to do what. We would like to contribute back and this seems like a proper contribution depending on time etc. When you talk abt 'a lot of work' could you define that a bit more? As in 30 hours lots of works or 30 days?

[siemvaessen]

@plouc will this issue be re-opened?

[wyze]

I wonder if this could be achieve with the Layers api?

[plouc]

@wyze, this could be implemented using the layers API, but with a lot of manual work.
@siemvaessen, probably not 30 days :), IMO the hardest part is to define an API which allows this while keeping the most common implementation simple enough.

[siemvaessen]

Ok @plouc thanks for the update and thanks for re-opening this ticket. Can we make a little plan for this, like a 'plan project' https://github.com/plouc/nivo/projects ? That way we can start some backlog of desired functionality and the steps toward adding that support. We @zimmerman-zimmerman are happy to invest resources into this part, seeing we will most definitely make use it. Team member @stephanoshadjipetrou will also be happy to chip in here.

Awaiting your humble next steps.

[axpence]

I would really like to see this feature implemented. A lot. Wish I could build it.

[siemvaessen]

Hi @plouc could you start a Project, so we can plan around that work? Or you have other ideas to manage this work?

[cazroam]

This would be super awesome. I currently have two charts on top of one another but this breaks the crosshair and legends. and trying to fix these is making my head hurt lol

+1 to letting @zimmerman-zimmerman have a go at a fix 💃

[erin-koen]

Hi @siemvaessen - just wondering if you made any progress on the biaxial chart? I looked through PRs and didn't see anything so thought I'd ask. Thanks!

[premuditha]

Hi @plouc,

Do we have any update on biaxial support?. I need to have a line chart with 2 x-axis (top and bottom). The top x-axis would represent Jan to December 2019 and the bottom x-axis would represent Jan to December 2020.

Is this something doable with Nivo at least a little bit of customization? It would be really great if you could provide some pointers to achieve this

[tsaiDavid]

@premuditha - same here, would be great to see if it's possible.

[nathanredblur]

I was using it, but because of this I required to change to some other framework, I hope this get done some day or have the time and knowledge to do it by my self and push it.

[philj0st]

i'm also in need of this feature .. where would i find information/documentation about the layer api?

[jmirick]

I'll add my voice to the chorus. Would love to see this added. If not that, if anyone has successfully done the hack above, seeing how that was implemented would help a ton.

[jmirick]

This is how I hacked this. https://codesandbox.io/s/nivo-biaxis-chart-qv65c

Just stacked two charts on each other. Seems to be working ok

[jmirick]

@plouc earlier you mention that figuring out an API that supports this might be the hardest part. These guys https://apexcharts.com/javascript-chart-demos/mixed-charts/multiple-yaxis/ have a solution... not sure but might be able to use some of the ideas from there.

For the record.. but not advocating for anyone to switch to that lib... i had initially looked at it for a project but ultimately went with Nivo. Nivo has a more active community and more full featured library.

[stephanoshadjipetrou]

This is how I hacked this. https://codesandbox.io/s/nivo-biaxis-chart-qv65c

Just stacked two charts on each other. Seems to be working ok

Nice! Did you manage to get the tooltip to work for both lines?

[DavidTawil]

This is how I hacked this. https://codesandbox.io/s/nivo-biaxis-chart-qv65c

Just stacked two charts on each other. Seems to be working ok

Works great, thanks!
Anyone managed to implement the tooltip?

[juanalb]

Building on @jmirick his solution, added a tooltip. With thanks to @stephanoshadjipetrou for coming up with the idea on how to chef this. https://codesandbox.io/s/pensive-jackson-q4rpj

[DavidTawil]

Building on @jmirick his solution, added a tooltip. With thanks to @stephanoshadjipetrou for coming up with the idea on how to chef this. https://codesandbox.io/s/pensive-jackson-q4rpj

Nice!
Do you think there's a way to implement the tooltip to work with a biaxial chart that is composed from Bar and Line charts?

[stephanoshadjipetrou]

Building on @jmirick his solution, added a tooltip. With thanks to @stephanoshadjipetrou for coming up with the idea on how to chef this. https://codesandbox.io/s/pensive-jackson-q4rpj

Nice!
Do you think there's a way to implement the tooltip to work with a biaxial chart that is composed from Bar and Line charts?

@DavidTawil you can have a bar chart as the first rendered chart (non-interactive), and pass its data to the second chart to find the y value at the hovered x point. The trick part would be to align the bars with the line dots... you can check a brief check did in codesandbox - https://uv0no.csb.app/

[crow7m]

Hi, thanks for an effort, any news here ? Is there a plan to implement this future soon ? thanks

[ginchauspe]

In my case I needed a bar chart + line chart, the easiest solution was to create the line chart as an extra layer for the bar chart (I followed an example I found here) and manually draw the lines, tooltips and right y-axis legend (the ticks for the legend was the hardest part).
In case the data from the lines and bar are too different (ie: bar range was 0-50000 and line was 0-100) you can easily re-scale using d3.scaleLinear.

[ijayoa]

In my case I needed a bar chart + line chart, the easiest solution was to create the line chart as an extra layer for the bar chart (I followed an example I found here) and manually draw the lines, tooltips and right y-axis legend (the ticks for the legend was the hardest part). In case the data from the lines and bar are too different (ie: bar range was 0-50000 and line was 0-100) you can easily re-scale using d3.scaleLinear.

@ginchauspe could you please share a link to the example you mentioned or a sinppet of how you implemented this and especially rescaled using d3.scaleLinear ?

I have a similar problem. Thanks. 🙏

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[jeffreymb]

bump

[mswezey23]

I would love to see a proper biaxial chart as well as I have a need for it too

[ginchauspe]

I managed to create this chart using ResponsiveBar as base and adding a custom LineLayer

[franckmartin]

We are interested by this feature.

[meessour]

Still interested. What about grouped biaxial bar charts?

[emedranoh19a]

Hey guys I found this one here! The only problem is the crosshair.
https://codesandbox.io/s/github/juanalb/nivo-biaxial-chart-with-toolitp/tree/master/?file=/src/App.js

[ginchauspe]

Hello, sorry for not responding before 🤦 here is the code of the component I created for this case, basically is just a layer that we add to the bar chart: https://github.com/devgateway/seeds-dashboard/blob/develop/ui/src/embeddable/chart/BarAndLineChart/index.jsx
In this layer we use D3 directly to draw the line and we can add tooltips too.
Look for "LineLayer"

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[madze]

Just want to add a bump for this if it's not too late. Thanks!

[anotheri]

bump

[antoniobrandao]

Bump

[kongsynft]

would love to see this implemented.
for now i'll try to stack multiple charts and see how it goes

[LeopoldArkham]

Also manifesting interest for this

[JennieCrowel]

bump