Scriptable options reactivity in Vue.js

[zk118]

Hey, I have a problem with the scriptable options of the plugin, the value I return in those seems to lag (display the previous value and not the current one).

When the percentage prop is updated in the code below, the watcher displays the right value, so my component has the right value (the current), but the annotation content scriptable option returns the previous value of the percentage variable. Seems like some update or caching issue. Do you have an idea ?

Thanks in advance.

My code:

<template>
    <LineChartGenerator
        :chart-options="chartOptions"
        :chart-data="chartData"
        :width="400"
        :height="350"
    />
</template>

<script>
import { Line as LineChartGenerator } from 'vue-chartjs'
import annotationPlugin from 'chartjs-plugin-annotation';
import {Chart as ChartJS} from 'chart.js'

ChartJS.register(annotationPlugin)

export default {
    components: {
        LineChartGenerator
    },
    props: {
        chartData: {
            type: Object
        },
        percentage: {
            type: Number
        }
    },
    watch: {
        percentage (val) {
            console.log(val) // displays the current value
        }
    },
    data() {
        return {
            chartOptions: {
                ...,
                plugins: {
                    annotation: {
                        annotations: {
                            percentage: {
                                type: 'label',
                                xValue: 0,
                                yValue: 0,
                                content: () => this.percentage, // displays the previous value
                                textStrokeColor: 'red'
                            }
                        }
                    }
                }
            }
        }
    }
}
</script>

[stockiNail]

@evenmind thank you very much. Could you provide a sample n order to reproduce the issue?

[stockiNail]

@evenmind I had a look trying to recreate the case. What I see is that changing the percentage, property of the component, the chart is not updated because, if I'm not wrong, the chart.update, which is needed to invoke the scriptable options for the label content, is invoked only if you change chart data or options and not the other properties. Maybe I'm wrong.

[zk118]

@stockiNail seems plausible, thank you. Do you have an idea for a workaround ? Should I manually call chart.update when percentage hase changed ?

[stockiNail]

I'm not an expert of vue-chartjs (I'm not using Vue) therefore I cannot give you a good answer.

Should I manually call chart.update when percentage hase changed ?

I think yes but I haven't found a way (my lack of knowledge and time) how to invoke it, programmatically.

[stockiNail]

@evenmind I have created a sandbox where the label content is changed every 3 seconds.

https://codesandbox.io/s/bold-sun-l8qftr?file=/src/App.vue

As wrote above, the plugin seems working correctly. Have a look to Migration guide of vue-chartjs: https://vue-chartjs.org/migration-guides/#new-reactivity-system

[zk118]

Oh wow, it works perfectly when creating a local variable before returning the options object in the computed property. Thank you !