Comments (9)
Hi @gperdomor
The updates are done through chart.update and in Highcharts version 6.1.0 the updates were improved to add more animation:
Added feature to animate the series when updating data through
Series.setData
,Series.update
orChart.update
. The new logic looks for matching X values and can be disabled throughsetData's
updatePoints
option.
Any further improvements of update depends heavily on chart.update
function animation support, so it's a Highcharts issue as long as the wrapper is based on chart.update
function when updating.
from highcharts-react.
Hi,
Any update on this ?
The only dirty workaround I found is to set a random key on the Highcharts wrapper. It force React to create a new component instance rather than update the current one. And so the initial animation is present.
<HighchartsReact
highcharts={Highcharts}
options={options}
key={Math.random()}
/>
Currently, I'm not able to reproduce a dynamic solid gauge like in the official doc with the highcharts-react wrapper. https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-solid/
from highcharts-react.
Hi @romaindso
Destroy & rebuild instead of update is not optimal, but if you are interested in initial animation then it's the only way through official API.
The wrapper is limited by the Highcharts core in case of this feature - as long as this feature works the same in pure JS version of Highcharts it is not a wrapper bug.
from highcharts-react.
Hi @KacperMadej
I'm interested to get an animation when data change over time like @gperdomor explained. That's why I'm doing this that way because the only animation occur during the init of the component (even if it's not optimal you right)
On my previous link it seems that it works with the pure JS version of Highcharts. The solidgauge is well animated when data are updated.
from highcharts-react.
In the new version - 2.0.0 you can control the animation by updateArgs
option. The order of arguments is the same as in basic chart.update
method: https://api.highcharts.com/class-reference/Highcharts.Chart#update
updateArgs={[true, true, true]}
Live example: https://codesandbox.io/s/z6q506yo7m
from highcharts-react.
It seems that the problem with animated updates still exists in the current version. Even if I use the provided updateArgs
in all variations. :/
Are there any twerks or progressions to solve this problem?
from highcharts-react.
Hi @oleblaesing,
I did not encounter any problems with animation in the current version. Could you create some live example to show the issue?
Best regards!
from highcharts-react.
It seems to be related with datetime
xAxis. I provided a sandbox here, but in this example the growth itself isn't even working (notice that the state gets updated correctly): https://codesandbox.io/s/38xwxr81lp
I also created a SO question: https://stackoverflow.com/q/54863072/5520186
from highcharts-react.
If you call setState
with a copy of the data, the animation works correctly: https://codesandbox.io/s/6xv0kr3v0n
Let's continue the thread on stackoverflow in case of any additional questions.
Best regards!
from highcharts-react.
Related Issues (20)
- Usage in React, Grid lines not visible HOT 2
- Tooltip is going under axis-component HOT 8
- Chart values and options doesn't trigger re-render HOT 2
- Zones rendering issue after updating to [email protected] HOT 5
- Issue whille integrating packedbubble in react-highcharts HOT 15
- TypeError: Cannot read properties of undefined (reading 'length') HOT 1
- Plotbands added via API are not added to plotOptions HOT 2
- Next.js 14.1.0 Cannot read properties of undefined (reading 'document') HOT 2
- Add a react ref to each point HOT 4
- chart.update() refression with yAxis behavior HOT 23
- Unexpected series order when adding linkedTo series HOT 2
- Cannot read properties of undefined (reading 'forEach') HOT 3
- Server side rendering of React components HOT 1
- Issue with borderRadius object HOT 1
- i am unable to draw a Polar (Radar) chart HOT 2
- Is this the correct way to use the Boost module to improve performance? HOT 3
- Updating a column chart's series data with dataSorting: enabled causes a crash HOT 2
- Bar Chart Rendering is different if I use boost HOT 2
- Leaving the page with a highstock chart in it throws multiple console errors despite chart doing its job HOT 3
- Issue: Component Getting Unmounted from DOM When Using Scroll 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 highcharts-react.