How can I make my custom vue-chart.js gauge plugin react to Vue prop changes?

Below is one common solution: rather than trying to reach Vue props directly inside your plugin, pass reactive values (or a reference to them) into your chart’s configuration and then update the chart when those values change.

In other words, move the parameters (prefix, suffix, etc.) into an option that your plugin can access. For example, attach them to your chart options:

1. Update the Chart Configuration

Add a custom field (e.g., customPluginProps) to your chart options that holds your data. Then update the plugin to pull these values from the chart options instead of from an undefined variable:

JSCopied
const gaugeFlowMeter = {
  id: 'gaugeFlowMeter',
  afterDatasetsDraw(chart) {
    const { ctx, data } = chart;
    // Get custom props from chart options:
    const { prefix, suffix } = chart.options.customPluginProps || {};

    ctx.save();
    const needleValue = data.datasets[0].needleValue;
    const meta = chart.getDatasetMeta(0)
    const xCenter = meta.data[0].x;
    const yCenter = meta.data[0].y;

    // Render the needle label:
    ctx.font = 'bold 20px sans-serif';
    ctx.fillStyle = 'grey';
    ctx.textAlign = 'center';
    ctx.fillText(`${prefix ?? ''}${needleValue}${suffix ?? ''}`, xCenter, yCenter + 40);
  }
};

2. In the Vue Component

Update your component so that your reactive props drive the chart configuration. For example, if you have Vue props (or data properties) for prefix and suffix, you can include them in the chart options. Then use a watcher so that whenever those props change, you call the chart’s update method.

HTMLCopied
<template>
  <Doughnut
    :id="id"
    ref="gaugeChart"
    :data="{ datasets, labels }"
    :options="chartOptions"
    :plugins="[gaugeNeedle, gaugeFlowMeter, gaugeLabels]"
  />
</template>

<script>
import { ref, watch, computed } from 'vue'
import gaugeFlowMeter from './path/to/gaugeFlowMeter'
// assume gaugeNeedle and gaugeLabels are defined similarly

export default {
  props: ['id', 'prefix', 'suffix'],
  setup(props) {
    const datasets = ref([
      {
        // include your dataset data here, including needleValue
        needleValue: 50,
        data: [50, 50]
      }
    ])

    const labels = ref(['A', 'B'])

    // Include custom plugin props in chartOptions
    const chartOptions = computed(() => ({
      // other chart options…
      customPluginProps: {
        prefix: props.prefix,
        suffix: props.suffix
      }
    }))

    // Get a handle on the chart instance using a ref
    const gaugeChart = ref(null)

    // Watch for changes in prefix/suffix to force the chart update
    watch(
      () => [props.prefix, props.suffix],
      () => {
        if (gaugeChart.value && gaugeChart.value.$_chart) {
          // The chart instance is usually available as a property e.g. `$_chart`
          gaugeChart.value.$_chart.update()
        }
      }
    )
    
    return { datasets, labels, chartOptions, gaugeChart }
  }
}
</script>

Explanation

1. Passing Custom Options:
   By setting a custom property (customPluginProps) within chartOptions, you make your plugin aware of the values it needs without directly importing or accessing Vue props.

2. Reactivity with Computed/Watch:
   Since chartOptions is a computed property that reads from reactive props, any changes in prefix or suffix are automatically reflected in chartOptions. A watcher then calls update() on the Chart.js instance to re-run the drawing cycle and thus re-evaluate your plugin.

3. Plugin Reactivity:
   With the redraw triggered, your plugin (executed during the drawing cycle) reads the latest values from chart.options.customPluginProps, ensuring the gauge label is updated based on reactive data changes (or even window resize changes when the chart recalculates layout).

This approach leverages both Vue's reactivity and Chart.js's update mechanism to keep your custom plugin reactive without trying to reference Vue props directly in the plugin scope.