とほほのChart.js入門

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

目次

コンフィグ

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

データ

属性説明
labelsstring[]ラベル
datasetsobject[]データセット。
{
  type: 'line',
  data: {
    labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    datasets: [{
      label: "Sample Data",
      data: [2, 12, 16, 10, 12, 11, 3]
    }]
  }
}

データセット

属性説明
typestringチャート種別。'line'(線チャート), 'bar'(棒チャート), 'radar'(ラダーチャート), 'doughnut'(ドーナツチャート), 'pie'(パイチャート), 'polarArea'(鶏頭図チャート), 'bubble'(バブルチャート), 'scatter'(散布図) のいずれかで指定。
labelstringデータセットのラベル
datalist | objectデータ。
ordernumber描画が重なった場合どちらを上に表示するかを指定。数値の小さいほうが上に表示される。
hiddenboolean線やポイントを隠すか否か。デフォルトは false。
showLineboolean線を描画するか否か。デフォルトは true。
clipnumber | object正の数値はラインやポイントをチャート領域から数値分はみ出しても表示する。負の数値は数値分内側の部分まで表示する。{top:10, right:20, bottom:30, left:40} の様に指定することも可。
indexAxisstringY軸に対してX軸が変動量となるグラフを描画する場合 'y' を指定。
xAxisIDstringX軸のスケールID(scaleID)。
yAxisIDstringY軸のスケールID(scaleID)。
parsingboolean | 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],
    }],
  },
});

パーシング

属性説明
xAxisKeystringX軸に描画するデータのキー。
yAxisKeystringY軸に描画するデータのキー。
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: [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}}],

オプション

属性説明
elementsobjectエレメント。
layoutobjectレイアウト。
pluginsobjectプラグイン。
scalesobjectスケール。
animationobjectアニメーション。
animationsobjectアニメーションズ。
transitionsobjectトランジション。
localestringBCP 47(RFC 5646)で定義される言語情報。
interactionobjectインタラクション。
eventsstring[]キャッチするイベントリスト。デフォルトは ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']。
onHoverfunctionホバー時のコールバック関数。
onClickfunctionクリック時のコールバック関数。
devicePixelRationumberデフォルトの devicePixelRatio を上書きする。(→ MDN)
responsivebooleanコンテナがリサイズされた場合にチャートもリサイズするか否か。デフォルトは true。
maintainAspectRatiobooleanリサイズの際、オリジナルのキャンバスの縦横比を維持するか否か。デフォルトは true。
aspectRationumberチャートの縦横比。X-Yグラフのデフォルトは2。円グラフ系のデフォルトは1。
onResizefunctionリサイズの際に呼び出されるコールバック関数。
resizeDelaynumberチャートをリサイズするまでの遅延時間(ミリ秒)。

エレメント

属性説明
lineobjectラインスタイル。
pointobjectポイントスタイル。
barobjectバースタイル。
arcobjectアークスタイル。

ラインスタイル

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

ポイントスタイル

属性説明
pointStylestring | Imageポイントスタイル。'circle'(円), 'cross'(十字), 'crossRot'(×印), 'dash'(半線), 'line'(横線), 'rect'(矩形), 'rectRounded'(角丸矩形), 'rectRot'(菱形), 'star'(星), 'triangle'(三角)。もしくは ImageBitmap() の第一引数に指定するイメージを指定。(→ MDN)
backgroundColorColor背景色。
pointBackgroundColorColor同上。
borderColorColorボーダー色。
pointBorderColorColor同上。
borderWidthnumberボーダーの太さ。デフォルトは1。
pointBorderWidthnumber同上。
radiusnumberポイントの半径。0を指定するとポイントを表示しない。
pointRadiusnumber同上。
rotationnumberポイントを時計方向に回転させる角度を度数で指定。
pointRotationnumber同上。
hitRadiusnumberホバーを検出する範囲の追加半径。デフォルトは1。
pointHitRadiusnumber同上。
hoverBorderWidthnumberホバー時のポイントのボーダーの太さ。デフォルトは1。
hoverRadiusnumberホバー時のポイントの半径。デフォルトは4。
属性説明
pointHoverBackgroundColorColorホバー時のポイントの背景色。
pointHoverBorderColorColorホバー時のポイントのボーダー色。
pointHoverBorderWidthnumberホバー時のポイントのボーダーの太さ。
pointHoverRadiusnumberホバー時のポイントの半径。

