タイトル

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

タイトル設定

タイトル設定は 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: 'カスタムチャートタイトル'
        }
    }
})

results matching ""

    No results matching ""