【Chart.js】htmlとjavascriptでローソク足を表示する

Webページでローソク足を表示する時に詰まったので使えたのでメモしておきます。

で、結論から言うと以下のサイトを参考にすればできます。

https://github.com/chartjs/chartjs-chart-financial/tree/master/docs

これはChart.jsのプラグイン？的なchartjs-chart-financialというライブラリで、ローソク足を実現できます。

使い方は簡単でgithubの中にあるindex.htmlを見るとわかりますが、html側でchartjs-chart-financial.js読み込みます。

後は通常のChart.jsと同様にjavascript側で、以下のように書いてあげます。

    var chart = new Chart(ctx, {
        type: 'candlestick',
        data: {
            datasets: [
                {
                label: 'Chart',
                data: candles,   // candlesは[{t:time, o:open, h:high, c:close, l:low}]
                }
            ]
        },
        options: {
            responsive: true,
            elements: {
                point: {
                    radius: 0
                }
            }
        }

typeにcandlestickを指定することローソク足を指定できます。

また、与えるデータですが、[{t:time, o:open, h:high, c:close, l:low}, …]といった形になります。

各要素がハッシュ(pythonで言えば辞書型)の配列で与えます。

また、timeにはjavascriptでdate関連を扱えるLuxonを用います。

ここに関しては公式のサンプルコードを参照いただければと思います。