バースタイル

属性説明
basenumber棒グラフの起点とする値。省略時は軸の起点。
groupedboolean棒グラフをグルーピングするか否かを指定。デフォルトは true(グルーピングする)。複数のデータセットの棒グラフを描画する際、グループの間では横幅を分け合うが、グルーピングしない場合は他の横幅を無視して描画される。
skipNullbooleannull や undefined のデータを描画するか否か。
stackstring棒グラフで積み上げグラフを表示する際の積み上げグループ名を指定。
属性説明
backgroundColorColor背景色。
borderColorColorボーダー色。
borderSkippedstringボーダーを描画しない方向を 'start'(開始側), 'end'(終了側), 'bottom'(下側), 'left'(左側), 'top'(上側), 'right'(右側)のいずれかで指定。
borderWidthnumberボーダーの太さ。デフォルトは1。
borderRadiusnumberボーダーの角の丸め半径。
minBarLengthboolean棒グラフの描画の最小の長さ(ピクセル単位)。
pointStylestring | Imageポイントスタイル。'circle'(円), 'cross'(十字), 'crossRot'(×印), 'dash'(半線), 'line'(横線), 'rect'(矩形), 'rectRounded'(角丸矩形), 'rectRot'(菱形), 'star'(星), 'triangle'(三角)。もしくは ImageBitmap() の第一引数に指定するイメージを指定。(→ MDN)
属性説明
hoverBackgroundColorColorホバー時の背景色。
hoverBorderColorColorホバー時のボーダー色。
hoverBorderWidthnumberホバー時のボーダーの太さ。
hoverBorderRadiusnumberホバー時のボーダーの角丸の半径。
属性説明
barPercentagenumber棒グラフの横幅の割合を 0.0~1.0 の間で指定。1.0 を指定すると隣のデータセットと隙間なく描画される。デフォルトは 0.9。
categoryPercentagenumberカテゴリ(通常はX軸の単位)の中で棒グラフを描画する領域の割合を 0.0~1.0 の間で指定。1.0 を指定すると、となりのカテゴリと隙間なく描画される。デフォルトは 0.8。
barThicknessnumber | string棒グラフの横幅(ピクセル単位)。'flex' を指定すると categoryPercentage や barPercentage から自動計算される。
maxBarThicknessnumber棒グラフの最大幅(ピクセル単位)。

アークスタイル

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

円チャートスタイル

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

レイアウト

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

プラグイン

属性説明
legendobject凡例。
titleobjectタイトル。
tooltipobjectツールチップ。
decimationobjectデシメーション(間引き)。
fillerobject塗りつぶし。

凡例(レジェンド)

属性説明
displayboolean凡例を表示するか否か。デフォルトは true。
positionstring凡例の表示位置。'top'(上部), 'left'(左側), 'bottom'(下部), 'right'(右側), 'chartArea'(チャート領域) のいずれか。デフォルトは 'top'。
alignstring凡例の表示位置。'start'(開始方向), 'center'(中央), 'end'(終了方向)のいずれか。デフォルトは 'center'。
maxHeightnumber凡例の最大の高さ(ピクセル)。
maxWidthnumber凡例の最大の横幅(ピクセル)。
fullSizebooleanフルサイズで表示するか否か。デフォルトは true。
onClickfunctionクリック時に呼ばれる関数。引数は event, legendItem, legend。
onHoverfunctionホバー時に呼ばれる関数。引数は event, legendItem, legend。
onLeavefunctionマウスが離れる際に呼ばれる関数。引数は event, legendItem, legend。
reverseboolean凡例を通常とは逆順に表示する場合に true を指定。
labelsobject凡例ラベル。
rtlboolean文字を右から左に書く場合に true を指定。
textDirectionstringテキストの方向。'rtl' か 'ltr' のいずれか。
titleobject凡例タイトル。

凡例ラベル

