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 ..."

Question

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

Answer 1

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

Answer 2

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>