[Vuejs]-VueChart.js child component not updating with data

by

0👍

There are two issues with your chartData in the child component:

  1. it is not updated when data changes
  2. chart-js requires you to rebuild both the chartData object and the chartData.datasets array to detect changes and redraw the chart

You can fix both by turning your chartData into a computed property:

  computed: {
    chartData(){
      return {
        labels: this.labels,
        datasets: [
          {
            borderColor: "#f6b09e",
            backgroundColor: "rgb(246, 176, 157)",
            label: "crimes",
            data: this.dataset,
          },
        ],
      }
    }
  }

Here is a simplified playground

Leave a comment