[Chartjs]-Time scatter plot w/ chart.js

According to the documentation of scatter charts:

Unlike the line chart where data can be supplied in two different formats, the scatter chart only accepts data in a point format.

So you can’t use values like 2017-07-08T06:15:02-0600. You can convert dates into numbers and use them in your data.

In your case:

data: [{
        x: 1499516102000,
        y: 23.375
    }, {
        x: 1499516402000,
        y: 23.312
    }, {
        x: 1499516702000,
        y: 23.312
    }, {
        x: 1499517002000,
        y: 23.25
    }
]

Now your xAxes will be with numbers, so you can use a callback to modify xAxes labels.

That advice isn’t quite right. The javascript moment.js makes it possible to plat scatter data using dates as the x axis value. For some reason the bundled version in Chart.bundle.js wasn’t working for me, so I downloaded moment.js directly. I’m using this to setup:

<script src="js/moment.js"></script>
<script src="js/Chart.min.js"></script>

and this for my chart.js data details:

data: [
  {x: moment("2017-07-08T06:15:02-0600"), y: 23.375},
  {x: moment("2017-07-08T06:20:02-0600"),y: 23.312},
  {x: moment("2017-07-08T06:25:02-0600"),y: 23.312},
  {x: moment("2017-07-08T06:30:02-0600"),y: 23.25}
],

It’s working great!

Another solution that worked great for me, was to just use the line type for the chart, configure it for using dates for the x axis, and addtionally disable the lines, so that it just looks like a scatterplot.

new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                x: 2017-07-08T06:15:02-0600,
                y: 23.375
              },{
                x: 2017-07-08T06:20:02-0600,
                y: 23.312
              },{
                x: 2017-07-08T06:25:02-0600,
                y: 23.312
              },{
                x: 2017-07-08T06:30:02-0600,
                y: 23.25
            }]
          },
          options: {
            showLine: false,
            scales: {
              x:{
                type: 'time',
                display: true,
                title: {
                  display: true,
                  text: 'Date'
                },
              },
            }
          }
       }
    );

I see this as a quite elegant solution. The documentation even specifies:

The scatter chart supports all of the same properties as the line chart. By default, the scatter chart will override the showLine property of the line chart to false.

I couldn’t find a working example from these answers, so here’s mine.

new Chart(document.getElementById("chart"), {
    type: "line",
    data: {
      datasets: [
        {
          showLine: false,
          fill: false,
          data: [
            {
              x: new Date(Date.now()),
              y: 100,
            },
            {
              x: new Date(Date.now() + 1000 * 60 * 60),
              y: 200,
            },
            {
              x: new Date(Date.now() + 2000 * 60 * 60),
              y: 300,
            },
            {
              x: new Date(Date.now() + 3000 * 60 * 60),
              y: 400,
            },
          ],
        },
      ],
    },
    options: {
      plugins: {
        legend: {
          display: false,
        },
        title: {
          text: "Chart.js Time Scale",
          display: true,
        },
      },
      scales: {
        x: {
          type: "time",
          time: {
            unit: "hour",
            // Luxon format string
            // tooltipFormat: "DD T",
          },
          title: {
            display: true,
            text: "Hour",
          },
        },
        y: {
          title: {
            display: true,
            text: "value",
          },
        },
      },
    },
 });

I pulled it from here: https://www.chartjs.org/docs/latest/samples/scales/time-line.html

You’ll need to install momentjs and its adapter:
npm install moment chartjs-adapter-moment --save

..and then import all libraries like

import Chart from "chart.js/auto";
import "chartjs-adapter-moment";