Chart component

[colinbes]

I am using vue 3.2.6 together with vite 2.5.4 and primevue 3.7.2 (and chart 3.5.1).

I use the vue3 composition api with script setup.

I am trying to insert a vue bar chart which fails to re-render chart on data change.

I have verified that the data (which is reactive) is being updated - note that if I resize the browser window then the chart does update.

In notes there is mention of refresh method but I am unsure how to access this method - can you please advise.

[colinbes]

I have figured out issue with chart not updating. The vue component is watching prop 'data' which is not triggering on changes within the object and requires the entire data object to be replaced.

This can be remedied by using deep option on watch.

Change

Code: Select all

    watch: {
        data(): {
       	   this.reinit();
        }

to

Code: Select all

    watch: {
        data: {
            handler(val, oldVal) {
                this.reinit();
            },
            deep: true
        },
        ...

I have created a PR

[colinbes]

In the meantime, I have used a mixin to extend Chart.vue with ChartEx.vue.

To use, simply import ChartEx.vue instead of Chart.vue

Code: Select all

import Chart from '/@/components/ChartEx.vue'

Code: Select all

<template>
	<h1>Usage View</h1>
  	<Chart id="cbchart" type="bar" :data="monthlyData" :options="options"/>
</template>

Code: Select all

<script lang='js'>
import ChartMixin from 'primevue/chart'

export default {
  mixins: [ChartMixin],
  watch: {
    data: {
        handler(val, oldVal) {
            this.reinit();
        },
        deep: true
    }
  }
}
</script>