How to know what colors are used in a particular chart?

[scio-cypher]

This could be a dumb question, apologies in advance!

Ex. There's a pie chart with 4 slices and I'm not giving any colors to it so nivo assigns a color to each slice.

• Now I want to make custom legend for that pie and for that I need to know the colors for each slice so how can I get it?
• I tried using forwardLegendData prop but it has its issues leading to infinite re renders.
• To fix that I tried wrapping valueFormat prop function in useCallback but issue still persists.
• Also if I want to know colors in bar graph as well there's no forwardLegendData prop so how can I get colors then?

Thank you for all your help!

[plouc]

By default it uses the nivo scheme, and it's a categorical color scheme, meaning it'll assign colors to each slice in order of appearance, maybe it's clearer with this screenshot:

You can access the scheme colors like this:

import { categoricalColorSchemes } from '@nivo/colors'
categoricalColorSchemes.nivo

Regarding the bar chart, it's almost the same logic, but then it also depends on grouping.

[scio-cypher]

Thank you for the clarification @plouc . Will try this in both and let you know if it works.