Comments (19)
It would be a really great addition!
from nivo.
I like pie.
Animation would be cool! 🥇
from nivo.
It's a little bit more complicated for Pie component, as you have to animate the angle/radius instead of the shape, whereas you can just animate the shape for the line component, I'll probably add support for this, but it requires a little bit of work (and for optimal transitions, you should search closest previous angle).
from nivo.
This has been implemented and should be available in the upcoming release (no ETA yet), if you want to play with it you can already have a look at the codesandbox, just realized this issue is 3 years old, wow...
from nivo.
is there any progress on this?
from nivo.
We demand animated pie charts! OR!
OR!
I'm just kidding I do not demand anything but it would be amazing to have it able to animate when it shows up.
Thank you for this great library it is just superb
from nivo.
Any word on a possible release date for the new version with animation?
from nivo.
have same issue.
Hovering animations are working but the initial mount animation isn't.
Below is my setup.
<ResponsivePie
data={data}
margin={{ top: 8, right: 8, bottom: 8, left: 8 }}
padAngle={0}
innerRadius={0.6}
cornerRadius={0}
enableArcLabels={false}
enableArcLinkLabels={false}
activeOuterRadiusOffset={8}
isInteractive={true}
colors={["#5A7CF8", "#70BECD", "#F6DD66", "#E2814A", "#CE5E41"]}
tooltip={({ datum: { id, value, color } }) => <PieCustomTooltip value={value} color={color} />}
motionConfig={{
mass: 1,
tension: 170,
friction: 26,
clamp: false,
precision: 0.01,
velocity: 0,
}}
transitionMode="outerRadius"
onMouseEnter={(props) => {
console.log(props);
}}
/>
I got this warning on my console.
Failed prop type: Invalid prop `motionConfig` of type `object` supplied to `Zt`, expected `string`.
I also tried the line chart with the default motionConfig.
The line chart animation didn't work either and got the same warning.
from nivo.
Also, the ResponsivePie
example code (code tab, not the adjustable props) and the CommonPieProps TypeScript props both include the MotionProps
props that imply the Pie does animate; except it doesn't.
from nivo.
pretty plz
from nivo.
I also found this thread :(
from nivo.
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
from nivo.
This has been implemented and should be available in the upcoming release (no ETA yet), if you want to play with it you can already have a look at the codesandbox, just realized this issue is 3 years old, wow...
amazing news thanks!
from nivo.
Waiting for the release !!
from nivo.
Waiting in 2022 too. However, thanks for the great job you have done so far !!!
from nivo.
@plouc is this not available in the current release? The docs indicate that it's on by default and I see it animating in the docs, but when I setup a pie chart in my repo I don't have any animations.
from nivo.
@rtman, it's been released for some time now, and you can see it on https://nivo.rocks/pie/.
from nivo.
@plouc Yea that is where I was seeing it animate correctly, maybe it's something to do with my setup. I'll try and create a codesandbox to repro.
Below is how I'm using it right now.
<ResponsivePie
colors={{ datum: 'data.color' }}
data={mockPieChartData}
enableArcLabels={false}
enableArcLinkLabels={false}
valueFormat={(value) => `$${value}`}
/>
from nivo.
@plouc Here's the codesandbox, I was able to get on hover animations working but not the initial mount one. Can you take a look?
from nivo.
Related Issues (20)
- @nivo/line warnings when using Nivo >= 0.87.0 line chart HOT 3
- Nivo/line, stack line does not match the values in the graph. HOT 3
- Wrong `PointMouseHandler` type on event handlers like `onMouseMove` HOT 1
- Nivo Sankey Chart adjustable node thickness HOT 2
- React 19 Support HOT 4
- @nivo/bump chart is missing properties HOT 3
- Nivo calendar zero value color
- Add Repobeats (metrics) to README
- Pie Chart tooltip not showing HOT 1
- @nivo/sankey turn off node legend text and custom nodes HOT 6
- isInteractive hover functionality stops working when using `cellComponent` prop for a custom cell HOT 1
- Nivo unable to SSR with Next 13+ HOT 6
- Documentation Missing the Most Basic Info: How to Get Started
- Line Chart Sample Missing
- Colors Documentation Page Doesn't Explain Custom Colors
- Line Graph - Cannot read from undefined property (reading 'x') when useMesh is enabled.
- <Line> type definition does not include <Container> properties
- Add Support for Independent Axis Label Styling in @nivo/heatmap via theme.axis Configuration
- ChoroplethCanvas: Failed prop type / required properties (v0.87.0)
- @nivo/Sankey enableLinkGradient not supported in Safari Desktop, and all browsers on mobile HOT 1
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 nivo.