'vue-chartjs not able to update the chart

I'm trying to understand how can I render a chart dynamically so after I can adapt it so can I send data to it trough MQTT so I can display data in real time.

The problem is the following: when I uncomment the this.speed.push(this.initial_speed + 1) line I get a Maximum call stack size exceeded error. The x axis is rendering dynamically (when the indicated line is commented) but I'm not able to make it work with both the axes.

I attach the sandbox to my code: sandbox

Thank you beforehand.

vuejs3vue-chartjs


Solution 1:[1]

Well, honestly I can't find the source of the issue, but using this syntax you can run your add method without problem

add() {
  this.created_at.push(this.initial_speed + 1)
  this.initial_speed += 1
  this.speed = [...this.speed, this.initial_speed]
}

This problem is something related to the computed property inside the Line component from chartjs, it's not related to something in your code (this is what I can see)

Let me know if everything is fine

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Andres Foronda

Related Questions