Chart JS - Use Time for xAxes

Question

I added this code

scales: { xAxes: [{ type: 'time', time: { unit: 'month', displayFormats: { month: 'MM' }, max: '2017-10-09 18:43:53', min: '2017-10-02 18:43:53' } }] }, 

but it does not work. Any ideas what I'm doing wrong?

FIDDLE → https://jsfiddle.net/o473y9pw/

Answer 1

Since you want to use time for the x axis, your labels array should be an array of a date / time string (the labels array corresponds to the x axis).

You also need to set the parser property (for proper date / time processing) and the x-axis' ticks the source before data (in order to correctly generate ticks along the x axis).

UPDATE

If you have only the minimum and maximum date, you can create a small plugin to populate the labels (date) array dynamically, as such:

 plugins: [{ beforeInit: function(chart) { var time = chart.options.scales.xAxes[0].time, // 'time' object reference // difference (in days) between min and max date timeDiff = moment(time.max).diff(moment(time.min), 'd'); // populate 'labels' array // (create a date string for each date between min and max, inclusive) for (i = 0; i <= timeDiff; i++) { var _label = moment(time.min).add(i, 'd').format('YYYY-MM-DD HH:mm:ss'); chart.data.labels.push(_label); } } }] 

^{note: moment.js is used to simplify the calculations.}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
^{(for demo purposes, I changed unit time to day )}

 $(document).ready(function() { new Chart(document.getElementById("chartBox"), { type: 'line', data: { datasets: [{ data: [12, 19, 3, 5, 2, 3, 32, 15], label: "", borderWidth: 2, borderColor: "#3e95cd", fill: false, pointRadius: 0 }] }, options: { scales: { xAxes: [{ type: 'time', time: { parser: 'YYYY-MM-DD HH:mm:ss', unit: 'day', displayFormats: { day: 'ddd' }, min: '2017-10-02 18:43:53', max: '2017-10-09 18:43:53' }, ticks: { source: 'data' } }] }, legend: { display: false }, animation: { duration: 0, }, hover: { animationDuration: 0, }, responsiveAnimationDuration: 0 }, plugins: [{ beforeInit: function(chart) { var time = chart.options.scales.xAxes[0].time, // 'time' object reference timeDiff = moment(time.max).diff(moment(time.min), 'd'); // difference (in days) between min and max date // populate 'labels' array // (create a date string for each date between min and max, inclusive) for (i = 0; i <= timeDiff; i++) { var _label = moment(time.min).add(i, 'd').format('YYYY-MM-DD HH:mm:ss'); chart.data.labels.push(_label); } } }] }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/ moment@latest /moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script> <canvas id="chartBox"></canvas> 

Answer 2

The dataset must be an array of objects with properties x for time and y for value. How else could you draw a chart, right?

 $(document).ready(function() { var data = [{ x: new moment().add(-10, "months"), y: Math.random() * 100 }, { x: new moment().add(-8, "months"), y: Math.random() * 100 }, { x: new moment().add(-6, "months"), y: Math.random() * 100 }, { x: new moment().add(-4, "months"), y: Math.random() * 100 }, { x: new moment().add(-2, "months"), y: Math.random() * 100 }, { x: new moment().add(-0, "months"), y: Math.random() * 100 }, ]; new Chart(document.getElementById("chartBox"), { type: 'line', data: { datasets: [{ data: data, borderColor: "#3e95cd", fill: false }] }, options: { scales: { xAxes: [{ type: 'time' }] }, legend: false } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script> <canvas id="chartBox"></canvas> 

Fiddle

Answer 3

If the xAxis label is in a date format , use this code

 time: { format: 'MM', unit: 'month', displayFormats: { month: 'MM' }, max: '2017-10-09 18:43:53', min: '2017-10-02 18:43:53' } 

If the xAxis label is what used to be used by numbers , use

  time: { format: 'MM', unit: 'month', parser:'MM', displayFormats: { month: 'MM' }, max: '2017-10-09 18:43:53', min: '2017-00-02 18:43:53' } 

Answer 4

You might want to change a few things.

• Your data should include time data.

• If you set the scale unit to month , your min max must be more than one month to see the actual scales.

Here's a simplified working example.

https://jsfiddle.net/f2xmkkao/