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/

[eatyourpeas]

also bumping this thread. I am very seduced by the charts but lack of multiple axes support is a deal breaker for me.

[bunge12]

Also bumping. Nivo is amazing but multiple axes would be so good to see!

[kkkrist]

Here's another hack to achieve biaxial charts: You could compute a factor by which data on 2nd axis is scaled up/down to be within the range of data on the 1st axis. The format function of the 2nd axis then scales it back down/up to draw correct labels. It works well enough for us:

https://user-images.githubusercontent.com/3873068/104318824-398ecf00-54e0-11eb-90f7-03f8b98a7843.mp4

[mysticaltech]

Oh man, this is so needed, @plouc!

[dkim-thomas]

@kkkrist do you have a working sandbox you could share?

[mysticaltech]

@dkim-thomas Try the ones from above.

[kkkrist]

@kkkrist do you have a working sandbox you could share?

I don't and I'm too busy to throw one together right now, I'm sorry. But there's really not more to it than I wrote earlier. Here's a quick example. Let's say this is your data:

[
  { "id": "japan", "data": [{ "x": "plane", "y": 173 }, { "x": "helicopter", "y": 227 }] },
  { "id": "france", "data": [{ "x": "plane", "y": 14 }, { "x": "helicopter", "y": 13 }] }
]

Now you apply a factor of 10 to France's numbers to bring it closer to Japan's. The data you actually feed to the widget looks like this:

[
  { "id": "japan", "data": [{ "x": "plane", "y": 173 }, { "x": "helicopter", "y": 227 }] },
  { "id": "france", "data": [{ "x": "plane", "y": 140 }, { "x": "helicopter", "y": 130 }] }
]

These manipulated values must of course only be used to affect were the line is drawn, so they need to be scaled back elsewhere:

<Line
  axisRight={{ format: num => num / 10 }}
  sliceTooltip={({ slice: { points } }) => (
    <SliceTooltip
      points={points.map(point => dataIsScaled
        ? {
            ...point,
            data: {
              ...point.data,
              y: point.data.y / 10,
              yFormatted: point.data.yFormatted / 10
            }
          }
        : point
      )}
      {...otherProps}
    />
  )}
  {...otherProps}
/>

Et voilà! I hope this helps!

[acomito]

Has anyone found a good alternative package for biaxial charts?

I like nivo but don't feel like hacking

I see this https://recharts.org/en-US/examples/BiaxialLineChart

https://www.geeksforgeeks.org/create-a-biaxial-line-chart-using-recharts-in-reactjs/

[eatyourpeas]

I went with Victory in the end and have never regretted it

On Sun, 5 Sep 2021, 14:38 acomito, @.***> wrote:

Has anyone found a good alternative package for biaxial charts?

I like nivo but don't feel like hacking

I see this https://recharts.org/en-US/examples/BiaxialLineChart

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/plouc/nivo/issues/172#issuecomment-913156588, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAICOV3HGXJGL4WT2OD4ZALUANXF5ANCNFSM4E23ATTQ .

[acomito]

@eatyourpeas any links to multiple y-axis examples?

[eatyourpeas]

Victory allows as many axes as you like. The dependent prop makes it a y axis. Their documentation is very good and there is a gitter as well

[mysticaltech]

@acomito Thanks for sharing recharts, seems awesome!

[kkkrist]

It's always a trade-off. I came here from Recharts as a matter of fact ;-)

[mysticaltech]

Yes, that is true, always a trade-off! Thanks for sharing @kkkrist, that's why someone needs to push that feature to Nivo! 🤞 The hack above works but is a little cumbersome!

[DeoluA]

I ran into this. My own use case had data with widely different data ranges, so both axes had very different lengths/spans. I took the solution proffered by @juanalb a little further (plus updated the tooltip function as well). Please see here: https://codesandbox.io/s/eloquent-hawking-2u24o

I'd say it's still "hacky" but hopefully this helps someone else (or at least aids in bringing a better solution closer)

[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[bot]]

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?