Issue with Updating Highcharts Data Using Vue.js 3
Within my Vue.js 3 web application, I have integrated a Highcharts Chart alongside some statistics display. This setup includes global buttons for time-filtering options such as All, Year, Month, and Week. The challenge I am facing is ensuring that the data in my Highchart chart updates dynamically whenever one of these time-filter buttons is pressed.
To achieve this functionality, I have utilized a Vue3 wrapper for Highcharts, which can be found on GitHub: Wrappers Github
While the initial data display works perfectly, the process of updating the data is notably sluggish. This sluggishness has led me to believe that there may be an error in how I am handling the data update process.
To further illustrate my issue, I have uploaded a video demonstration on YouTube: https://youtu.be/GEjHqoAElgI
Furthermore, I have created a minimal reproducible example on CodeSandbox: https://codesandbox.io/s/blissful-goldwasser-zq8je?fontsize=14&hidenavigation=1&theme=dark
Within this example, there is a Chart.vue component that updates its "data" property when the "Update Data" button is pressed. Despite the ability to toggle the button multiple times, there is a delay of several seconds before the chart updates.
I have experimented with passing the data to my Chart component as a property and utilizing a watcher to trigger chart updates when the data changes. While this method technically works, the chart updating process remains slow (3-5 seconds).
Below is the code snippet for my component:
<template>
<VueHighcharts
class="hc"
:options="options"
:deepCopyOnUpdate="true"
:redrawOnUpdate="true"
:oneToOneUpdate="false"
:animateOnUpdate="false"
/>
</template>
<script>
import VueHighcharts from "vue3-highcharts";
export default {
name: "CoinChart",
components: {
VueHighcharts,
},
props: {
stats: [Object],
},
data() {
return {
options: {
title: {
text: "Coins",
},
series: [
{
name: "ETH",
data: [],
},
{
name: "BTC",
data: [],
},
],
},
};
},
watch: {
stats: {
immediate: true, // Despite comments, this line does play a role
handler: function (val) {
const eth = new Array();
const btc = new Array();
this.options.series[0].data = [];
this.options.series[1].data = [];
for (let i in val) {
eth.push([val[i].time * 1000, val[i].coinsPerHour]);
btc.push([val[i].time * 1000, val[i].btcPerHour]);
}
this.options.series[0].data = eth;
this.options.series[1].data = btc;
},
},
},
};
</script>
This challenge has consumed a significant amount of my time – 4 hours today alone – without yielding any success. I have even considered switching to Chart.js, but it appears that Chart.js lacks robust compatibility with Vue.js 3 as well.