Solid guage refresh when receives new data (point value)

I am having issues with my solid gauge component using the highcharts-vue wrapper.
Basically every time it receives new data it re-draws the animation from 0. Please see sandbox link below for example: https://codesandbox.io/s/n0no0jky1l

The desired behavour im trying to achieve is shown here: https://www.highcharts.com/demo/gauge-solid
Where the gauge animates from old to new value smoothly.
From what i can tell it is not recommended to access the charts methods manually (for example to call the points.update method). (source: https://github.com/highcharts/highcharts-vue#chart-object-reference)
Any ideas?

point.update()

1 Answer
1

It occurs because of mutating data in Highcharts. Please use Point.update, instead of updating whole series, to make animation work. You can access whole Chart object by reference in your component, specifically this.children[0].chart. Here is the code:

Point.update

Chart

this.children[0].chart

watch:
title(newValue)
this.chartOptions.title.text = newValue;
,
points(newValue, oldValue)
console.log("watch firing", newValue, oldValue);
this.$children[0].chart.series[0].data[0].update(oldValue += 1);
,
units(newValue)
this.chartOptions.series[0].dataLabels.format =
'<div style="text-align:center"><span style="font-size:2rem;color: black">y</span><div>' +
newValue +
"</div><div/>";
,
min(newValue)
this.chartOptions.yAxis.min = newValue;
,
max(newValue)
this.chartOptions.yAxis.max = newValue;

,


Don't worry about your data, Highcharts mutate it, so your points prop should be updated every time.

points

Live example: https://codesandbox.io/s/ojkzvo05z

Kind regards!

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.