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.global.title.

NameTypeDefaultDescription
displaybooleanfalseIs the title shown?
positionstring‘top’Position of title. more…
fontSizenumber12Font size.
fontFamilystring“‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif”Font family for the title text.
fontColorColor‘#666’Font color.
fontStylestring‘bold’Font style.
paddingnumber10Number of pixels to add above and below the title text.
lineHeightnumber|string1.2Height of an individual line of text. See MDN.
textstring|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'

Example Usage

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

  1. var chart = new Chart(ctx, {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. title: {
  6. display: true,
  7. text: 'Custom Chart Title'
  8. }
  9. }
  10. });