Chart.js の時間軸を使おうとしてコケたところ

大学院生の備忘録シリーズ 第二弾

Chart.jsの時間軸を使おうとしたらエラーを吐かれました

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

options.scales[scaleID]

type: 'time',
time: {
    unit:'day',
    displayFormats: {
        day: 'MM/DD'
    },
},

コード的には問題なさそう．type:'time'を外すとエラーなしに通る．

色々調べて参考にしたのは次のページ，全く同じ症状でした．

chart.js で TimeScale の使い方

どうやらchart.js単体では時間軸を扱えないらしい．

3.x Migration Guide #Setup and installation | Chart.js

公式ドキュメントにも書いてあった．

結論

時間を扱うライブラリーとadapterライブラリーを読み込まないといけないらしい．

今回はCDNを利用するのでMoment.js，chartjs-adapter-momentのふたつをjsDelivrで検索してhtmlに貼り付けます．

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/combine/npm/moment@2.29.1,npm/chartjs-adapter-moment@1.0.0"></script>

無事使えるようになりました