[Chartjs]-Time Series Line chart js in react not working

by

11👍

✅

This also won’t work in normal is, this is because your scale config is in V2 style while you are using V3.

In v3 every scale is its own object where the key is the scale ID so there are no more arrays. Changing your config to this will make it work:

options: {
  scales: {
    x: {
      type: 'time'
    }
  }
}

EDIT:
You also need to import and register the time scale and not the category scale for the x axis.

Working sandbox

import {
  Chart as ChartJS,
  TimeScale, //Import timescale instead of category for X axis
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from "chart.js";
import { Chart } from "react-chartjs-2";

ChartJS.register(
  TimeScale, //Register timescale instead of category for X axis
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

Leave a comment