とほほのChart.js入門

• トップ
• とほほのChart.js入門

• コンフィグ
  • データ(data)
    • データセット(data.datasets)
      • パーシング(data.datasets.parsing)
      • データ(data.datasets.data)
  • オプション(options)
    • エレメント(options.element)
    • データセット(options.datasets)
      • ラインスタイル(options.datasets.line)
      • ポイントスタイル(options.datasets.point)
      • バースタイル(options.datasets.bar)
      • アークスタイル(options.datasets.arc)
      • 円チャートスタイル(options.datasets.pie)
    • レイアウト(options.layout)
    • プラグイン(options.plugins)
      • 凡例(レジェンド)(options.plugins.legend)
        • 凡例ラベル(options.plugins.legend.labels)
        • 凡例タイトル(options.plugins.legend.title)
      • チャートタイトル(options.plugins.title)
      • ツールチップ(options.plugins.tooltip)
      • デシメーション(間引き)(options.plugins.decimation)
      • 塗りつぶし(options.plugins.filler)
    • スケール(options.scales)
      • スケール・時間軸(options.scales.scaleID.time)
      • スケール・目盛ラベル(options.scales.scaleID.ticks)
      • スケール・グリッド(options.scales.scaleID.grid)
      • スケール・タイトル(options.sclaes.scaleID.title)
      • スケール・角度線(options.scales.scaleID.angleLines)
      • スケール・ポイントラベル(options.scales.scaleID.pointLabels)
    • アニメーション(options.animation)
    • アニメーションズ(options.animations)
    • トランジション(options.transitions)
    • インタラクション(options.interaction)
• チャート(Chart)
  • デフォルト値(Chart.defaults)
• 色・フォント・パディング
  • 色
  • フォント
  • パディング

コンフィグ

• params

属性	型	説明
type	string	チャート種別。'line'(線チャート), 'bar'(棒チャート), 'radar'(ラダーチャート), 'doughnut'(ドーナッツチャート), 'pie'(パイチャート), 'polarArea'(鶏頭図チャート), 'bubble'(バブルチャート), 'scatter'(散布図) のいずれかで指定。
data	object	データ。
options	object	オプション。
plugins	object[]	カスタムプラグイン。(→ 詳細)

データ(data)

• data.params

属性	型	説明
labels	string[]	ラベル
datasets	object[]	データセット。

{
  type: 'line',
  data: {
    labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    datasets: [{
      label: "Sample Data",
      data: [2, 12, 16, 10, 12, 11, 3]
    }]
  }
}

データセット(data.datasets)

• data.datasets[].params

属性	型	説明
type	string	チャート種別。'line'(線チャート), 'bar'(棒チャート), 'radar'(ラダーチャート), 'doughnut'(ドーナツチャート), 'pie'(パイチャート), 'polarArea'(鶏頭図チャート), 'bubble'(バブルチャート), 'scatter'(散布図) のいずれかで指定。
label	string	データセットのラベル
data	list | object	データ。
order	number	描画が重なった場合どちらを上に表示するかを指定。数値の小さいほうが上に表示される。
hidden	boolean	線やポイントを隠すか否か。デフォルトは false。
showLine	boolean	線を描画するか否か。デフォルトは true。
clip	number | object	正の数値はラインやポイントをチャート領域から数値分はみ出しても表示する。負の数値は数値分内側の部分まで表示する。{top:10, right:20, bottom:30, left:40} の様に指定することも可。
indexAxis	string	Y軸に対してX軸が変動量となるグラフを描画する場合 'y' を指定。
xAxisID	string	X軸のスケールID(scaleID)。
yAxisID	string	Y軸のスケールID(scaleID)。
parsing	boolean | object	データセットの解析方法。データセットのキー名。false を指定した場合はチャート形式が期待する形式でデータセットを設定する必要がある。
line	...	ラインスタイル。
point	...	ポイントスタイル。
bar	...	バースタイル。
arc	...	アークスタイル。
doughnuts	...	ドーナツチャートスタイル。
pie	...	パイチャートスタイル。

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Sun', 'Mon', 'Tue'],
    datasets: [{
      label: 'Red',
      data: [20, 35, 40],
    }, {
      label: 'Green',
      data: [20, 15, 30],
    }, {
      label: 'Blue',
      data: [30, 25, 15],
    }],
  },
});

パーシング(data.datasets.parsing)

• data.datasets[].parsing.params

属性	型	説明
xAxisKey	string	X軸に描画するデータのキー。
yAxisKey	string	Y軸に描画するデータのキー。

var data = [
  {x: 'Sun', red: 20, green: 20, blue: 30},
  {x: 'Mon', red: 35, green: 15, blue: 25},
  {x: 'Tue', red: 40, green: 30, blue: 15},
];
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Sun', 'Mon', 'Tue'],
    datasets: [{
      label: 'Red',
      data: data,
      parsing: {yAxisKey: 'red'},
    }, {
      label: 'Green',
      data: data,
      parsing: {yAxisKey: 'green'},
    }, {
      label: 'Blue',
      data: data,
      parsing: {yAxisKey: 'blue'},
    }],
  },
});

データ(data.datasets.data)

• data.datasets[].data

