TimeSeries scale in ChartJS 3.0.2. brings error "This method is not implemented: either no adapter can be found or an incomplete integration was ..."

user_15589822 0
Viewed 15628

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

chart.js3 chart.js
5 Answers

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

user_136029090

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

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>
user_114813120
user_86829830

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, 
        },
      }, 
    }
  },
  ... 
}
user_150145210

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

scales: {
  x: [{
    type: 'time'
  }]
}
user_173236660
Related