Chart.js creating a line graph using dates

Question

I can't seem to get Chart.js to work with dates. I have tried quite a few different methods:

let examChart = document.getElementById("examChart").getContext("2d");
let examLineChart = new Chart(examChart, {
    type: "line",
    data: [
            { t: new Date("2015-3-15 13:3"), y: 12 },
            { t: new Date("2015-3-25 13:2"), y: 21 },
            { t: new Date("2015-4-25 14:12"), y: 32 }
    ],
    options: {
        label: "placeholder"
    }
});

And:

let examChart = document.getElementById("examChart").getContext("2d");
let examLineChart = new Chart(examChart, {
    type: "line",
    data: [
            { t: "2015-3-15 13:3", y: 12 },
            { t: "2015-3-25 13:2", y: 21 },
            { t: "2015-4-25 14:12", y: 32 }
    ],
    options: {
        label: "placeholder"    
    }
});

And:

let examChart = document.getElementById("examChart").getContext("2d");
let examLineChart = new Chart(examChart, {
    type: "line",
    data: [
            { t: "Sun Mar 15 2015 12:03:45 GMT+0000 (GMT Standard Time)", y: 12 },
            { t: "Wed Mar 25 2015 12:02:15 GMT+0000 (GMT Standard Time)", y: 21 },
            { t: "Sat Apr 25 2015 13:12:30 GMT+0100 (GMT Daylight Time)", y: 32 }
    ],
    options: {
        label: "placeholder"    
    }
});

To cover just a few of my attempts, I just can't seem to get how to set dates properly even after reading the documentation (http://www.chartjs.org/docs/latest/axes/cartesian/time.html) (they don't actually give an example)

The HTML being used:

<div class="container">
    <canvas id="examChart"></canvas>
</div>

I just have no idea, although I imagine this is a rather simple problem, any help would be greatly appreciated.

Ramiz Wachtler · Accepted Answer · 2021-02-16T17:42:36.157

You have to move your data within a dataset. If you take a look at the usage manual, a datasets array is used. The "hint" for datasets within the docs for time is also not that obvious (See headline).

See the snippet below:

I just copied the basic usage example and inserted the data from your first attempt (+ added few labels)

UPDATE 18.03.2020

I've updated the snippet to use Chart.js 2.8.0 and added following code, as suggested in the comment by @Erik

options: {
    scales: {
      xAxes: [{
        type: 'time'
      }]
    }
  }

UPDATE 16.02.2021

As pointed out by @habib, the 2.9.4 version was throwing couple of errors. I guess that those were caused by missing dependency (moment.js). See:

Note: starting v2.8, Moment.js is an optional dependency for Chart.js and Chart.min.js. In order to use the time scale with Moment.js, you need to make sure Moment.js is fully loaded before requiring Chart.js. You can either use a shim

Source

Therefore, I changed following things:

Updated Chart.js to 2.9.4
Added moment.js (2.29.1) as dependency
Adjusted the time format to be ISO8601 compliant (As suggested by soiboi)

var ctx = document.getElementById("examChart").getContext("2d");