data: [10, 20],
data: [{x:10, y:10}, {x:20, y:20}],
data: [{x:'Sun', red:10, green:20, blue:30}, {x:'Mon', red:20, green:30, blue:40}],
data: {Jan: 10, Feb: 20},
data: [{a: 10, b: {c: 10}, {a: 20, b: {c: 20}}],

オプション(options)

• options.params

属性	型	説明
elements	object	エレメント。
layout	object	レイアウト。
plugins	object	プラグイン。
scales	object	スケール。
animation	object	アニメーション。
animations	object	アニメーションズ。
transitions	object	トランジション。
locale	string	BCP 47(RFC 5646)で定義される言語情報。
interaction	object	インタラクション。
events	string[]	キャッチするイベントリスト。デフォルトは ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']。
onHover	function	ホバー時のコールバック関数。
onClick	function	クリック時のコールバック関数。
devicePixelRatio	number	デフォルトの devicePixelRatio を上書きする。(→ MDN)
responsive	boolean	コンテナがリサイズされた場合にチャートもリサイズするか否か。デフォルトは true。
maintainAspectRatio	boolean	リサイズの際、オリジナルのキャンバスの縦横比を維持するか否か。デフォルトは true。
aspectRatio	number	チャートの縦横比。X-Yグラフのデフォルトは2。円グラフ系のデフォルトは1。
onResize	function	リサイズの際に呼び出されるコールバック関数。
resizeDelay	number	チャートをリサイズするまでの遅延時間(ミリ秒)。

エレメント(options.element)

• options.elements.params

属性	型	説明
line	object	ラインスタイル。
point	object	ポイントスタイル。
bar	object	バースタイル。
arc	object	アークスタイル。

データセット(options.datasets)

→ データセット(data.datasets)

ラインスタイル(options.datasets.line)

• data.datasets[].params
• options.datasets.line.params
• options.elements.line.params
• options.params
• Chart.defaults.elements.line.params

属性	型	説明
backgroundColor	Color	背景色。
borderCapStyle	string	キャップスタイル。線の終端をどのように表示するかを 'butt', 'round', 'square' のいずれかで指定。デフォルト値は 'butt' で四角で終端。(→ MDN)
borderColor	Color	線の色。
borderDash	Color	点線の描画方法。[3, 5] は長さ3の実践と長さ5の隙間を繰り返す。[10, 3, 5, 3] は 10の実践、3の隙間、5の実践、3の隙間のパターンを繰り返す。(→ MDN)
borderDashOffset	number	点線のオフセット。(→ MDN)
borderJoinStyle	string	折れ線接続部の描画方法を 'round'(丸), 'bevel'(鋭角), 'miter'(留め継ぎ:デフォルト) のいずれかで指定。(→ MDN)
borderWidth	number	線の太さ(ピクセル)。デフォルトは3。
capBezierPoints	boolean	ベジェ曲線を描く際に、グラフの外にはみ出さないように制御するか否かを指定。デフォルトは true(制御する)。
cubicInterpolationMode	string	補完アルゴリズム。'default' は全種類のデータセットに対して適切なカーブを描くカスタム加重キュービック補完を行う。'monotone' を指定すると、y = f(x) 形式のデータセットに適した、データの単調性を維持するものになる。
fill	boolean | number | string | object	塗りつぶしルール。true は塗りつぶす、false は塗りつぶさない。0, 1, 2 の数値は、そのインデックスに対応するデータセットとの差分部分を塗りつぶす。'+1' や '-1' は対象データセットのインデックスを相対的に指定。'start' は下側を塗りつぶし、'end' は上側を塗りつぶし、'origin' は値0との差分を、{value: 25} は値25との差分を塗りつぶす。
spanGaps	boolean | number	true を指定すると、途中にデータの欠損があっても、欠損の両側のデータ間を線で結ぶ。
stepped	boolean	階段状のグラフを描画。false(階段状にしない), true(階段状にする), 'before'(ポイントの直前で上下), 'after'(ポイントの直後で上下), 'middle'(ポイントの中間で上下) のいずれか。true は 'before' と同じ意味。デフォルトは false。
tension	number	線グラフをベジェ曲線で描く場合の線の張りを 0.3 などの数値で指定。デフォルトは0。
segment	object	boder* や backgroundColor をパラメータに持つオブジェクトを指定。それぞれのパラメータは関数型で、ラインの色や点線情報などを返す。(→ 詳細)

属性	型	説明
hoverBackgroundColor	Color	ホバー時の背景色
hoverBorderCapStyle	string	ホバー時のキャップスタイル(線の終端の形)。'butt', 'round', 'square' のいずれか。
hoverBorderColor	Color	ホバー時のボーダー色。
hoverBorderDash	number[]	ホバー時の点線の描画方法。
hoverBorderDashOffset	number	ホバー時の点線のオフセット。
hoverBorderJoinStyle	string	ホバー時の折れ線接続部の描画方法。
hoverBorderWidth	number	ホバー時の線の太さ。

ポイントスタイル(options.datasets.point)

• data.datasets[].params
• options.datasets.point.params
• options.elements.point.params
• options.params
• Chart.defaults.elements.point.params

属性	型	説明
pointStyle	string | Image	ポイントスタイル。'circle'(円), 'cross'(十字), 'crossRot'(×印), 'dash'(半線), 'line'(横線), 'rect'(矩形), 'rectRounded'(角丸矩形), 'rectRot'(菱形), 'star'(星), 'triangle'(三角)。もしくは ImageBitmap() の第一引数に指定するイメージを指定。(→ MDN)
backgroundColor	Color	背景色。
pointBackgroundColor	Color	同上。
borderColor	Color	ボーダー色。
pointBorderColor	Color	同上。
borderWidth	number	ボーダーの太さ。デフォルトは1。
pointBorderWidth	number	同上。
radius	number	ポイントの半径。0を指定するとポイントを表示しない。
pointRadius	number	同上。
rotation	number	ポイントを時計方向に回転させる角度を度数で指定。
pointRotation	number	同上。
hitRadius	number	ホバーを検出する範囲の追加半径。デフォルトは1。
pointHitRadius	number	同上。
hoverBorderWidth	number	ホバー時のポイントのボーダーの太さ。デフォルトは1。
hoverRadius	number	ホバー時のポイントの半径。デフォルトは4。

属性	型	説明
pointHoverBackgroundColor	Color	ホバー時のポイントの背景色。
pointHoverBorderColor	Color	ホバー時のポイントのボーダー色。
pointHoverBorderWidth	number	ホバー時のポイントのボーダーの太さ。
pointHoverRadius	number	ホバー時のポイントの半径。

バースタイル(options.datasets.bar)

• data.datasets[].params
• options.datasets.bar.params
• options.elements.bar.params
• options.params
• Chartdefaults.elements.bar.params

属性	型	説明
base	number	棒グラフの起点とする値。省略時は軸の起点。
grouped	boolean	棒グラフをグルーピングするか否かを指定。デフォルトは true(グルーピングする)。複数のデータセットの棒グラフを描画する際、グループの間では横幅を分け合うが、グルーピングしない場合は他の横幅を無視して描画される。
skipNull	boolean	null や undefined のデータを描画するか否か。
stack	string	棒グラフで積み上げグラフを表示する際の積み上げグループ名を指定。

属性	型	説明
backgroundColor	Color	背景色。
borderColor	Color	ボーダー色。
borderSkipped	string	ボーダーを描画しない方向を 'start'(開始側), 'end'(終了側), 'bottom'(下側), 'left'(左側), 'top'(上側), 'right'(右側)のいずれかで指定。
borderWidth	number	ボーダーの太さ。デフォルトは1。
borderRadius	number	ボーダーの角の丸め半径。
minBarLength	boolean	棒グラフの描画の最小の長さ(ピクセル単位)。
pointStyle	string | Image	ポイントスタイル。'circle'(円), 'cross'(十字), 'crossRot'(×印), 'dash'(半線), 'line'(横線), 'rect'(矩形), 'rectRounded'(角丸矩形), 'rectRot'(菱形), 'star'(星), 'triangle'(三角)。もしくは ImageBitmap() の第一引数に指定するイメージを指定。(→ MDN)

属性	型	説明
hoverBackgroundColor	Color	ホバー時の背景色。
hoverBorderColor	Color	ホバー時のボーダー色。
hoverBorderWidth	number	ホバー時のボーダーの太さ。
hoverBorderRadius	number	ホバー時のボーダーの角丸の半径。

属性	型	説明
barPercentage	number	棒グラフの横幅の割合を 0.0～1.0 の間で指定。1.0 を指定すると隣のデータセットと隙間なく描画される。デフォルトは 0.9。
categoryPercentage	number	カテゴリ(通常はX軸の単位)の中で棒グラフを描画する領域の割合を 0.0～1.0 の間で指定。1.0 を指定すると、となりのカテゴリと隙間なく描画される。デフォルトは 0.8。
barThickness	number | string	棒グラフの横幅(ピクセル単位)。'flex' を指定すると categoryPercentage や barPercentage から自動計算される。
maxBarThickness	number	棒グラフの最大幅(ピクセル単位)。

アークスタイル(options.datasets.arc)

• data.datasets[].params
• options.datasets.arc.params
• options.elements.arc.params
• options.params
• Chart.defaults.elements.arc.params

属性	型	説明
backgroundColor	Color	背景色。
borderAlign	string	隣り合う弧のボーダーの表示方法。デフォルトは 'center' で、ボーダーが重なり合う。'inner' を指定すると重ならずに描画される。
borderColor	Color	ボーダーの色。
borderWidth	number	ボーダーの太さ。
angle	number	Polarグラフで、ひとつの弧を描画する角度を指定。省略時は 360 をデータ個数で割った値。

円チャートスタイル(options.datasets.pie)

• data.datasets[].params
• options.datasets.doughnut.params
• options.datasets.pie.params
• options.params

属性	型	説明
rotation	number	パイチャートやドーナツチャートの円弧の開始角度を指定。デフォルトは0。
circumference	number	パイチャートやドーナツチャートの円弧の終了角度を指定。デフォルトは 360。
radius	number | string	パイチャートやドーナツチャートの半径をピクセル単位または '100%' などの文字列で指定。デフォルトは '100%'。
weight	number	データセットの相対的な厚さ。パイチャートやドーナツチャートでデータセットの重み値の合計に相対して描画される。デフォルトは1。(意味がよく分かりませんでした)
offset	number	パイチャートやドーナツチャートの各円弧間の隙間(ピクセル単位)。
hoverOffset	number	ホバー時のオフセット値(ピクセル単位)。
cutout	number | string	ドーナツチャートの中央の穴の大きさをピクセル単位または '50%' などの文字列で指定。パイチャートのデフォルトは 0。ドーナツチャートのデフォルトは '50%。
animation.animateRotate	boolean	角度方向のアニメーションを実施するか否か。デフォルトは true。
animation.animateScale	boolean	半径方向のアニメーションを実施するか否か。デフォルトは false。

レイアウト(options.layout)

• options.layout.params

属性	型	説明
padding	Padding	パディングサイズを 20 または { left: 20 } または { x: 20, y: 30 } などで指定。

プラグイン(options.plugins)

• options.plugins.params

属性	型	説明
legend	object	凡例。
title	object	タイトル。
tooltip	object	ツールチップ。
decimation	object	デシメーション(間引き)。
filler	object	塗りつぶし。

凡例(レジェンド)(options.plugins.legend)

• options.plugins.legend.params
• Chart.defaults.plugins.legend.params

属性	型	説明
display	boolean	凡例を表示するか否か。デフォルトは true。
position	string	凡例の表示位置。'top'(上部), 'left'(左側), 'bottom'(下部), 'right'(右側), 'chartArea'(チャート領域) のいずれか。デフォルトは 'top'。
align	string	凡例の表示位置。'start'(開始方向), 'center'(中央), 'end'(終了方向)のいずれか。デフォルトは 'center'。
maxHeight	number	凡例の最大の高さ(ピクセル)。
maxWidth	number	凡例の最大の横幅(ピクセル)。
fullSize	boolean	フルサイズで表示するか否か。デフォルトは true。
onClick	function	クリック時に呼ばれる関数。引数は event, legendItem, legend。
onHover	function	ホバー時に呼ばれる関数。引数は event, legendItem, legend。
onLeave	function	マウスが離れる際に呼ばれる関数。引数は event, legendItem, legend。
reverse	boolean	凡例を通常とは逆順に表示する場合に true を指定。
labels	object	凡例ラベル。
rtl	boolean	文字を右から左に書く場合に true を指定。
textDirection	string	テキストの方向。'rtl' か 'ltr' のいずれか。
title	object	凡例タイトル。

凡例ラベル(options.plugins.legend.labels)

• options.plugins.legend.labels.params

属性	型	説明
boxWidth	number	カラーボックスの横幅。
boxHeight	number	カラーボックスの高さ。
color	Color	ラベルの色。
font	Font	フォント。
padding	number	パディング。
generateLabels	function	ラベル名を生成する関数。
filter	function	ラベルをフィルタリングする関数。
sort	function	ラベルをソートする関数。
pointStyle	object	ポイントスタイル。
textAlign	string	テキストの表示位置。'left'(左側), 'center'(中央), 'right'(右側) のいずれか。デフォルトは 'center'。
usePointStyle	boolean	ポイントスタイルを使用するか否か。デフォルトは false。

凡例タイトル(options.plugins.legend.title)

• options.plugins.legend.title.params

属性	型	説明
color	Color	タイトルの色。
display	boolean	タイトルを表示するか否か。デフォルトは false。
font	Font	凡例タイトルのフォント。
padding	Padding	パディング。
text	string	凡例タイトル。

チャートタイトル(options.plugins.title)

• options.plugins.title.params
• Chart.defaults.plugins.title.params

チャート全体のタイトルを指定します。デフォルトでは表示されません。

属性	型	説明
display	boolean	チャートタイトルを表示するか否か。デフォルトは false。
text	string | string[]	チャートタイトルテキスト。
color	Color	タイトルの色。
font	Font	チャートタイトルのフォント。
padding	Padding	パディング。
align	string	チャートタイトルの表示位置。'start'(開始側), 'center'(中央), 'end'(終了側)のいずれか。デフォルトは 'center'。
position	string	チャートタイトルの表示位置。'top'(上部), 'left'(左側), 'bottom'(下部), 'right'(右側)のいずれか。デフォルトは 'top'。
fullSize	boolean	フルサイズで表示するか否か。デフォルトは true。

ツールチップ(options.plugins.tooltip)

• options.plugins.tooltip.params
• Chart.defaults.plugins.tooltip.params

属性	型	説明
enabled	boolean	ツールチップを表示しない場合は false を指定。
external	function	...
mode	string	'point'(ポイントに関する情報を表示), 'nearest'(近接データセットの情報も表示), 'index'(他データセットの情報を表示), 'dataset'(このデータセットの他のポイント情報を表示), 'x'(x軸上のデータセット情報を表示), 'y'(y軸上のデータセット情報を表示) のいずれかを指定。
intersect	boolean	true を指定するとポイントにマウスカーソルが近づいた時のみ、false を指定するとツールチップを常に表示するようになる。デフォルトは true。
position	string	'average' は各データセットの平均値の場所にツールチップを表示。'nearest' はマウスを近づけたポイント位置にツールチップを表示。デフォルトは 'average'。
callbacks	object	ツールチップコールバック。例：callbacks: { label: function(ti) { return 'Label#1' } }
itemSort	function	ツールチップをソートする関数。
filter	function	ツールチップを表示するか否かを true / false で返す関数。
backgroundColor	Color	背景色。
titleColor	Color	タイトルの色。
titleFont	Font	タイトルのフォント。
titleAlign	string	タイトルの表示位置。'left', 'center', 'right' のいずれか。デフォルトは 'left'。
titleSpacing	number	タイトルの上下の隙間。デフォルトは2。
titleMarginBottom	number	タイトルセクション下部の隙間。デフォルトは6。
bodyColor	Color	ボディ部の色。デフォルトは '#fff'。
bodyFont	Font	ボディ部のフォント。
bodyAlign	string	ボディ部の表示位置。'left', 'center', 'right' のいずれか。デフォルトは 'left'。
bodySpacing	number	ツールチップ上下の隙間。デフォルトは2。
footerColor	Color	フッターの色。デフォルトは '#fff'。
footerFont	Font	フッターのフォント。
footerAlign	string	フッターの表示位置。'left', 'center', 'right' のいずれか。デフォルトは 'left'。
footerSpacing	number	フッターの上下の隙間。デフォルトは2。
footerMarginTop	number	フッターの上部の隙間。デフォルトは6。
padding	Padding	ツールチップのパディング。
caretPadding	number	キャレットのパディング。デフォルトは2。
caretSize	number	キャレットのサイズ。デフォルトは5。
cornerRadius	number	ツールチップの角の丸さ。デフォルトは6。
multiKeyBackground	Color	ツールチップ内に複数アイテムを表示する際の色つきボックスの下に表示する色。
displayColors	boolean	カラーボックスを表示するか否か。デフォルトは true。
boxWidth	number	カラーボックスの横幅。
boxHeight	number	カラーボックスの縦幅。
usePointStyle	boolean	ポイントスタイルを使用するか否か。デフォルトは false。
borderColor	Color	ボーダーの色。
borderWidth	number	ボーダーの太さ。デフォルトは0。
rtl	boolean	右から左方向に表示する場合は true。
textDirection	string	テキストの表示方向。'rtl'(右から左)、'ltr'(左から右)。
xAlign	string	ツールチップの場所。'left', 'center', 'right' のいずれか。
yAlign	string	ツールチップの場所。'top', 'center', 'bottom' のいずれか。

// コールバック

属性	引数	説明
beforeTitle	TooltipItem[], object	タイトルの前に表示する文字列を返す関数。
title	TooltipItem[], object	タイトル文字列を返す関数。
afterTitle	TooltipItem[], object	タイトルの後に表示する文字列を返す関数。
beforeBody	TooltipItem[], object	本文の前に表示する文字列を返す関数。
afterBody	TooltipItem[], object	本文の後に表示する文字列を返す関数。
beforeLabel	TooltipItem, object	ラベルの前に表示する文字列を返す関数。
label	TooltipItem, object	ラベル文字列を返す関数。
afterLabel	TooltipItem, object	ラベルの後に表示する文字列を返す関数。
labelColor	TooltipItem, Chart	ラベルの色を示す、borderColor, backgroundColor, borderWidth, borderDash, borderRadius をパラメータとして持つオブジェクトを返す関数。
labelTextColor	TooltipItem, Chart	ラベルのテキストの色を返す関数。
labelPointStyle	TooltipItem, Chart	ラベルの ポイントスタイルオブジェクトを返す関数。
beforeFooter	TooltipItem[], object	フッターの前に表示する文字列を返す関数。
footer	TooltipItem[], object	フッター文字列を返す関数。
afterFooter	TooltipItem[], object	フッターの後に表示する文字列を返す関数。

デシメーション(間引き)(options.plugins.decimation)

• options.plugins.decimation.params
• Chart.defaults.plugins.decimation.params

属性	型	説明
enabled	boolean	間引きを行うか否か。デフォルトは false。
algorithm	string	間引きアルゴリズム。'lttb'(Largest Triangle Three Bucketアルゴリズム) または 'min-max'。デフォルトは 'min-max'。
samples	number	'lttb' の場合は抽出サンプル数。デフォルトでは1ピクセルに1データ。

塗りつぶし(options.plugins.filler)

• options.plugins.filler.params

属性	型	説明
drawTime	string	塗りつぶしを行うタイミング。'beforeDraw', 'beforeDatasetDraw', 'beforeDatasetsDraw' のいずれか。
propagate	boolean	ターゲットが隠れている時塗りつぶしを伝播させるか否かを指定。デフォルトは true(伝播させる)。

スケール(options.scales)

• options.scales[scaleID].params

scaleID には x(X軸), y(Y軸), r(半径方向の軸)の他、データセットの xAxisID, yAxisID で指定した文字列を指定。

{
  data: {
    datasets: [{
      data: ...,
    }, {
      data: ...,
      yAxisID: 'y2',
    }]
  },
  options: {
    scales: {
      y: {
        type: 'linear',
        ...
      },
      x: { ... },
      r: { ... },
      y2: { ... }
    }
  }
}

属性	型	説明
type	string	スケールの種別。'linear'(線形), 'logarithmic'(対数), 'time'(時系列), 'timeseries'(時系列)など。
alignToPixels	boolean	ピクセルをデバイスのピクセルに合わせるか否か。デフォルトは false。
backgroundColor	Color	背景色。
display	boolean | string	スケールを表示するか否か。true(表示する), false(表示しない), 'auto'(最後のデータセットが表示状態であれば表示)。デフォルトは true。
grid	object	グリッド線設定。
min	number	スケールの最小値。
max	number	スケールの最大値。
reverse	boolean	反対並びにする場合 true を指定。
stacked	boolean | string	データをスタックするか否か。true(スタックする), false(しない), 'single'(シングル)。
suggestedMin	number	スケールの最小値(推奨値)。これよりも小さな値があればその値が表示される範囲に拡大される。
suggestedMax	number	スケールの最大値(推奨値)。これよりも大きな値があればその値が表示される範囲に拡大される。
ticks	object	目盛り設定。
weight	number	スケールの並び替えに使用される重み。重みが大きいほどチャートエリアから離れる。
labels	string[]	目盛ラベル

// 線形グラフ

属性	型	説明
beginAtZero	boolean	目盛を0から始める。デフォルトはfalse。
grace	number | string	最大値または最小値から指定した数値分、スケールを大きくとる。'20%' のように最大値(最小値)に対する割合で示すことも可。

// デカルト座標(直交系座標)

属性	型	説明
bounds	string	境界の振る舞いを 'data' または 'ticks' で指定。。'data' は全データが表示され、外側のラベルは削除される。'ticks' はすべての目盛が表示され、外側のデータは削除される。(具体的に何が変わるのか分かりませんでした)
position	string	目盛線の位置を 'top', 'bottom', 'right', 'left' のいずれかで指定。
axis	string	このスケールが X軸として振舞うか、Y軸として振舞うかを 'x' または 'y' で指定。省略すると、scaleID の先頭文字が 'x' か 'y' かで判定。
offset	boolean	true を指定すると最初と最後の目盛の両端に余白が設けられる。デフォルトは false。
title	object	スケールタイトル。

// コールバック

属性	型	説明
beforeUpdate	function	更新前に呼ばれるコールバック。
afterUpdate	function	更新後に呼ばれるコールバック。
beforeSetDimensions	function	ディメンジョンをセットする前に呼ばれるコールバック。
afterSetDimensions	function	ディメンジョンをセットした後に呼ばれるコールバック。
beforeDataLimits	function	データの上限・下限が産出される前に呼ばれるコールバック。
afterDataLimits	function	データの上限・下限が産出された後に呼ばれるコールバック。
beforeBuildTicks	function	目盛を構成する前に呼ばれるコールバック。
afterBuildTicks	function	目盛りを構成した後に呼ばれるコールバック。
beforeTickToLabelConversion	function	目盛をラベルに変換する前に呼ばれるコールバック。
afterTickToLabelConversion	function	目盛をラベルに変換した後に呼ばれるコールバック。
beforeCalculateTickRotation	function	目盛の回転を計算する前に呼ばれるコールバック。
afterCalculateTickRotation	function	目盛の回転を計算した後に呼ばれるコールバック。
beforeFit	function	スケールをキャンバスにフィットさせる前にに呼ばれるコールバック。
afterFit	function	スケールをキャンバスにフィットさせた後に呼ばれるコールバック。

// 時間軸

属性	型	説明
unit	string	グラフの時間単位。'year', 'quarter', 'month', 'week', 'day', 'hour', 'minute', 'second', 'millisecond' のいずれかを指定。
time	object	時間に関するパラメータ。
ticks.source	string	目盛生成アルゴリズム。'auto'(スケールサイズと time オプションから自動生成), 'data'(データから生成), 'labels'(ユーザ指定の labels 参照) のいずれか。
adapters.date	object	外部日時ライブラリアダプタに渡すオプション。

// 円グラフ系

属性	型	説明
animate	boolean	アニメーションを中心からスケールさせるか否か。デフォルトは true。
angleLines	object	角度線。レーダーチャートで中心から放射線状に描かれる線。
beginAtZero	boolean	開始点を 0 とするか否か。デフォルトは false。
pointLabels	object	ポイントラベル。
startAngle	number	鶏頭図チャートやレーダーチャートの開始角。デフォルトは0。パイチャーとやドーナツチャートでは無効？

スケール・時間軸(options.scales.scaleID.time)

• options.scales[scaleID].time.params

属性	型	説明
displayFormats	object	日時の表示フォーマット。例えば time: {displayFormats: {hour: 'HH:mm'}} は時間を 'HH:mm' フォーマットで表示する。単位には year, quarter, month, week, day, hour, minute, second, millisecond のいずれかを指定。指定可能文字は date-fns, Luxon, Moment を参照。
isoWeekday	boolean | number	週の開始曜日。true(月曜), false(日曜) または 0(日曜)～6(土曜) で指定。unit が 'week' の場合に有効。
parser	string | function	文字列を指定した場合は、日時アダプタが日時を解釈する際に使用するカスタムフォーマットとみなされる。関数を指定した場合は、日時アダプタの parse メソッドで扱われるタイプを返却する。
round	string	データの開始位置を unit で指定した単位に合わせるか否か。デフォルトは false。
tooltipFormat	string	ツールチップのフォーマット。
stepSize	number	グリッド線の間隔。
minUnit	string	表示する最小の時間単位。

スケール・目盛ラベル(options.scales.scaleID.ticks)

• options.scales[scaleID].ticks.params

// すべての目盛ラベル

属性	型	説明
display	boolean	目盛ラベルを表示するか否か。true(表示する), false(表示しない)。デフォルトは true。
color	Color	目盛ラベルの色。
font	Font	目盛ラベルのフォント。
major.enabled	boolean	true を指定すると、主目盛が生成される。主目盛は自動スキップに影響し、major はスクリプト可能なオプションコンテキスト上の目盛として定義される。(詳細不明)
padding	number	目盛ラベルとスケール軸の間の隙間
showLabelBackdrop	boolean	目盛ラベルに背景枠を表示するか否か。
backdropColor	Color	目盛ラベルの背景枠の色。
backdropPadding	Padding	目盛ラベルの背景枠のパディングサイズ。
textStrokeWidth	number	目盛ラベルの周りの縁取りの大きさ。デフォルトは0。
textStrokeColor	Color	目盛ラベルの周りの縁取りの色。
z	number	目盛ラベルのZ座標値。重なり優先度。
callback	function	目盛ラベルを返却する関数。callback: function(value, index, values) { return '$' + value; } など。

// デカルト座標系

属性	型	説明
align	string	目盛ラベルの軸方向の位置。'start'(開始側), 'center'(中央), 'end'(終了側) のいずれか。
crossAlign	string	目盛ラベルの軸と垂直方向の位置。'near'(近い), 'center'(中間), 'far'(遠い)のいずれか。
sampleSize	number	目盛ラベルの長さを計算するのに参照する目盛ラベルの個数。小さな数を指定すると早くなるが、目盛ラベルの長さがバラバラの場合、表示できない可能性がある。
autoSkip	boolean	何個の目盛ラベルを表示可能か自動計算するか否か。デフォルトは true。
autoSkipPadding	number	軸方向の目盛ラベルのパディング。デフォルトは3。autoSkip が true の場合に有効。
labelOffset	number	目盛ラベルの中央位置から少しずらして表示する場合のオフセット値。デフォルトは0。
maxRotation	number	目盛ラベルを回転させて表示する場合の最大角度。デフォルトは50。
minRotation	number	目盛ラベルを回転させて表示する場合の最小角度。デフォルトは0。
mirror	boolean	目盛ラベルをチャートの内側に表示するか否か。デフォルトはfalse。
padding	number	目盛ラベルと軸の間のパディング。デフォルトは10。

// リニア軸

属性	型	説明
count	number	目盛の個数。
maxTicksLimit	number	目盛の最大個数。
format	object	目盛のフォーマットを Intl.NumberFormat の options 形式で指定。(→ MDN)
precision	number	目盛の小数部の桁数。stepSize が指定されている場合はそちらを優先。
stepSize	number	目盛のステップ幅。

スケール・グリッド(options.scales.scaleID.grid)

• options.scales[scaleID].grid.params

// 軸線

属性	型	説明
drawBorder	boolean	軸線を描画するか否か。デフォルトはtrue。
borderColor	Color	軸線の色。
borderWidth	number	軸線の太さ(ピクセル)。

// 目盛線・グリッド線共通

属性	型	説明
display	boolean	目盛線とグリッド線を表示するか否か。デフォルトはtrue。
color	Color	目盛線とグリッド線の色。
lineWidth	number	目盛線とグリッド線の太さ(ピクセル)。
offset	boolean	目盛線とグリッド線を目盛ラベル間の中央に表示する。デフォルトは、棒グラフの時true。その他はfalse。

// 目盛線

属性	型	説明
drawTicks	boolean	目盛線を表示するか否か。デフォルトはtrue。
tickColor	Color	目盛線の色。
tickLength	number	目盛線の長さ。デフォルトは8。
tickWidth	number	目盛線の太さ(ピクセル)。
tickBorderDash	number[]	目盛線を点線とする際の点線パターン。
tickBorderDashOffset	number	目盛線を点線とする際の点線の開始オフセット。

// グリッド線

属性	型	説明
borderDash	number[]	グリッド線を点線とする際の点線パターン。
borderDashOffset	number	グリッド線を点線とする際の点線の開始オフセット。
circular	boolean	レーダーチャートでグリッド線を円形にする。デフォルトは false。
drawOnChartArea	boolean	チャート領域にグリッド線を描画しない。

// その他

属性	型	説明
z	number	グリッドのZ座標の順番。グリッドやデータが重なった場合に数値の大きなものが上側に表示される。

スケール・タイトル(options.sclaes.scaleID.title)

• options.scales[scaleID].title.params

属性	型	説明
display	boolean	スケールタイトルを表示か否か。デフォルトは false。
text	string | string[]	スケールタイトル文字列。
align	string	表示位置。'start'(開始側), 'center'(中央), 'end'(終了側) のいずれか。デフォルトは 'center'。
color	Color	スケールタイトルの色。
font	Font	スケールタイトルのフォント。
padding	Padding	パディング。

スケール・角度線(options.scales.scaleID.angleLines)

• options.scales[scaleID].angleLines.params

// レーダーチャートの角度線

属性	型	説明
display	boolean	角度線を表示するか否か。
color	Color	角度線の色。
lineWidth	number	角度線の太さ。
borderDash	number[]	点線の描画方法。[3, 5] は長さ3の実践と長さ5の隙間を繰り返す。[10, 3, 5, 3] は 10の実践、3の隙間、5の実践、3の隙間のパターンを繰り返す。(→ MDN)
borderDashOffset	number	点線のオフセット。(→ MDN)

スケール・ポイントラベル(options.scales.scaleID.pointLabels)

• options.scales[scaleID].pointLabels.params

// レーダーチャートの外枠のラベル

属性	型	説明
backdropColor	Color	ポイントラベルの背景枠の色。
backdropPadding	Padding	ポイントラベルの背景枠のパディングサイズ。
display	boolean	ポイントラベルを表示するか否か。デフォルトは true。
callback	function	ポイントラベルを生成する関数。
color	Color	ポイントラベルの色。
font	Font	ポイントラベルのフォント。
padding	number	チャートとポイントラベル間のパディング。デフォルトは5。

アニメーション(options.animation)

• data.datasets[].animation.params
• options.animation.params
• options.animations[].params
• Chart.defaults.animation.params

属性	型	説明
duration	number	アニメーションにかける時間(ミリ秒)。デフォルトは1000。
easing	string	イージング関数。'linear', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc', 'easeInElastic', 'easeOutElastic', 'easeInOutElastic', 'easeInBack', 'easeOutBack', 'easeInOutBack', 'easeInBounce', 'easeOutBounce', 'easeInOutBounce' のいずれか。デフォルトは 'easeOutQuart'。
delay	number	アニメーションを始めるまでの時間(ミリ秒)。
loop	boolean	アニメーションをループする場合は true。
onProgress	function	アニメーション実行中に呼ばれるコールバック。
onComplete	function	アニメーション終了時に呼ばれるコールバック。

アニメーションズ(options.animations)

• options.animations[].params

animation のプロパティに加えて下記を指定可能。

属性	型	説明
properties	string[]	この設定を適用するプロパティ名。デフォルトはこのオブジェクトのキー名。
type	string	種別。'number', 'color', 'boolean', 'color' のいずれか。
from	number | Color | boolean	開始値。数値はグラフ上の数値ではなく、キャンバスの左上を (0, 0) とするピクセル値。
to	number | Color | boolean	終了値。数値はグラフ上の数値ではなく、キャンバスの左上を (0, 0) とするピクセル値。
fn	function	カスタマイズしたアニメーション関数。

トランジション(options.transitions)

アニメーションの基本的なパラメータに関する設定を行う。

• options.transitions.params

属性	型	説明
active.animation.duration	number	アクティブ時のアニメーションの遷移時間(ミリ秒)。デフォルトは400。
resize.animation.duration	number	リサイズ時のアニメージョンの遷移時間(ミリ秒)。デフォルトは0。
show.animations.colors	object	表示時の色アニメーション。デフォルトは { type: 'color', properties: ['borderColor', 'backgroundColor'], from: 'transparent' }。
show.animations.visible	object	表示時の可視化アニメーション。デフォルトは { type: 'boolean', duration: 0 }。
hide.animations.colors	object	表示時の色アニメーション。デフォルトは { type: 'color', properties: ['borderColor', 'backgroundColor'], to: 'transparent' }。
hide.animations.visible	object	表示時の非可視化アニメーション。デフォルトは { type: 'boolean', easing: 'easeInExpo' }。

インタラクション(options.interaction)

ポイントにマウスを乗せたときに表示するツールチップに関する設定を行う。

• options.interaction.params
• Chart.defaults.interaction.params

属性	型	説明
mode	string	インタラクションモード。ツールチップのどのデータを表示するか、'point'(対象ポイントのみ), 'nearest'(一番近いポイント), 'index'(各データセットの該当インデックスの値), 'dataset'(該当データセットの値), 'x'(同じX軸上の値), 'y'(同じY軸上の値) のいずれかで指定。
intersect	boolean	true はマウスがポイント上にある時のみ、false は常に表示。デフォルトは true。
axis	string	距離を計算するために使用される方向。'x', 'y', 'xy' のいずれか。デフォルトは 'index' の場合は 'x'、'dataset' や 'nearest' の場合は 'xy'。

チャート(Chart)

• Chart.params

属性	型	説明
defaults	object	デフォルト値。

デフォルト値(Chart.defaults)

• Chart.defaults.params

属性	型	説明
elements	object	エレメント。
layout	object	レイアウト。
plugins	object	プラグイン。
scales	object	スケール。
animation	object	アニメーション。
animations	object	アニメーションズ。
transitions	object	トランジション。
locale	string	BCP 47(RFC 5646)で定義される言語情報。

色・フォント・パディング

色

色はは、CSS で利用可能な書式を利用できます。

color: 'red',
color: '#f00',
color: '#ff0000',
color: 'rgb(255, 0, 0)',
color: 'rgba(255, 0, 0, 1.0)',
color: 'hsl(0, 100%, 50%)',
color: 'hsla(0, 100%, 50%, 1.0)',

フォント

• options.plugins.title.font.params
• options.plugins.legend.labels.font.params
• options.plugins.legend.title.font.params
• options.plugins.tooltip.xxxFont.params
• options.scales[].ticks.font.params
• Chart.defaults.font.params

属性	型	説明
family	string	CSSで指定するフォント。
size	number	フォントサイズ。(デフォルト12)。
style	string	スタイル
weight	string	太さ。
lineHeight	number | string	1行の高さ。

Chart.defaults.font = {
  family: "'Helvetica', 'Meiryo UI'",
  size: 12,
  style: 'normal',
  weight: 'normal',
  lineHeight: 1.2
}

パディング

パディングは次のように指定します。

padding: 20,
padding: {right: 20, left: 20, top: 20, bottom: 20},
padding: {x: 20, y: 20}

---