Comments (18)
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.
from recharts.
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?
from recharts.
What about customization of the labels? For example, what if I want to display values as a percentage instead of just as a number?
from recharts.
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.
from recharts.
This is awesome, thanks!
from recharts.
here is a working fiddle http://jsfiddle.net/pwa5zka0/1/ since the one above doesn't work
from recharts.
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?
from recharts.
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.
from recharts.
? is issue closed?
from recharts.
@joshafest Not closed yet!
from recharts.
So ,, can i help?
from recharts.
Thanks! PR and advice are welcome! @joshafest
from recharts.
@steve-taylor You can set a customized label
of Pie
, which can be a function, a react element.
Here is the document.
from recharts.
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.
from recharts.
@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.
from recharts.
For me the Cell color don't change at all this is my issue #1043 can anyone help?
from recharts.
Is there a way I can fill multiple colors in a single cell of a pie chart in recharts?
from recharts.
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.
from recharts.
Related Issues (20)
- Better API documentation HOT 3
- Issues with typing Legend props HOT 7
- Stacking Xaxis dataKey text HOT 3
- AreaChart and LineChart do not show the values correctly HOT 1
- Question on exporting `useChartWidth` and similar api HOT 2
- BarChart : Without BarSize bug, with BarSize another Bug HOT 2
- Adjust the colour of the dot at the cursor of the tooltip (AreaChart) HOT 3
- Lines directly on the lower or upper bound of a Y-axis with custom domain and allowDataOverflow gets partially clipped out of view HOT 4
- Active bar and tooltip persist despite mouse cursor leaving chart area HOT 4
- Is there any way to position=insideMiddle? HOT 5
- Brush component is missing property `data` HOT 3
- Stacked chart round some bars HOT 2
- Points property not generating for Area Chart in v2.12.6 HOT 5
- recharts responsive pie chart with legend HOT 2
- BarChart dataKeys that include brackets don't work HOT 5
- Warning about defaultProps Support in XAxis HOT 3
- Area Chart + Brush: Descending data is reversed on brush HOT 9
- responsive container infers the parent div height [low priority] HOT 1
- Storybook Documentation for more visibility HOT 2
- How to make hover tooltip for each individual cell instead of XAxis column HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from recharts.