Chart update without merging options

[govinda18]

Description of the feature

We have a use case where we want to update a chart using the chart.update API but want to avoid merging of options. It would seem that making a new chart would make sense but it seems chart.update is faster as compared to creating a new chart altogether.

When we update the chart, the title etc are not updated. The only way to remove them is to pass title.text = undefined. We need an API where we can set the new config without having titles, and axis titles etc being set.

Consider, for example, a react component such as highcharts-react. When the props change we would like to use chart.update in our component rather than rebuilding the chart. I am not sure if highcharts-react does that in some way, if yes it would be great if you could provide some reference to it.

Library related to the feature

Highcharts

---

[PaulDalek]

Hi @govinda18

Thank you for contacting us and suggesting the enhancement. I checked both chart.update and chart.setTitle functions and they both work as expected. Could you please provide us with a live and simplified demo where you cannot update the title section? Thank you.

Demo
https://jsfiddle.net/BlackLabel/g5psqfv0/

[govinda18]

Hi Paul,
Thanks for your reply.

I think I was unable to convey my goal here. Please checkout the following reproducer - https://jsfiddle.net/rfkhzy2j/.

Here if we see, when the config is updated, the chart title is not updated. However, when the props config is changed, the user expects the previous title to not be visible. One way to get around is building a new chart every time - https://jsfiddle.net/rfkhzy2j/1/. However, this is not as efficient.

What we want is to update the chart strictly with the new config, basically replicate the second behaviour using a chart.update. What we need is to unset all the options of some specific UI related things such as chart title, axis titles etc. We were hoping if highcharts could provide some API in chart update which ignores some given keys while merging

chart.update(newConfig, ignoreKeys = ['title', 'xAxis', 'yAxis])

Something like the above, where after doing chart.update, the original chart options are not respected.

[PaulDalek]

@govinda18

Thank you for providing further details along with the demo. Ok, I understand now that you need some kind of mechanism of resetting the chart to the 'initial state', before all updates along the way. As for now there is no better way than to simply recreate the chart. You can try to deep copy chart.options and axes arrays, create one big object and use it in the update function (with oneToOne flag on - https://jsfiddle.net/BlackLabel/8uk4njy3/) but this unfortunately won’t work for every possible option (see the chart.borderWidth for example). In case there are some specific sections and options that need to be reset after a new config is used, you can create an initial object with possible options and their initial values.

[govinda18]

Thanks for your reply Paul. Currently I am unsetting the set of options passed previously, for example,

{
    title: {
        text: "asd"
    }
}

becomes

{
    title: {
        text: undefined
    }
}

This I do by recursively traversing through the object. This again has many complications. I have to handle arrays such as series, axes separately. While creating a new chart is a solid way, if we have something like the highcharts editor wrapped over a react component, even for small changes such as title, it would be a performance heavy task to create a new chart.

I will try out the above reproducer though. It seems to do a few interesting things which we can use. Thanks a lot for that!

[TorsteinHonsi]

@govinda18 Running chart.update while resetting the state is not a frequently asked question, as you may have guessed. But we actual have this mechanism in the responsive module, and are using it internally. The key is the (internal) Chart.currentOptions function that can take a given set of options before they are applied, and return the current values.

See https://jsfiddle.net/highcharts/9oLcjgku/ for how to use that to store the previous state of the chart before applying options, so that you can reset it before the next run.

I hope this helps!

[govinda18]

Thanks a lot @TorsteinHonsi! Sorry for the delayed response. This is precisely what we needed.