CODEWITHSUNDEEP
reactjscharts
LinusG.
LinusG.

Reputation: 28922

Cannot set nivo pie chart color scheme

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:
Open in CodeSandbox

What do I need to do?

Upvotes: 0

Views: 2628

Answers (3)

mohamadreza karimi
mohamadreza karimi

Reputation: 1

There is no id field in the list you are using. You can use map or ask server programmer to add

data={data.map(item => ({ ...item, id: item?.product__title }))}

Upvotes: 0

Rohan Muhammad
Rohan Muhammad

Reputation: 1

The property name is not colors, it's color:

color={{ scheme: "nvio" }}

Upvotes: 0

nitheism
nitheism

Reputation: 547

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.

Upvotes: 2

Related Questions