Login/Register
Line graph with linear timescale in Chart.js
Asked Answered
Solved javascriptchart.jschart.js3
V

1

10

I'm trying to use Chart.js 3.3.2 to display some a line graph with an equally spaced x date axis. Like the example they give here.

I cannot get a simple version of this example working (see below snippet) as it outputs the error:

Error: This method is not implemented: Check that a complete date adapter is provided.

I did not try to implement the whole example given it depends on externally defined functions and values.

I asked a similar question long ago (Chart.js creating a line graph using dates) but having re-read through answers there, it has not helped me here (notably most answers here also focus on Chart.js 2 rather than 3).

I would greatly appreciate any help here (I find the documentation here hard to understand).

const data = {
  labels: [
    new Date(86400000), // Day 1
    new Date(2*86400000), // Day 2
    new Date(3*86400000), // Day 3
    new Date(4*86400000), // Day 4
    new Date(6*86400000), // Day 6
    new Date(7*86400000), // Day 7
    new Date(13*86400000) // Day 13
  ],
  datasets: [{
    label: 'My First dataset',
    data: [1,3,4,5,6,7,8]
  }]
};

const config = {
  type: 'line',
  data: data,
  options: {
    scales: {
      x: {
        type: 'time'
      }
    }
  }
};

let ctx = document.querySelector("canvas").getContext("2d");
let chart = new Chart(ctx,config);
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js"></script>
  </head>
  <body>
    <canvas></canvas>
    <script src="script.js"></script>
  </body>
</html>
Valdivia answered 19/6, 2021 at 16:7 Comment(0)
M
22

you need to add a date adapter as provided in the 3.x migration guide

(search in the page for "available adapters")

https://www.chartjs.org/docs/latest/migration/v3-migration.html

here is a working example

const data = {
  labels: [
    new Date(86400000), // Day 1
    new Date(2 * 86400000), // Day 2
    new Date(3 * 86400000), // Day 3
    new Date(4 * 86400000), // Day 4
    new Date(6 * 86400000), // Day 6
    new Date(7 * 86400000), // Day 7
    new Date(13 * 86400000), // Day 13
  ],
  datasets: [
    {
      label: "My First dataset",
      data: [1, 3, 4, 5, 6, 7, 8],
    },
  ],
};

let ctx = document.querySelector("canvas").getContext("2d");

let chart = new Chart(ctx, {
  type: "line",
  data: data,
  
  options: {
    scales: {
      x: {
        type: "time",
      }
    },
  },
});
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <title>repl.it</title>
  </head>
  <body>
    <canvas></canvas>
    <script src="new.ts"></script>
  </body>
</html>
Moran answered 19/6, 2021 at 18:32 Comment(2)
For anyone coming along to this later like me use the Luxon adapter github.com/chartjs/chartjs-adapter-luxon – Plemmons
@AndyJarrett why should people use Luxon instead of the other available adapters? – Brilliantine

© 2022 - 2024 — McMap. All rights reserved.