ngx-chartjsでtimeスケールを使おうとすると、adapterが必要とのエラー

公式のコードサンプルでは X 軸はカテゴリスケールになっている。

https://github.com/scttcper/ngx-chartjs#use

import {
  // 省略
  CategoryScale,
  LinearScale,
  // 省略
} from 'chart.js';
Chart.register(BarController, BarElement, CategoryScale, LinearScale, Title, Tooltip, Legend);

// 省略

const data: ChartData = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  // 以下略

X 軸が時系列の折れ線グラフにしたかったので、下記の通り変更。

import {
  Chart,
  LineController,
  LineElement,
  PointElement,
  LinearScale,
  TimeScale,
  Tooltip,
} from 'chart.js';
Chart.register(LineController, LineElement, PointElement, LinearScale, TimeScale, Tooltip);

// データは下記のように Unix タイムスタンプ(ミリ秒) をセット
    const data = this.records.map(record => {
      return {
        x: moment(record.date).valueOf(),
        y: record.value,
      }
    });

ただ、これだけだと実行時にエラーになる。

zone.js:1061 Unhandled Promise rejection: This method is not implemented: Check that a complete date adapter is provided. ; Zone: <root> ; Task: Promise.then ; Value: Error: This method is not implemented: Check that a complete date adapter is provided.
    at abstract (chart.mjs:4151:9)
    at DateAdapter.formats (chart.mjs:4159:12)
    at TimeScale.init (chart.mjs:10406:42)
    at chart.mjs:5601:13
    at each (helpers.segment.mjs:60:12)
    at Chart.buildOrUpdateScales (chart.mjs:5579:9)
    at Chart._updateScales (chart.mjs:5726:10)
    at Chart.update (chart.mjs:5687:10)
    at new Chart (chart.mjs:5476:12)
    at ctrl-ngx-chartjs.mjs:36:34 Error: This method is not implemented: Check that a complete date adapter is provided.
    at abstract (http://localhost:4200/vendor.js:202509:9)
    at DateAdapter.formats (http://localhost:4200/vendor.js:202520:12)
    at TimeScale.init (http://localhost:4200/vendor.js:210870:98)
    at http://localhost:4200/vendor.js:204396:13
    at each (http://localhost:4200/vendor.js:211549:12)
    at Chart.buildOrUpdateScales (http://localhost:4200/vendor.js:204370:67)
    at Chart._updateScales (http://localhost:4200/vendor.js:204576:10)
    at Chart.update (http://localhost:4200/vendor.js:204511:10)
    at new Chart (http://localhost:4200/vendor.js:204234:12)
    at http://localhost:4200/vendor.js:186409:29

Chart.js のドキュメントを見ると「Date ライブラリ」と「対応する Adapter」が必要とのこと。

https://www.chartjs.org/docs/latest/axes/cartesian/time.html#date-adapters

元々 Moment.js を使っていたので、npm install chartjs-adapter-moment し、app.module.ts でインポート。

import {
  Chart,
  LineController,
  LineElement,
  PointElement,
  LinearScale,
  TimeScale,
  Tooltip,
} from 'chart.js';
Chart.register(LineController, LineElement, PointElement, LinearScale, TimeScale, Tooltip);
import 'chartjs-adapter-moment';

ようやく表示できた。