plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://nivo.rocks
MIT License
13.19k stars 1.03k forks source link

Percentages Calculations for Pie Charts #1805

Closed wiznotwiz closed 3 years ago

wiznotwiz commented 3 years ago

Is your feature request related to a problem? Please describe. Are there any plans to add percentages to pie charts? I can adjust my data to calculate percentages manually based on the total amount, but when setting toggleSerie to true in legends, the percents don't update because the data remains the same.

Describe the solution you'd like When the user toggles the legend item on a pie chart, a percent value should update.

Describe alternatives you've considered I've thought about mutating the data based on user click of legend items, but that could cause other issues, since Nivo docs say that data must be "Chart data, which should be immutable".

If anyone has any ideas for workarounds or examples of how they've done it, I'd love to know!

Thank you for an awesome charting library!

wiznotwiz commented 3 years ago

I was able to solve this with the following steps:

  1. Add visible key with true values to original dataset
  2. Add onClick prop to legends
  3. In the onClick, send the datum to a function that sets the visible key to true or false upon user toggle
  4. In the function in Step # 3, recalculate the percentages for only items that have visible to true