Chartjs-How to get data on chart based on selected date (Filtering data Chart JS with datepicker)

by

1👍

✅

Working with timebased data you should use time ChartsJS this way you can set limits in XAxe.

xAxes: [
        {
          type: "time",
          time: {
            minUnit: "minute",
            unit: "minute",
            unitStepSize: 4,
            min: moment(from_date).toDate(),//Date object type
            max: moment(to_date).toDate()//Date object type
          },
          ...
        }
      ],

Note that using this mode you need to use your data as follow:

{
    x: date,//Date object type
    y: value // Number
}

Note that your limits in time Object should be Date object. I recommend to use the library momenjs to manipulate date data since it has many compatibility. For example, the timestamp of your data retreived from server is not compatible with the constructor Date in Safari. but you can do something like

moment(data.timestamp).toDate()

Leave a comment