var myChart = new Chart(ctx, {
  type: 'line',
  options: {
    scales: {
      xAxes: [{
        type: 'time',
      }]
    }
  },
  data: {
    labels: ["2015-03-15T13:03:00Z", "2015-03-25T13:02:00Z", "2015-04-25T14:12:00Z"],
    datasets: [{
      label: 'Demo',
      data: [{
          t: '2015-03-15T13:03:00Z',
          y: 12
        },
        {
          t: '2015-03-25T13:02:00Z',
          y: 21
        },
        {
          t: '2015-04-25T14:12:00Z',
          y: 32
        }
      ],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<div class="container">
  <canvas id="examChart"></canvas>
</div>

This example displays the data points as evenly spread across the x axis, this shouldn't be. The x axis should be a scale and the points should be positioned along this scale, the gaps in between points should be different. — Jonathan Woollett-light, Dec 18 '17 at 23:11
Although not quite the solution I wanted, this is a solution and certainly helpful, thank you. — Jonathan Woollett-light, Dec 19 '17 at 17:42
@JonathanWoollett-light Did you figure out a way to do what you're saying? — claudekennilol, Nov 28 '18 at 17:28
@claudekennilol I did not figure out how to do it. Even today I wonder why such a feature is not standard. — Jonathan Woollett-light, Nov 29 '18 at 19:55
add the following to get it to space out - options: { scales: { xAxes: [{ type: 'time' }] } } — Erik, Mar 29 '19 at 02:25
this solution is giving an error on Chart.js/2.9.4 Cannot read property 'skip' of undefined — habib, Feb 16 '21 at 17:00
@habib Thanks for the hint, I updated the example and added a short summary of the changes. — Ramiz Wachtler, Feb 16 '21 at 17:43

score 10 · Answer 2 · answered May 03 '19 at 01:07

Building on what @RamizWachtler has answered, you can add to the options section of the chart to scale the times out properly. I'll note that this doesn't seem to work with Charts.js 2.3. Added a working snippet that uses the latest Charts.js version as of April 2019.

Additionally I've changed the time formatting to be ISO8601 compliant.

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                distribution: 'linear'
            }]
        }
    }
});

Source - https://www.chartjs.org/docs/latest/axes/cartesian/time.html

var ctx = document.getElementById("examChart").getContext("2d");

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["2015-03-15T13:03:00Z", "2015-03-25T13:02:00Z", "2015-04-25T14:12:00Z"],
    datasets: [{
      label: 'Demo',
      data: [{
          t: "2015-03-15T13:03:00Z",
          y: 12
        },
        {
          t: "2015-03-25T13:02:00Z",
          y: 21
        },
        {
          t: "2015-04-25T14:12:00Z",
          y: 32
        }
      ],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        distribution: 'linear'
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0-rc.1/Chart.bundle.js"></script>
<div class="container">
  <canvas id="examChart"></canvas>
</div>

To get this to work on more recent versions of chartjs you need to include momentjs file. — Tinus Tate, Jun 26 '20 at 09:33

score 1 · Answer 3 · edited Aug 04 '18 at 08:23

when using time, you have to use UTC time, as your local time is added(australia +10 hours / 36000 secs) so every country has a different time zone. the key is to use moment.utc in any conversion of time 0 seconds = moment.utc('1970-01-01 00:00:00')

use moment.utc('1970-01-01').add(3600, 'seconds')to add a value and then from y-axis values or tool tip items, you have to reference

callback: value => {
    date = moment.utc(value);
    if(date.diff(moment.utc('1970-01-01 23:59:59'), 'minutes') === 0) 
    {
        return null;
    };
    date.format('HH:mm:ss');
}

label: (item, data) => data.datasets[item.datasetIndex].label +" "+ 
moment.utc(data.datasets[item.datasetIndex].data[item.index]).format("HH:mm:ss")

https://lopeys.com/ironman/IMAUS_Charts_StackedTimes.htm

score 0 · Answer 4 · answered Dec 18 '17 at 20:28

0

My suggestion would be to add the moment.js library to your project and format your dates using moment. Also I'm not sure about using the "t" and "y" here. I'd add the time as labels and matched that with the x data:

var data = {
  labels: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
  datasets: [
    {
        data: [12,21,32],
    }
  ]
};

var myBarChart = Chart.Line(canvas,{
data:data,
});

There is a fiddle example here.

answered Dec 18 '17 at 20:28

Jason Allshorn

1,625
1
18
27

1

This example displays the data points as evenly spread across the x axis, this shouldn't be. The x axis should be a scale and the points should be positioned along this scale, the gaps in between points should be different. – Jonathan Woollett-light Dec 18 '17 at 23:11

Chart.js creating a line graph using dates

4 Answers4

Linked