Cannot set nivo pie chart color scheme - reactjs

Question

I integrated the nivo library. I managed to get this pie chart to work:
For this, I used this slightly modified code from the example:
<ResponsivePie
data={data}
margin={config.margins}
padding={0.3}
colors="nivo"
borderColor="inherit:darker(1.6)"
animate
motionStiffness={90}
motionDamping={15}
legends={config.legends}
sortByValue
innerRadius={0}
padAngle={0}
cornerRadius={0}
borderWidth={0}
radialLabelsSkipAngle={10}
radialLabelsTextXOffset={6}
radialLabelsTextColor="#333333"
radialLabelsLinkOffset={0}
radialLabelsLinkDiagonalLength={16}
radialLabelsLinkHorizontalLength={24}
radialLabelsLinkStrokeWidth={1}
radialLabelsLinkColor="#CCCCCC"
slicesLabelsSkipAngle={10}
slicesLabelsTextColor="#333333"
/>
Now, I wanted the colors to be a grayscale, so I changed the colors prop to "greys", as shown in their docs:
colors={{ scheme: 'greys' }}
This results in:
I also tried:
colors="greys"
Using "greens" also results in the same.
If you want to try it out:
What do I need to do?

Answer 1

I see that this is an old question, but I recently encountered the same issue when integrating with nivo. However I did find a solution so I decided to share it anyway.
After playing around with it I found that the code provided in the interactive view is not valid in React, if you would like to use a theme you should use the following syntax:
colors={"nivo"} // or the name of the theme you picked
instead of:
colors={{ scheme: 'nivo' }}
PS: If you want to use some of the other themes you might need to supply them additionally since just a couple of them come with nivo by default.