タイトル

チャートタイトルは、チャートの上部に描画するテキストを定義します。

タイトルの設定

名前空間: `options.plugins.title`、チャートタイトルのグローバルオプションは`Chart.defaults.plugins.title`で定義されています。

名前	型	デフォルト	スクリプタブル	説明
align	文字列	'center'	はい	タイトルの配置。 詳細...
color	色	Chart.defaults.color	はい	テキストの色。
display	ブール値	false	はい	タイトルを表示しますか？
fullSize	ブール値	true	はい	このボックスがキャンバスの全幅/全高を取ることをマークします。`false`の場合、ボックスはサイズ変更され、チャート領域の上/横に配置されます。
position	文字列	'top'	はい	タイトルの位置。 詳細...
font	フォント	{weight: 'bold'}	はい	フォントを参照してください
padding	パディング	10	はい	タイトルの周囲に適用するパディング。`top`と`bottom`のみ実装されています。
text	文字列|文字列配列	''	はい	表示するタイトルテキスト。配列で指定した場合、テキストは複数行にレンダリングされます。

注記

より高度な視覚的なカスタマイズが必要な場合は、HTMLとCSSを使用してタイトルを実装できます。

位置

可能なタイトルの位置の値は次のとおりです。

• 'top'
• 'left'
• 'bottom'
• 'right'

配置

タイトルの配置。オプションは次のとおりです。

• 'start'
• 'center'
• 'end'

使用例

次の例では、作成されたチャートに「カスタムチャートタイトル」というタイトルを有効にします。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        plugins: {
            title: {
                display: true,
                text: 'Custom Chart Title'
            }
        }
    }
});

この例は、別々のトップとボトムのタイトルテキストパディングを指定する方法を示しています。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        plugins: {
            title: {
                display: true,
                text: 'Custom Chart Title',
                padding: {
                    top: 10,
                    bottom: 30
                }
            }
        }
    }
});