31

I upgraded to the newest Chart.JS version 3.0.2. and I'm trying to get a time series chart to render. Here is my config:

{
  type: 'line',
  data: {
    datasets: [{
      data: dataForChart
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time'
      }
    }
  }
}

I have imported the module like this:

import ChartJS from 'chart.js/auto';

The error I'm getting is:

Error: This method is not implemented: either no adapter can be found or an incomplete integration was provided.

Any tips on what I could be making wrong?

Here is a code sandbox with that problem: https://codesandbox.io/s/throbbing-cdn-j6q2u?file=/src/App.js

uminder
  • 23,831
  • 5
  • 37
  • 72
Alexander Peiniger
  • 319
  • 1
  • 3
  • 4

5 Answers5

40

You need to install and import an adapter, in your case it's moment adapter for time series

npm install moment chartjs-adapter-moment --save

then import it in your component: import 'chartjs-adapter-moment';

for more info about adapters, check this

mahmoudayoub
  • 586
  • 4
  • 6
15

This answer comes a bit late but for everyone who stumbles here: You need a date adapter. Find a full list here

Once you installed i.e. date-fns via npm install date-fns chartjs-adapter-date-fns --save in your root directory you have to do two things to make it work in your React project:

  1. Add this at the top of your file import 'chartjs-adapter-date-fns'; and import { enUS } from 'date-fns/locale';
  2. Inside your options:
options = {
  ... 
  scales: {
    x: {
      type: 'time',

      // add this: 
      adapters: { 
        date: {
          locale: enUS, 
        },
      }, 
    }
  },
  ... 
}
Gregoire Ducharme
  • 1,095
  • 12
  • 24
Dorbn
  • 277
  • 4
  • 11
12

You need an adaptor as stated above. Look here: https://github.com/chartjs/chartjs-adapter-date-fns#cdn

One option is to add the following cdn links:

<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
   
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
Gregoire Ducharme
  • 1,095
  • 12
  • 24
Zekarias
  • 121
  • 1
  • 3
4

As stated in your error and the documentation you need an adapter to convert the dates to date objects, see documentation: https://www.chartjs.org/docs/latest/axes/cartesian/time.html#date-adapters

LeeLenalee
  • 27,463
  • 6
  • 45
  • 69
0

I think you should put list in x like below code.

scales: {
  x: [{
    type: 'time'
  }]
}
SecretAgentMan
  • 2,856
  • 7
  • 21
  • 41
SOKURI_CODE
  • 1
  • 1
  • 3
    This wont fix the issue, this is the correct way to specify the x axis as a time axis in V2, in V2 a date adapter was already provided by chart.js but since he is getting that error he is using v3. In v3 there is no date adapter and library shipped by default and scale config has changed. So this wont fix the issue, only thing that this does is make the x axis a category scale again – LeeLenalee Nov 05 '21 at 13:48