コピペでOK！Chart.js の数字を３桁カンマで表示する方法

こんにちは❗フリーランス・コンサルタント＆エンジニアの九保すこひです。

X（Twitter）やってます！
📝 九保すこひ@フリーランスエンジニア｜累計300万PVのブログ運営中

現在、データをグラフ化する開発でchart.jsというJavaScriptパッケージを使っています。

このchart.js、MITライセンで配布されてるにもかかわらずとても使い勝手がいいんで、JavaScriptをで、グラフを描くといえばもはやデファクトスタンダードといってもいいんじゃないかと思うほどの出来栄えです。

しかし、ホントにいい時代になりました。
過去にも同様の開発は行ったことがあるんですけど、今のように JavaScript 全盛の時代じゃなかったんで、PHPのGDを使っているグラフを作っていたのを思い出しました（笑）

ちなみにChart.jsが初見の方は下のリンクからサンプルを見ることができますよ！

※他にもいろんなタイプのグラフに対応してます。一覧はこちら

1 さて、ここから本題です。
2 １．Y軸の数字を３桁カンマ区切りにする
3 ２．ツールチップの数字を３桁カンマ区切りにする
4 ３．コピペ用、完全版（Y軸＆ツールチップを３桁カンマ区切りにする）
5 ちなみに

さて、ここから本題です。

まず、chart.jsでは数字データを設定し、それがグラフになるわけですけど、実はデフォルトだと数字がまんま表示されちゃうんで、金融機関勤めをしていた私（←逃げるように転職しましたが^^;）としてはちょっと気持ち悪いわけです。

つまり、もし100万円の売上を表示したい場合、Y軸やツールチップには、

1000000円

と表示されるんですけど、いち、じゅう、ひゃく、せん・・・・・・いや、カンマふれよ（大汗）

ってなってしまいます。
なので、これを

1,000,000円

にするテクニックを紹介したいと思います。

では、実際のコードで実現方法を紹介しましょう！

１．Y軸の数字を３桁カンマ区切りにする

chart.jsにはオプションでY軸の詳しい設定ができるんですけど、その中にcallbackというオプションがあるんで、ここに文字列をカスタマイズするコードを挿入します。

（実際のコードはこちら）

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
    <script>

        var canvas = document.getElementById('canvas');
        new Chart(canvas, {
            type: 'line',
            data: {
                datasets: [
                    {
                        label: '売上',
                        data: [1000000, 7000000, 3000000]
                    }
                ],
                labels: ['前々月', '前月', '今月']
            },
            options: {
                scales: {
                    xAxes: [
                        {
                            ticks: {}
                        }
                    ],
                    yAxes: [
                        {
                            ticks: {
                                min: 0,
                                max: 10000000,
                                stepSize: 5000000,
                                callback: function(label, index, labels) { /* ここです */

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

                                }
                            }
                        }
                    ]
                }
            }
        });

    </script>

実際の例はこちら

中身としては、コールバックに第一引数としてY軸の数字がやってくるんで、これを正規表現を使って、３桁ずつカンマで区切るという流れになっています。

また、このコールバックの中で「円」や「％」「件」などの単位を追加することもできます。
お好みに合わせて変更してみてください。

２．ツールチップの数字を３桁カンマ区切りにする

これも基本的なやりかたは一緒ですけど、設定する場所がtooltipsという場所になります。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
    <script>

        var canvas = document.getElementById('canvas');
        new Chart(canvas, {
            type: 'line',
            data: {
                datasets: [
                    {
                        label: '売上',
                        data: [1000000, 7000000, 3000000]
                    }
                ],
                labels: ['前々月', '前月', '今月']
            },
            options: {
                tooltips: { /* ここです */
                    callbacks: {
                        label: function(tooltipItem, data){

                            return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 円';

                        }
                    }
                }
            }
        });

    </script>

実際の例はこちら

３．コピペ用、完全版（Y軸＆ツールチップを３桁カンマ区切りにする）

Y軸とツールチップを両方とも３桁カンマ区切りにするコードはこちら。
コピペ用です。

    
    <canvas id="canvas" width="600" height="400"></canvas>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
    <script>

        var canvas = document.getElementById('canvas');
        new Chart(canvas, {
            type: 'line',
            data: {
                datasets: [
                    {
                        label: '売上',
                        data: [1000000, 7000000, 3000000]
                    }
                ],
                labels: ['前々月', '前月', '今月']
            },
            options: {
                scales: {
                    xAxes: [
                        {
                            ticks: {}
                        }
                    ],
                    yAxes: [
                        {
                            ticks: {
                                min: 0,
                                max: 10000000,
                                stepSize: 5000000,
                                callback: function(label, index, labels) {

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

                                }
                            }
                        }
                    ]
                },
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data){

                            return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 円';

                        }
                    }
                }
            }
        });

    </script>