chart.jsで軸の数値を3桁ごとにカンマ区切りにする方法

chart.jsでグラフの軸に数値を表示する場合、桁数が多くても3桁ごとのカンマ区切りがなく非常に見ずらいということがありました。数値の桁数が多い場合は3桁ごとにカンマ区切りにしないと可読性が低くなるため、chart.jsで3桁ごとにカンマ区切りで数値を表示する方法を紹介します。

例）30000000 ⇒ 30,000,000

chart.jsの標準機能では数値3桁ごとのカンマ区切りはできない

chart.jsの標準機能ではカンマ区切りはできないため、カンマ区切りにしてくれる関数を定義してコールバックに設定することで実現する必要があります。具体的には下記コードのように、コールバック関数を定義してチャート生成時のoptions->scales->Axes->ticks->userCallbackにこのコールバック関数を指定します。

// 数値をカンマ区切りするコールバック用関数
function thousandsSeparator(value, index, values) { 
 value = value.toString().split(/(?=(?:...)*$)/).join(',');
 return value;
}

// グラフの生成
var ctx = $('#canvas');
chart = new Chart(ctx, {
 type:...,
 data:...,
 options:{
  scales: {
   Axes: [{
    stacked: true,
    ticks: {
     beginAtZero:true,
     userCallback: thousandsSeparator //カンマ区切りのコールバック関数を指定
    }
   }]
  }
 }
});

実際に作ったグラフのサンプルはこのようになります。