React-chartjs-2: Reload charts options

[jlejoux]

Would it be possible to reload charts options automatically ?

I have a Line chart on which I want the scales to be dynamic. I then have some properties on my option object that can change but it does not seem to be updated when the data changes.

[jlejoux]

This might come from this
this.chart_instance.options = Chart.helpers.configMerge(this.chart_instance.options, options);

the helper might actually not merge the options like I want them to. Would it be possible to set an option that would override the previous option everytime instead of merging them ?

[varatep]

@jlejoux were you able to figure this out? I am attempting to use a forceUpdate after setting the options in order to change the y-axis labelString; no success here.

[jlejoux]

@varatep unfortunately no. Can't figure out how it is possible to "reload" the chart options. For the moment I let it go but I'll definitely have to check this again one time. The issue I have is that I wanted to round the Xaxis scale to either day or hour but only the first round works, then it's not updated.

[fjaweihyafei]

@jlejoux I met the same issue. Do you have any new updates?

[jlejoux]

@fjaweihyafei sorry for late answer. I did not manage to resolve this. The only way I got to update the options were to have the two charts with different options contained into 2 JS variables and render the desired variable. Meaning that this won't be working if you need a large amount of use cases

[pjanik]

+1, would be nice if options could be updated dynamically.
Brutal workaround is to force React to recreate element using key property:

const key = JSON.stringify(options);
return (
  <Bar key={key} data={data} options={options}/>
);

It's a bit slow if you want to have some live update, since the whole Component will be thrown away and created from scratch. But it should work fine in most cases. Other properties that can't be updated dynamically are width and height. It would be nice to mention in docs which properties can be updated dynamically and which not.

[jerairrest]

Does anyone have an example of this that I could tinker with?

[mantasmarcinkus]

Hi,
I came across this problem and they brute force way of reloading the key value of component did work, I looked inside the library and found that the Component (which is the parent of all components like Line, Bar, etc.) that has a Property called redraw, and it does the job:
<Line redraw={true} data={graphData} options={chratOptions} />

[abury]

I've run into this one as well. For tooltips you could theoretically calculate a prefix in the callback function, but it won't work for a scale title so I'm going to have to redraw on each render.

@mantasmarcinkus Thanks for the redraw tip. Verified that works.

[misspokeycat]

As of Chart.js 2.5.0, chart options can be updated much like data with chart.update(). That seems to be the optimal solution.

[jerairrest]

If anyone from this thread is still having troubles, I believe a fix will be in 2.1.0

[jerairrest]

Closing since this should be resolved

[troygibb]

I'm still seeing an issue here--namely when I dynamically update my yAxes. For instance, if I had two yAxes in a prior config, then delete one, this line:

this.chart_instance.options = Chart.helpers.configMerge(this.chart_instance.options, options);

...retains the second yAxis. I can add the redraw prop as a workaround, although it seems like we may be misusing configMerge here?

[hamidfzm]

Hey guys,
Here is a solution in updating chart options:

class BigLineChart extends PureComponent {
    chart = {};

    componentDidMount() {
        console.log(this.chart); // returns a Chart.js instance reference
    }

    render() {
        const {datasets, labels} = this.props;
        return (
            <>
                <Line data={{
                    labels: labels,
                    datasets: datasets,
                }}
                      options={options}
                      ref={(reference) => this.chart = reference}
                      redraw
                />
                <Form>
                    <Form.Group controlId="exampleForm.ControlSelect1">
                        <Form.Label>Example select</Form.Label>
                        <Form.Control as="select" onChange={(e) => {
                            this.chart.chartInstance.config.options.scales.xAxes[0].time.unit = e.target.value;
                            this.chart.chartInstance.update();
                            console.log(this.chart);
                        }}>
                            <option>hour</option>
                            <option>day</option>
                        </Form.Control>
                    </Form.Group>
                </Form>
            </>
        );
    };
}

Just use ref and set options like I did. Then call update. Ezi Pizi :)

[bmakan]

Still not working. I am trying to dynamically adjust suggestedMax. I tried via setState and updating the Line component's options, and by using the chartsjs instance directly:

this.chartsjs.chartInstance.options.scales.yAxes[axisIndex].suggestedMax = suggestedMax;
this.chartsjs.chartInstance.update();

[maxwell-oroark]

Still not working for me either. The only solution that has come close is the key on component solution, which causes the whole component to be destroyed.