0

I am trying to update my chart by changing data. I was trying to do it, by following this example Vue Chart.js - Chart is not updating when data is changing But I experienced some problems. First of all these errors in dev tools 1. Missing required prop: "chartData". 2. The computed property "chartData" is already defined as a prop. I am a novice in this framework and I would be grateful if u don't mark this question as duplicated and if u give me some tips to solve this issue.

<template>
 <bar-chart :data="dataChart" :options="{responsive: true, maintainAspectRatio: false}"></bar-chart> // Bar chart
 <button class="click" @click="changeUi">Change chart</button>// Button 
</template>
<script>
 import Bar from '../Charts/Bar'
   export default {
     data(){
       return{
         dataChart: [44, 49, 48, 49, 55, 47, 43, 55, 53, 43, 44, 51]// data displayed by default   
    },
    components:{
      'bar-chart' : Bar
    },
    methods:{
      changeUi(){
        this.dataChart = [36, 46, 33, 35, 44, 36, 46, 43, 32, 65, 15, 46];// this data should be displayed after clicking button
      }
    }
  }
}
</script>

// Bar.js
import {Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins;

export default {
    extends: Bar,
    mixins: [reactiveProp],
    props: ["data", "options"],// recieving props
    mounted() {
        this.renderBarChart();
    },
    computed: {
        chartData: function() {
            return this.data;
        }
    },
    methods: {
      renderBarChart: function() {
         this.renderChart({
           labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
             datasets: [{
               label: 'Data One',
               backgroundColor: '#505464',
               hoverBackgroundColor: '#2196f3',
               data: this.chartData
                        }
                    ]
                },
                { responsive: true, maintainAspectRatio: false }
            );
        }
    },
    watch: {
        data: function() {
            this._chart.destroy();
            this.renderBarChart();
        }
    }
}
2
  • 1
    I copied your codes then created this fiddle, it seems working fine. (only comment out mixins: [reactiveProp]) Commented Jul 26, 2018 at 22:35
  • I commented but it doesn't work. In your fiddle u wrote "Vue.config.productionTip = false", maybe I should use this string to, if yes where I should write it? The second question, maybe I should rewrite my Bar.js to the vue component, because now it is simple js file? Commented Jul 27, 2018 at 5:08

1 Answer 1

0

https://github.com/apertureless/vue-chartjs/blob/develop/src/mixins/index.js#L89-L92

chartData is defined as an object in the mixin.reactiveProp

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.