2

I am trying to get the time scale (x axis) work with date-fns adapter and getting "error" for chartjs-adapter-date-fns which could be the issue:

Could not find a declaration file for module 'chartjs-adapter-date-fns'. 'C:/react/envirodata/node_modules/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.js' 
implicitly has an 'any' type.
Try `npm i --save-dev @types/chartjs-adapter-date-fns` if it exists or add a new declaration  (.d.ts) file containing `declare module 'chartjs-adapter-date-fns';`ts(7016)

My setup is like this:

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

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


ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend, 
  zoomPlugin
);

and the options are like this:

plugins: {
  scales: {
    x: {
        type: 'time',  
        adapters: {
          date: {
              locale: en
          }
        ...

I have tried different date formats for time scale. For example:

  1. labels : [20220224, 20220225...]
  2. data : [{x: 1617253200000, y: 1}, ...]
  3. data : [{x: 2022-02-24, y: 1}, ...]

But nothing seems to work and dates are displayed like as a string. So apart from the chartjs-adapter-date-fns, I am not sure if there is not an issue with setup.

koubin
  • 579
  • 5
  • 9
  • 30
  • @types/chartjs-adapter-date-fns does not exist from public repo. I was able to get rid of this error by creating a file `types.d.ts` in my project directory with one line `declare module 'chartjs-adapter-date-fns';` – Hieu Pham Jul 10 '22 at 04:42

1 Answers1

0

import TimeScale from 'chart.js' instead of CategoryScale

Ian Myers
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – jasie Sep 16 '22 at 06:24