pie "slices" are all of the same color

[recharts]

pie "slices" are all of the same color

[xile611]

Fixed in v0.8.4.
We add a component Cell which can be child of Pie, Bar, RadialBar, so that the attributes of each sector in a pie can be specified in cells.

For example:

<PieChart width={730} height={250}>
    <Pie data={data} cx="50%" cy="50%" outerRadius={50}>
      {
        data.map((entry, index) => (
          <Cell key={`cell-${index}`} fill={colors[index]}/>
        ))
      }
    </Pie>
  </PieChart>

<BarChart width={730} height={250} data={data}>
    <Bar dataKey="value">
      {
        data.map((entry, index) => (
          <Cell key={`cell-${index}`} stroke={colors[index]}  strokeWidth={index === 2 ? 4 : 1}/>
        ))
      }
    </Bar>
  </BarChart>

And we still can specify the attributes of each child node through data, but Cell is of higher priority.

[jochenberger]

I want to use different colors for each pie slice and change the stroke color if a slice is hovered over. That means I have to create custom Cell components to be able to set fill and stroke. I have to bind onMouseEnter and onMouseEnter for the hover effect, so it reads like this

<Pie data={chartData}>
{
  chartData.map((entry, index) => {
    const stroke = this.state.selectedIndex == index ? 'red': undefined;
    return <Cell key={`cell-${index}`}
                 fill={colors[index]}
                 stroke={stroke}
                 onClick={this.pieClicked.bind(this, index)}
                 onMouseEnter={this.enterArea.bind(this, index)}
                 onMouseLeave={this.leaveArea.bind(this, index)} />
  })
}
</Pie>

Now, if I enter a cell with the mouse, the whole chart is re-rendered, because the state changes and the render function is called again and the handler props change (because bind creates new functions).
I cannot bind the handlers to the Pie because they won't be called if the Pie has children.
Any suggestions?

[steve-taylor]

What about customization of the labels? For example, what if I want to display values as a percentage instead of just as a number?

[luisrudge]

Yeah, to be honest, I think the api should change a bit. I was thinking in something like this:

<PieChart>
    <Pie>
        <Slice name="Mobile" value={70} fill="#9cacf1" />
        <Slice name="Desktop" value={15} fill="#8884d8" />
        <Slice name="Tablet" value={15} fill="#82ca9d" />
    </Pie>
</PieChart>

IMO, this makes more sense for pie charts and it's good to be declarative.

If you don't think this API is good, at least we should be able to not pass any color in the data fields and still get different colors for each slice.

[luisrudge]

This is awesome, thanks!

[giokokos]

here is a working fiddle http://jsfiddle.net/pwa5zka0/1/ since the one above doesn't work

[xile611]

Now the color of slices can be set in the data like the example:
http://jsfiddle.net/j8w3176p/
But I don't think it's a good idea.
Do you have any advice?

[xile611]

Yeah, add presentation attributes in the data fields is not a good idea.
And put all the different colors in an array is not a good idea too, in such case we may need to add props like strokes,fills and so on.

I think your suggestion is very good, we will consider carefully.

[joshafest]

? is issue closed?

[xile611]

@joshafest Not closed yet!

[joshafest]

So ,, can i help?

[xile611]

Thanks! PR and advice are welcome! @joshafest

[xile611]

@steve-taylor You can set a customized label of Pie, which can be a function, a react element.

Here is the document.

[jochenberger]

Never mind, I figured out that the actual problem was that I was computing the chartData array in my render function. I moved that to the constructor and now it works as expected.

[zarela]

@jochenberger Thank you very much! That fixed my issue.
In another note, do you happen to know why adding ResponsiveContainer to any Recharts graphs results on animations no working? I found that setting height and width on the ResponsiveContainer node fixes it, but then nothing is responsive anymore.

[iphonic]

For me the Cell color don't change at all this is my issue #1043 can anyone help?

[parikshit223933]

Is there a way I can fill multiple colors in a single cell of a pie chart in recharts?

[Meme-foundation]

xile611 suggestions sadly didnt work for me but if anybody else needs a simple 2 colored (pie)chart this helped me:
css:

.recharts-pie-sector:nth-child(even) {
    fill:green;
}

&
<PieChart fill=""....> leave the "fill" attr. blank.

this will create a black and green piechart.