updated values failed to redraw the correct needle value

When updating the needle values for the radial gauge component, the watch function will not update the needle value on the first try. It settles at zero a few times before accepting the new value.

<template>
  <canvas class="canvas-gauges"></canvas>
</template>

<script>
import { RadialGauge } from 'canvas-gauges'
export default {
  props: {
    value: Number,
    options: {
      type: Object,
      default: () => ({})
    }
  },
  data: function () {
    return {
      chart: null
    }
  },
  mounted: function () {
    this.chart = new RadialGauge(Object.assign({}, this.options, { renderTo: this.$el, value: this.value }))
      .draw()
  },
  beforeDestroy: function () {
    this.chart.destroy()
  },
  watch: {
    value: function (val) {
      this.chart.value = val
    },
    options: function (opt) {
      this.chart.destroy()
      this.chart = new RadialGauge(Object.assign({}, this.options, {renderTo: this.$el, value: this.value})).draw()
    }
  }
}
</script>

[ptorrent]

Hi there ! Same problem here. If I do gauge.update ({value: 100}) then gauge.value = 2000 the needle is not correct (0 unitl I set a new value) …

It looks like an animation problem. If I disable the animation everything works fine.

Any idea ?

[ylebre]

@MichaelSprague That fixes the issue for my usecase, let me know if you need help with putting together a pull request.