react-chartjs-2 time adapters, "time" is not a registered scale

Question

i tried to import the time adapters to my ReactJS project but look like it's not working. I wasn't able to configure Chart.js to work with 'chartjs-adapter-date-fns'. My code is below.

I imported them like this:

import {
  Chart as ChartJS,
  LinearScale,
  PointElement,
  Tooltip,
  Legend,
} from "chart.js";
import "chartjs-adapter-date-fns";
import { Bubble } from "react-chartjs-2";

ChartJS.register(LinearScale, PointElement, Tooltip, Legend);

The configurations of the Chart:

  const data = {
    datasets: [
      {
        label: "TheDataset1",
        data: theDataArray1,
        backgroundColor: "#782D2D",
      },
    ],

const options = {
    scales: {
      x: {
        type: "time",
      },
      y: {
        beginAtZero: true,
      },
    },
  };

This is how I deployed to ReactDOM:

<Bubble options={options} data={data} />

When I remove time type from options the error is goes away and I see the milliseconds epoch in X axis. And when I add the time type console.log gives this errors and my content is not rendering it self.

>Error 1:
Uncaught Error: "time" is not a registered scale.

>Error2:
he above error occurred in the <ForwardRef(ChartComponent)> component:

>Error3:
Uncaught Error: "time" is not a registered scale.

score 29 · Accepted Answer · answered Sep 11 '22 at 08:12

Fixed with importing "TimeScale" from Chart.js module. Then added TimeScale argument to Chart.register function. At the end:

import {Chart, LinearScale, PointElement, Tooltip, Legend, TimeScale} from "chart.js"; 

ChartJS.register(LinearScale, PointElement, Tooltip, Legend, TimeScale);

These fixed everything.

react-chartjs-2 time adapters, "time" is not a registered scale

1 Answers1