属性説明
boxWidthnumberカラーボックスの横幅。
boxHeightnumberカラーボックスの高さ。
colorColorラベルの色。
fontFontフォント。
paddingnumberパディング。
generateLabelsfunctionラベル名を生成する関数。
filterfunctionラベルをフィルタリングする関数。
sortfunctionラベルをソートする関数。
pointStyleobjectポイントスタイル。
textAlignstringテキストの表示位置。'left'(左側), 'center'(中央), 'right'(右側) のいずれか。デフォルトは 'center'。
usePointStylebooleanポイントスタイルを使用するか否か。デフォルトは false。

凡例タイトル

属性説明
colorColorタイトルの色。
displaybooleanタイトルを表示するか否か。デフォルトは false。
fontFont凡例タイトルのフォント。
paddingPaddingパディング。
textstring凡例タイトル。

チャートタイトル

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

属性説明
displaybooleanチャートタイトルを表示するか否か。デフォルトは false。
textstring | string[]チャートタイトルテキスト。
colorColorタイトルの色。
fontFontチャートタイトルのフォント。
paddingPaddingパディング。
alignstringチャートタイトルの表示位置。'start'(開始側), 'center'(中央), 'end'(終了側)のいずれか。デフォルトは 'center'。
positionstringチャートタイトルの表示位置。'top'(上部), 'left'(左側), 'bottom'(下部), 'right'(右側)のいずれか。デフォルトは 'top'。
fullSizebooleanフルサイズで表示するか否か。デフォルトは true。

ツールチップ

属性説明
enabledbooleanツールチップを表示しない場合は false を指定。
externalfunction...
modestring'point'(ポイントに関する情報を表示), 'nearest'(近接データセットの情報も表示), 'index'(他データセットの情報を表示), 'dataset'(このデータセットの他のポイント情報を表示), 'x'(x軸上のデータセット情報を表示), 'y'(y軸上のデータセット情報を表示) のいずれかを指定。
intersectbooleantrue を指定するとポイントにマウスカーソルが近づいた時のみ、false を指定するとツールチップを常に表示するようになる。デフォルトは true。
positionstring'average' は各データセットの平均値の場所にツールチップを表示。'nearest' はマウスを近づけたポイント位置にツールチップを表示。デフォルトは 'average'。
callbacksobjectツールチップコールバック。例:callbacks: { label: function(ti) { return 'Label#1' } }
itemSortfunctionツールチップをソートする関数。
filterfunctionツールチップを表示するか否かを true / false で返す関数。
backgroundColorColor背景色。
titleColorColorタイトルの色。
titleFontFontタイトルのフォント。
titleAlignstringタイトルの表示位置。'left', 'center', 'right' のいずれか。デフォルトは 'left'。
titleSpacingnumberタイトルの上下の隙間。デフォルトは2。
titleMarginBottomnumberタイトルセクション下部の隙間。デフォルトは6。
bodyColorColorボディ部の色。デフォルトは '#fff'。
bodyFontFontボディ部のフォント。
bodyAlignstringボディ部の表示位置。'left', 'center', 'right' のいずれか。デフォルトは 'left'。
bodySpacingnumberツールチップ上下の隙間。デフォルトは2。
footerColorColorフッターの色。デフォルトは '#fff'。
footerFontFontフッターのフォント。
footerAlignstringフッターの表示位置。'left', 'center', 'right' のいずれか。デフォルトは 'left'。
footerSpacingnumberフッターの上下の隙間。デフォルトは2。
footerMarginTopnumberフッターの上部の隙間。デフォルトは6。
paddingPaddingツールチップのパディング。
caretPaddingnumberキャレットのパディング。デフォルトは2。
caretSizenumberキャレットのサイズ。デフォルトは5。
cornerRadiusnumberツールチップの角の丸さ。デフォルトは6。
multiKeyBackgroundColorツールチップ内に複数アイテムを表示する際の色つきボックスの下に表示する色。
displayColorsbooleanカラーボックスを表示するか否か。デフォルトは true。
boxWidthnumberカラーボックスの横幅。
boxHeightnumberカラーボックスの縦幅。
usePointStylebooleanポイントスタイルを使用するか否か。デフォルトは false。
borderColorColorボーダーの色。
borderWidthnumberボーダーの太さ。デフォルトは0。
rtlboolean右から左方向に表示する場合は true。
textDirectionstringテキストの表示方向。'rtl'(右から左)、'ltr'(左から右)。
xAlignstringツールチップの場所。'left', 'center', 'right' のいずれか。
yAlignstringツールチップの場所。'top', 'center', 'bottom' のいずれか。

