Chartjs-How to filter data by dates in Charts.js

0đź‘Ť

Try This:

<input type="date" id="startdate" value="2020-11-07" @onchange="filterDataOnDate"/>
<input type="date" id="enddate" value="2020-11-13" @onchange="filterDataOnDate" />


//Filter date
function filterDataOnDate(){
    const date = [...labels]
    const startdate = document.getElementById('startdate')
    const enddate = document.getElementById('enddate')

    //get the index number  in array
    const indexstartdate = date.indexOf(startdate.value);
    const indexenddate = date.indexOf(enddate.value);

    //slice the array
    const filterdate = date.slice(indexstartdate, indexenddate + 1);
    chart.config.data.labels = filterdate;

    //update the chart
    chart.update();
}

Leave a comment