Files
Chart.js/docs/docs/configuration/title.md
2020-09-01 11:30:15 -04:00

1.9 KiB

title
title
Title

The chart title defines text to draw at the top of the chart.

Title Configuration

The title configuration is passed into the options.title namespace. The global options for the chart title is defined in Chart.defaults.title.

Name Type Default Description
align string 'center' Alignment of the title. more...
display boolean false Is the title shown?
position string 'top' Position of title. more...
font Font defaults.font See Fonts
padding number|{top: number, bottom: number} 10 Adds padding above and below the title text if a single number is specified. It is also possible to change top and bottom padding separately.
lineHeight number|string 1.2 Height of an individual line of text. See MDN.
text string|string[] '' Title text to display. If specified as an array, text is rendered on multiple lines.

Position

Possible title position values are:

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

Align

Alignment of the title. Options are:

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

Example Usage

The example below would enable a title of 'Custom Chart Title' on the chart that is created.

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

This example shows how to specify separate top and bottom title text padding:

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