Updating HighStock chart when state changes about highcharts-react

[KacperMadej]

Hi @tjugg

All should boli down to a chart being created (init options) and then updated (possibly multiple times), so please share the (minimal if possible) code used to create and update the problematic chart. You could use exemplary data as long as it recreate the problem.

Alright, so here is an example using the ref route.

This is in the render() function
<HighchartsReact highcharts={HighchartsStock} constructorType={'stockChart'} options={chartOptions} ref={'chart'} />

Here is the initial options + adding dynamically via refs:

`const chart = this.refs.chart;

    if (chart !== undefined) {
        chart.chart.addSeries({
            name: 'OK',
            data: [1, 2, 3]
        });
        chart.chart.redraw();
    }

    if (chart === undefined) {
        return {
            title: {
                text: 'Crash'
            },
            yAxis: {
                title: {
                    text: 'Title'
                }
            }
        }
    }`

Sorry for the bad formatting. So the initial chart options is what is returned in the last code snippet. That crashes for me. BUT if I remove the yAxis configuration, that chart updates just fine without crashing. The other way I tried it, was to just return a new set of options on every update to the component. This ends with the same result. Both options work fine via HighChart, not HighStock.

https://pastebin.com/iiGjfneq this is pretty much the code.

@KacperMadej even https://github.com/highcharts/highcharts-react/blob/master/demo/demo.jsx crashes when you try to force update the component.

[scottclayton]

@tjugg and @KacperMadej

I also have issues with the stockChart as well as the regular chart when there is navigator.enabled = true

Do either of you think this might essentially be the same issue as this one in the highcharts repo about highstock navigator?

I submitted a PR (#45) for addressing the oneToOne prop-passing, but it doesn't resolve the highstock issue except for initial loading—updating series still doesn't work, I believe because of a bug at the highstock level

@scottclayton I am not sure if it's the same issue, but this is definitely a bug. @KacperMadej ?

[KacperMadej]

tl;dr This is the same problem as the one reported in Highcharts: highcharts/highcharts#8196 + bad demo in this repository.

Long / full story:
It was not possible to set oneToOne to false due to a bug in code that was fixed thank to @scottclayton - thank you very much for finding the source of the problem and submitting the PR. New version of the wrapper (1.3.2) is updating to NPM's highcharts-react-official as I'm typing this.

In the demo simplified structure looks like main component with 4 chart components. On first chart options update done through the main's container setState update check runs through it's child components and because update prop is by default set to true, then shouldComponentUpdate by default returns true. This causes update on other charts - stock and map charts included and because oneToOne for the stock chart is set to true the update causes the error reported in main Highcharts repository.

We are working or rewriting this wrapper to work better with new versions of React, so drastic changes are not planned until version 2 of this wrapper will be released. For now only emergency fixes are committed, so the demo is still showing the problem, but thank to the PR by @scottclayton it's avoidable by code changes.

There's no ETA for v2.0.0 for now, but it should be done within next few weeks.

@tjugg Please check with new code and oneToOne set to false for stock charts and if this doesn't help please provide more details about how the problem could be recreated - app that could be build, like this repository and it's demo, would be helpful for debugging of your problem.

[KacperMadej]

Closing due to inactivity.