[Chartjs]-Line Chart Js x-axis values all 0 on React

by

0👍

✅

You are defining the x axis scale as an array , this is v2 syntax. All scales have to be defined as an object. So at the moment chart.js sees your scale as a category scale instead of a time scale and it cant handle number inputs as labels.

To fix this you will need to change your scale like so:

scales: {
  x: {
    type: "time",
    time: {
      format: "MM/DD/YY",
      tooltipFormat: "ll",
    },
    ticks: {
      display: false,
    }
  },
  ,
}

For using the timescale you will also need a date adapter, since you are using js dates you can just use the normal datefns adapter like so:

npm install date-fns chartjs-adapter-date-fns --save

import {Line} from "react-chartjs-2"
import 'chartjs-adapter-date-fns';

Leave a comment