// コールバック

属性引数説明
beforeTitleTooltipItem[], objectタイトルの前に表示する文字列を返す関数。
titleTooltipItem[], objectタイトル文字列を返す関数。
afterTitleTooltipItem[], objectタイトルの後に表示する文字列を返す関数。
beforeBodyTooltipItem[], object本文の前に表示する文字列を返す関数。
afterBodyTooltipItem[], object本文の後に表示する文字列を返す関数。
beforeLabelTooltipItem, objectラベルの前に表示する文字列を返す関数。
labelTooltipItem, objectラベル文字列を返す関数。
afterLabelTooltipItem, objectラベルの後に表示する文字列を返す関数。
labelColorTooltipItem, Chartラベルの色を示す、borderColor, backgroundColor, borderWidth, borderDash, borderRadius をパラメータとして持つオブジェクトを返す関数。
labelTextColorTooltipItem, Chartラベルのテキストの色を返す関数。
labelPointStyleTooltipItem, Chartラベルの ポイントスタイルオブジェクトを返す関数。
beforeFooterTooltipItem[], objectフッターの前に表示する文字列を返す関数。
footerTooltipItem[], objectフッター文字列を返す関数。
afterFooterTooltipItem[], objectフッターの後に表示する文字列を返す関数。

デシメーション(間引き)

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

塗りつぶし

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

スケール

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

{
  data: {
    datasets: [{
      data: ...,
    }, {
      data: ...,
      yAxisID: 'y2',
    }]
  },
  options: {
    scales: {
      y: {
        type: 'linear',
        ...
      },
      x: { ... },
      r: { ... },
      y2: { ... }
    }
  }
}
属性説明
typestringスケールの種別。'linear'(線形), 'logarithmic'(対数), 'time'(時系列), 'timeseries'(時系列)など。
alignToPixelsbooleanピクセルをデバイスのピクセルに合わせるか否か。デフォルトは false。
backgroundColorColor背景色。
displayboolean | stringスケールを表示するか否か。true(表示する), false(表示しない), 'auto'(最後のデータセットが表示状態であれば表示)。デフォルトは true。
gridobjectグリッド線設定。
minnumberスケールの最小値。
maxnumberスケールの最大値。
reverseboolean反対並びにする場合 true を指定。
stackedboolean | stringデータをスタックするか否か。true(スタックする), false(しない), 'single'(シングル)。
suggestedMinnumberスケールの最小値(推奨値)。これよりも小さな値があればその値が表示される範囲に拡大される。
suggestedMaxnumberスケールの最大値(推奨値)。これよりも大きな値があればその値が表示される範囲に拡大される。
ticksobject目盛り設定。
weightnumberスケールの並び替えに使用される重み。重みが大きいほどチャートエリアから離れる。
labelsstring[]目盛ラベル

// 線形グラフ

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

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

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

// コールバック

属性説明
beforeUpdatefunction更新前に呼ばれるコールバック。
afterUpdatefunction更新後に呼ばれるコールバック。
beforeSetDimensionsfunctionディメンジョンをセットする前に呼ばれるコールバック。
afterSetDimensionsfunctionディメンジョンをセットした後に呼ばれるコールバック。
beforeDataLimitsfunctionデータの上限・下限が産出される前に呼ばれるコールバック。
afterDataLimitsfunctionデータの上限・下限が産出された後に呼ばれるコールバック。
beforeBuildTicksfunction目盛を構成する前に呼ばれるコールバック。
afterBuildTicksfunction目盛りを構成した後に呼ばれるコールバック。
beforeTickToLabelConversionfunction目盛をラベルに変換する前に呼ばれるコールバック。
afterTickToLabelConversionfunction目盛をラベルに変換した後に呼ばれるコールバック。
beforeCalculateTickRotationfunction目盛の回転を計算する前に呼ばれるコールバック。
afterCalculateTickRotationfunction目盛の回転を計算した後に呼ばれるコールバック。
beforeFitfunctionスケールをキャンバスにフィットさせる前にに呼ばれるコールバック。
afterFitfunctionスケールをキャンバスにフィットさせた後に呼ばれるコールバック。

// 時間軸

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

// 円グラフ系

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

