【Chart.js】軸・ラベル・グリッド・目盛の設定

スポンサーリンク
ビッグバナー(上2)

この記事では、Javascriptライブラリ「Chart.js」でグラフの軸・ラベル・グリッド・目盛の色や大きさ等を設定する方法をソースコード付きでまとめました。

背景を黒くする

Chart.jsでは、グラフの軸・ラベル・グリッド・目盛の色やフォントサイズなどを細かく設定できます。

ソースコード

サンプルプログラムのソースコードです。
【Javascript(main.js)】

Chartクラスのoptions > animationでfalseを指定するとアニメーションを無効化できます。

パラメータ 内容
options : scales : xAxesgridLines : color x軸方向のグリッド色
options : scales : yAxesgridLines : color y軸方向のグリッド色
options : scales : xAxesgridLines :ticks : fontColor x軸ラベルの目盛のフォントサイズ
options : scales : yAxesgridLines :ticks : fontColor y軸ラベルの目盛のフォントサイズ
options : scales : xAxesgridLines :ticks : fontSize x軸ラベルの目盛のフォント色
options : scales : yAxesgridLines :ticks : fontSize y軸ラベルの目盛のフォント色

【HTML(index.html)】

【CSS(style.css)】

実行結果

サンプルプログラムの実行結果です。
サンプルデモページ

【関連記事】
Chart.js入門 グラフ・チャート作成
Javascript入門

スポンサーリンク
レクタングル(下2)
レクタングル(下2)

シェア&フォローお願いします!