Chartjs-How do I add Date range filter in chartjs in the context of Vue.js

by

1👍

✅

Try adding chart object in data

data () {
    return {
      chart = null;      
    }
  }

initialize chart = new Chart({..}) on mounted() hook and bind initial data as you are doing currently.

When you are applying the filters do-following to update the chart :

 this.chart.data.datasets = {
            label: 'Chart_from_API',
            data: Chart_data,
            borderColor: '#EA5455',
            lineTension: 0
          }
        ];
 this.chart.update();

Also, prefer removing code from mounted() and put it in a method for reusability.

Update ——-

Handling Radio button

<section>
  <h3>radio buttons</h3>
  <input type="radio" v-model="month" @change="onChange($event)" value="6">6 Months
  <input type="radio" v-model="month" @change="onChange($event)" value="3">3 Montha
  <input type="radio" v-model="month" @change="onChange($event)" value="1">1 Month
</section>

var vm = new Vue({
  ....
  data: {
    month: 1
  },
  methods:{
    onChange(event){
     var val = event.target.value;
     // update dataset 
     // update chart 
    }
  }
})

Leave a comment