スケール・時間軸

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

スケール・目盛ラベル

// すべての目盛ラベル

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

// デカルト座標系

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

// リニア軸

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

スケール・グリッド

// 軸線
属性説明
drawBorderboolean軸線を描画するか否か。デフォルトはtrue。
borderColorColor軸線の色。
borderWidthnumber軸線の太さ(ピクセル)。
// 目盛線・グリッド線共通
属性説明
displayboolean目盛線とグリッド線を表示するか否か。デフォルトはtrue。
colorColor目盛線とグリッド線の色。
lineWidthnumber目盛線とグリッド線の太さ(ピクセル)。
offsetboolean目盛線とグリッド線を目盛ラベル間の中央に表示する。デフォルトは、棒グラフの時true。その他はfalse。
// 目盛線
属性説明
drawTicksboolean目盛線を表示するか否か。デフォルトはtrue。
tickColorColor目盛線の色。
tickLengthnumber目盛線の長さ。デフォルトは8。
tickWidthnumber目盛線の太さ(ピクセル)。
tickBorderDashnumber[]目盛線を点線とする際の点線パターン。
tickBorderDashOffsetnumber目盛線を点線とする際の点線の開始オフセット。
// グリッド線
属性説明
borderDashnumber[]グリッド線を点線とする際の点線パターン。
borderDashOffsetnumberグリッド線を点線とする際の点線の開始オフセット。
circularbooleanレーダーチャートでグリッド線を円形にする。デフォルトは false。
drawOnChartAreabooleanチャート領域にグリッド線を描画しない。
// その他
属性説明
znumberグリッドのZ座標の順番。グリッドやデータが重なった場合に数値の大きなものが上側に表示される。

スケール・タイトル

属性説明
displaybooleanスケールタイトルを表示か否か。デフォルトは false。
textstring | string[]スケールタイトル文字列。
alignstring表示位置。'start'(開始側), 'center'(中央), 'end'(終了側) のいずれか。デフォルトは 'center'。
colorColorスケールタイトルの色。
fontFontスケールタイトルのフォント。
paddingPaddingパディング。

スケール・角度線

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

属性説明
displayboolean角度線を表示するか否か。
colorColor角度線の色。
lineWidthnumber角度線の太さ。
borderDashnumber[]点線の描画方法。[3, 5] は長さ3の実践と長さ5の隙間を繰り返す。[10, 3, 5, 3] は 10の実践、3の隙間、5の実践、3の隙間のパターンを繰り返す。(→ MDN)
borderDashOffsetnumber点線のオフセット。(→ MDN)

スケール・ポイントラベル

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

属性説明
backdropColorColorポイントラベルの背景枠の色。
backdropPaddingPaddingポイントラベルの背景枠のパディングサイズ。
displaybooleanポイントラベルを表示するか否か。デフォルトは true。
callbackfunctionポイントラベルを生成する関数。
colorColorポイントラベルの色。
fontFontポイントラベルのフォント。
paddingnumberチャートとポイントラベル間のパディング。デフォルトは5。

アニメーション

属性説明
durationnumberアニメーションにかける時間(ミリ秒)。デフォルトは1000。
easingstringイージング関数。'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'。
delaynumberアニメーションを始めるまでの時間(ミリ秒)。
loopbooleanアニメーションをループする場合は true。
onProgressfunctionアニメーション実行中に呼ばれるコールバック。
onCompletefunctionアニメーション終了時に呼ばれるコールバック。

アニメーションズ

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

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

トランジション

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

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

インタラクション

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

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

チャート

属性説明
defaultsobjectデフォルト値。

デフォルト値

属性説明
elementsobjectエレメント。
layoutobjectレイアウト。
pluginsobjectプラグイン。
scalesobjectスケール。
animationobjectアニメーション。
animationsobjectアニメーションズ。
transitionsobjectトランジション。
localestringBCP 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)',

フォント

属性説明
familystringCSSで指定するフォント。
sizenumberフォントサイズ。(デフォルト12)。
stylestringスタイル
weightstring太さ。
lineHeightnumber | string1行の高さ。
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}

Copyright (C) 2021 杜甫々
初版:2021年5月23日 最終更新:2021年5月23日
http://www.tohoho-web.com/ex/chartjs-params.html