Comments (10)
Hi @mattspeller, the problem here is how array props should be updated when using React.
React performs a comparison of the props when deciding whether to re-render. if you push to an array, without cloning it, React considers them equal as they have the same memory reference. Therefore you must clone the array and then push changes to the clone, then you'll see the changes you expect (FYI this is also the reason Immutable.js exists).
So my advice would be to clone the data array, as I demonstrate here, or use Immutable.js List structures for you data prop instead
from react-jsx-highcharts.
makes perfect sense - thanks for finding time to respond.
from react-jsx-highcharts.
Sorry to comment on a closed issue, but I have a follow-up question for this.
To me it looks like because we need to clone the data array each time we add a new data point, the graph is completely redrawn and rerendered every time. Is that correct? That seems terribly inefficient and also appears to be the reason why I cannot get the animation to work like in the previously mentioned example here. (although, that might just be an error on my part)
from react-jsx-highcharts.
Hi @TwoLaid, the entire graph shouldn't be redrawn but the single series (related to the data array) will be re-plotted.
I did investigate comparing the nextProp data length, if it is one greater than the prevProp length, we could use the addDataPoint
Highcharts method, which would be slightly more efficient than setData
. But I figure that might be too naïve for more complex use cases.
from react-jsx-highcharts.
Why was this issue closed? This seems to be a real problem.
from react-jsx-highcharts.
Are you referring to the original issue, or the question @TwoLaid raised afterwards?
from react-jsx-highcharts.
I just find it very inefficient having to .slice() the array we send setData. Imagine it had 10000+ objects in it, which would update every 1 second or so. An application with multiple live data charts needs every single drop of cpu optimization possible, and at least for us MobX users it would be quite a performance improvement if we could stay mutable - without being forced to give that up, by having to copy the array for react to pickup the changes. I'd much rather if we could just call addPoint on the chart directly and pass just the newly added point. :)
from react-jsx-highcharts.
Hey @whawker, I've been having some performance issues with my charts and have just read through this thread. I'm getting data really quickly (Up to 50hz) and would like to plot it in some charts. Currently I'm wanting to display it at 10hz but the scripting takes too long and the chart freezes.
With one series plotted I can run 10hz for a few minutes before it freezes and with 5 series it only takes seconds before freezing. In chrome debugger I can see the time for setData() increases the longer the incoming data has been running and I believe this is where the bottleneck is.
I have tried changing setData to use addPoint() and shifting older data out, but this has had little effect.
Do you have any recommendations for displaying data at 10hz or quicker?
from react-jsx-highcharts.
Hi @JPNZ4, how many data points are displayed at once? Have you considered using the Highcharts boost module?
from react-jsx-highcharts.
I'm using boost module and displaying around 1500 data points at once. The rendering is pretty quick with the boost module and taking up minimal time in chrome debugger.
from react-jsx-highcharts.
Related Issues (20)
- TypeScript type for react-jsx-highmaps HOT 6
- Bug When Rendering Chart in Test HOT 2
- Add ColorAxis component causes error in highcharts.js HOT 2
- I would like to know the x-axis plot band widths dynamically with events redraw and load HOT 6
- Vertical zoom navigator
- Version v5 alpha feedback and issues HOT 13
- Cannot read properties of undefined (reading 'forExport') in Next HOT 3
- Setting draggableY to plotOptions not working correctly HOT 2
- React Native support
- Using canvas or SVG to draw on a Chart HOT 2
- Enabled not working with plotOptions using Highcharts HOT 2
- Change the range of the chart from the code HOT 1
- Extending HIghcharts with addHighchartsMore causes error HOT 1
- `ordinal` does not work for X axis. HOT 2
- How to use custom highchart colors cssNames?
- Ability to export a graph HOT 6
- Chart prop 'zoomType' not working with Highcharts 10.2.1 HOT 4
- Chart updates without animation if zones is provided on a series
- Show and hide series with costume buttons ?
- <LineSeries data={values} /> to have multiple dashStyle in single series 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 react-jsx-highcharts.