Chart does not update on this.$data._chart.update()

Expected Behavior

Chart should update on this.$data._chart.update()

Actual Behavior

Chart does not update.

Am I missing something? dataPoints is reactive and receives new values which the watcher successfully spots and trigger this.$data._chart.update() but nothing happens.

<script lang="ts">
  import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
  import { Line } from 'vue-chartjs'
  import { ChartOptions } from 'chart.js'

  @Component({
    components: {}
  })
  export default class ChartLineNonReactive extends Mixins(Line) {
    @Prop({ default: () => [] }) dataPoints!: number[]
    @Prop() scaleMin!: number
    @Prop() scaleMax!: number
    @Prop() reverse?: boolean

    $refs!: {
      canvas: any
    }

    gradient: CanvasGradient | null = null

    get chartData() {
      return {
        labels: this.dataPoints.map((d, i) => i.toString()),
        datasets: [
          {
            data: this.dataPoints,
            backgroundColor: 'transparent',
            borderWidth: 4,
            borderColor: this.gradient!,
            pointBorderWidth: 2
          }
        ]
      }
    }

    get options(): ChartOptions {
      return {
        responsive: true,
        maintainAspectRatio: false,
        layout: { padding: 10 },
        legend: { display: false },
        scales: {
          display: false,
          xAxes: [{
            display: false,
            ticks: {}
          }],
          yAxes:
            [{
              ticks: {
                min: this.scaleMin,
                max: this.scaleMax
              },
              display: false
            }]
        }
      }
    }

    mounted() {
      this.gradient = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, this.$refs.canvas.height)

      const positive = '#4CD287'
      const warning = '#FFBE60'
      const negative = '#FF8062'

      this.gradient!.addColorStop(this.reverse ? 0 : 1, negative)
      this.gradient!.addColorStop(0.5, warning)
      this.gradient!.addColorStop(this.reverse ? 1 : 0, positive)

      this.renderChart(
        this.chartData,
        this.options
      )
    }

    @Watch('chartData')
    changed(newVal: any, oldVal: any) {
      this.$data._chart.update()
    }
  }
</script>

[apertureless]

This is indeed weird.

Can you check if instead of calling update() calling this.renderChart(this.chartData,this.options) solves this?

How are you getting your data? Are you using an api?

[artiomnist]

I have encountered the same issue. with this.chartOptions and my own watcher (as advised by the docs) triggering this.$data._chart.update() it does not update the chart.

My temporary solution was to disable animation and just re-render the chart on every update. Not great, or performant but it is working.

Any idea when this will be fixed?