タイトル
チャートタイトルでは、チャートの上部に描画するテキストを定義します。
タイトル設定
タイトル設定は options.title
名前空間に渡します。チャートタイトルのグローバルオプションは Chart.defaults.global.title
で定義されています。
名前 | 型 | 初期値 | 説明 |
---|---|---|---|
display |
Boolean |
false |
タイトルを表示します。 |
position |
String |
'top' |
タイトルの位置。 詳細... |
fontSize |
Number |
12 |
フォントサイズ。 |
fontFamily |
String |
"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" |
タイトルテキストのフォントファミリ。 |
fontColor |
Color |
'#666' |
フォントの色。 |
fontStyle |
String |
'bold' |
フォントスタイル。 |
padding |
Number |
10 |
タイトルテキストの上下に追加するピクセル数。 |
lineHeight |
Number/String |
1.2 |
個々のテキスト行の高さ。(MDNを参照。) |
text |
String/String[] |
'' |
表示するタイトルテキスト。配列として指定された場合、テキストは複数の行に表示されます。 |
位置
タイトルの位置position
として可能な値は、次のとおりです。
'top'
'left'
'bottom'
'right'
使用例
以下の例では、作成されたチャートにおいて「カスタムチャートタイトル」というタイトルを表示します。
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
title: {
display: true,
text: 'カスタムチャートタイトル'
}
}
})