Chart.js のv3.5.1を使ったら、使い方が少し変わっていたので注意する点

最近、Unityの記事ばかりでしたが（笑）それ以外も。

Javascriptでのグラフ描画で大変お世話になるChart.js。皆さん使っていますか？

https://www.chartjs.org/

久しぶりにこれを使ってグラフを描いたのですが、どのバージョンからから？少しだけオプション周り指定が変わっていました。巷では古い指定方法ばかりが記事として上がってくるので、ここにまとめておきます。

Contents

1 CDNで読み込み
2 HTMLタグの記載
3 Javascript
4 上記の表示サンプル
5 違いは？
- 5.1 options周りが変わってました

CDNで読み込み

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

このあたりは変化なし。

HTMLタグの記載

<div>
  <canvas id="myChart"></canvas>
</div>

ここも変化なし。

Javascript

const CHART_COLORS = {
    red: 'rgb(255, 99, 132)',
    orange: 'rgb(255, 159, 64)',
    yellow: 'rgb(255, 205, 86)',
    green: 'rgb(75, 192, 192)',
    blue: 'rgb(54, 162, 235)',
    purple: 'rgb(153, 102, 255)',
    grey: 'rgb(201, 203, 207)'
};

const data = {
    labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
    datasets: [
        {
            label: 'Dataset',
            data: [30, 30, 20, 10, 10],
            backgroundColor: Object.values(CHART_COLORS),
        }
    ]
};

const config = {
    type: 'doughnut',
    data: data
};

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, config);

ざっくりこんな感じ。

ドキュメントだと、onreadyイベント内に書かれていないので、HTMLタグよりも後ろにJSを置いてあげる必要がありますが、onready内で書く場合は特に意識する必要はありません。

上記の表示サンプル

ここまでは従来どおりです（笑）

違いは？

では、なにが変わったのか？

options周りが変わってました

従来、凡例表示をカットしようと思うと、

const config = {
    type: 'doughnut',
    data: data,
    options: {
         legend: {
            display: false
         }
    }
};

こんなソースだったのですが、これが動かず。

const config = {
    type: 'doughnut',
    data: data,
    options: {
        plugins: {
            legend: false
        },
    },
};

pluginsの中で指定するようになっていました。

ツールチップの非表示についても同様に、plugins配下で行うようになっていましたので、他のオプション周りも色々と変わっていそうな予感です。

あれ、オプションが効かない？そんな時は最新のドキュメントを参考にしてみてください。

https://www.chartjs.org/docs/next/