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)
- how add padding between XAxis and bars in PositiveAndNegativeBarChart? HOT 9
- Fix the Brush component when using custom domain settings (for example 0-24 h time x-axis) HOT 2
- Don't focus the chart container when clicked through mouse HOT 8
- Add Repobeats (metrics) to README
- Can't render Bar In Bar component in my project HOT 3
- Tooltip defaultIndex Renders Tooltip Outside of Chart HOT 4
- [Typescript] Bar prop `label` is missing type for `dataKey`
- LabelList is disappearing on Chrome for IOS HOT 5
- The accessibilityLayer prop not working for this customized bar chart HOT 1
- PROPS LIKE HEIGHT, X ARE passing as null in shape prop for Bar HOT 2
- Rechart throws invariant on unmatched axisId in production HOT 1
- brush positioning with a single data item HOT 1
- TypeError: Constructor Map requires 'new' HOT 2
- Recharts 2.13.0-alpha.4 - Encountered two children with the same key HOT 9
- Error when migrating npm project to pnpm HOT 2
- React does not recognize the `dataKey` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `datakey` instead. HOT 4
- -90 degree Y-Axis Label is overlapped by long tick labels on y-axis HOT 2
- RadialBar: Cannot set the bar color filled to a percentage based on the value passed & Opacity to other Area HOT 1
- recharts-tooltip-cursor renders beside legend for synced multi-series data where there is no data point HOT 1
- No type bindings for touch events. HOT 2
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.