Cannot set nivo pie chart color scheme

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.