Comments (5)
For now if you create a new object for chart.options then changes will be auto-detected.
Changes in a nested object, like chart's options, are not auto-detected and comparing old options with new ones might take some time. This is not a big problem unless the compare runs often, and unfortunately it does.
We could prepare a code that will make a deep compare and even use a more dedicated updates for e.g. axis or series changes. Now only chart.update is used. Next we'll need to check performance. This could be a nice enhancement for future version of the wrapper.
Let's see who else would require this feature by adding more comments in the issue thread since there's no userVoice for the wrapper.
from highcharts-react.
You could allow update
to be a predicate function and just defer to its return value.
e.g.,
shouldComponentUpdate: function (nextProps, nextState) {
var update = this.props.update
// allow client update resolution
if (typeof update === 'function') {
return update(nextProps, nextState);
}
// Update if not specified or set to true
return (typeof update === 'undefined') || update
},
That would provide maximum flexibility without much extra logic to maintain.
from highcharts-react.
React does not deeply compare props by default.
We are already using custom change detection (for the update
flag), so we could detect what kind of change was done to decide what function should be used there.
from highcharts-react.
Changes in a nested object, like chart's options, are not auto-detected and comparing old options with new ones might take some time.
Are there event hooks that you can listen to to detect any changes to the chart options? In that case, that would be a simpler architecture instead of deep-comparing the whole options tree.
Also, if you can make the options set sent to chart.update
as small as possible, Highcharts will take care of optimizing. For example, if only chart.backgroundColor
is changed, the options should be limited to this:
{
chart: {
backgroundColor: 'yellow'
}
}
This also applies to series and axes. If you can limit the structure to the options that actually changed, you can use chart.update
and it will perform as good as for example series.update
or even series.setData
.
from highcharts-react.
Actually the wrapper uses React.PureComponent’s shouldComponentUpdate to compare the options. The best way to update is to keep all chart options in the state and call setState
with the new ones:
constructor(props) {
this.state = {
chartOptions: {...},
hoverData: null
};
}
setHoverData = (e) => {
this.setState({ hoverData: ... }); // the chart is not updated
}
setNewSeriesData = () => {
this.setState({ chartOptions: {...} }); // the chart is updated with only new options
}
render() {
...
return (
<div>
<HighchartsReact
...
options={this.state.chartOptions}
/>
...
</div>
)
}
Live demo: https://stackblitz.com/edit/react-9hwir4?file=index.js
Additionally, it is also possible to block updates by the allowChartUpdate
option.
from highcharts-react.
Related Issues (20)
- 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 4
- Server side rendering of React components HOT 2
- 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 3
- Leaving the page with a highstock chart in it throws multiple console errors despite chart doing its job HOT 4
- Issue: Component Getting Unmounted from DOM When Using Scroll HOT 4
- Issue: Inconsistent Space Between Axis and Scroll Bar When Scrolling and Zooming in Chart HOT 3
- Incorrect Typescript usage documentation HOT 1
- Scroll Wobble in Highcharts/Stock HOT 2
- Charts resize infinitely when placed under a flexbox with flex-direction: column HOT 2
- mapline is hidden when draw from LA to Taiwan HOT 1
- How to add new y axis? HOT 1
- I'm trying to find a way to center my flag but can't seem to do it #21540 HOT 1
- Cannot center data label HOT 1
- Can i add a marker at the end of the path Gauge? 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 highcharts-react.