Data Binding
- You have to set prop bind="true"
- You can bind Your Vue data between vue-charts'
- vue-charts will auto render when you change the props
Key Code
- For more detail. You can press F12. You know what I mean.
<body>
<input v-on:keyup.enter="addData" placeholder="Add a Data" ...>
<input v-on:keyup.enter="addLabel" placeholder="Add a Label" ...>
<chartjs-line :labels="labels" :data="data" :bind="true"></chartjs-line>
...
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<script src="js/vue-charts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<script>
Vue.use(VueCharts);
const app = new Vue({
el: '#app',
data:{
labels: ["January", "February", "March", "April", "May", "June", "July"],
data:[65, 59, 80, 81, 56, 55, 40],
},
});
</script>