Edited at

Chart.jsで数値を3桁区切りにする方法(Typescript.ver)

業務でChart.jsを使用している際に、グラフの数値を3桁区切りにする方法が

Typescriptの書き方でなかなか出てこなく、結構な工数を使ってしまったので、

メモ程度にこちらに記載しようと思います。。。笑

ちなみにjavascriptでの書き方は以下のような感じになります。

https://blog.capilano-fw.com/?p=235

javascriptではこんな感じでchart_optionのy軸の設定でcallbackを指定すれば簡単に3桁区切りで

グラフの数値が表示されるようになります!

yAxes: [

{
ticks: {
min: 0,
max: 10000,
callback: function(label, index, labels) {
return label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 円';
}
}
}
]

ではTypescriptで上記のcallbackを書くとなるとどのような書き方になるのでしょうか?

Typescriptはアロー関数が使用できるので、以下のように記載することになります。

callback: (label: string) => {return label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 円';}}

Typescriptの方がスッキリかけますね!!