2021-03-30 16:32:39 +02:00
# Title
2017-03-21 01:36:54 +01:00
The chart title defines text to draw at the top of the chart.
## Title Configuration
2020-05-21 23:07:06 +02:00
2021-02-19 17:44:05 +01:00
Namespace: `options.plugins.title` , the global options for the chart title is defined in `Chart.defaults.plugins.title` .
2017-03-21 01:36:54 +01:00
2021-04-02 18:13:43 +02:00
| Name | Type | Default | [Scriptable ](../general/options.md#scriptable-options ) | Description
| ---- | ---- | ------- | :----: | -----------
| `align` | `string` | `'center'` | Yes | Alignment of the title. [more... ](#align )
| `color` | [`Color` ](../general/colors.md ) | `Chart.defaults.color` | Yes | Color of text.
| `display` | `boolean` | `false` | Yes | Is the title shown?
| `fullSize` | `boolean` | `true` | Yes | Marks that this box should take the full width/height of the canvas. If `false` , the box is sized and placed above/beside the chart area.
| `position` | `string` | `'top'` | Yes | Position of title. [more... ](#position )
2021-04-10 21:58:11 +02:00
| `font` | `Font` | `{weight: 'bold'}` | Yes | See [Fonts ](../general/fonts.md )
2021-04-02 18:13:43 +02:00
| `padding` | [`Padding` ](../general/padding.md ) | `10` | Yes | Padding to apply around the title. Only `top` and `bottom` are implemented.
| `text` | `string` \|`string[]` | `''` | Yes | Title text to display. If specified as an array, text is rendered on multiple lines.
2017-03-21 01:36:54 +01:00
### Position
2020-05-21 23:07:06 +02:00
2017-03-21 01:36:54 +01:00
Possible title position values are:
2020-05-21 23:07:06 +02:00
2017-03-21 01:36:54 +01:00
* `'top'`
* `'left'`
* `'bottom'`
* `'right'`
2020-01-05 20:59:57 +01:00
## Align
Alignment of the title. Options are:
* `'start'`
* `'center'`
* `'end'`
2017-03-21 01:36:54 +01:00
## Example Usage
The example below would enable a title of 'Custom Chart Title' on the chart that is created.
```javascript
2021-10-13 20:51:33 +02:00
const chart = new Chart(ctx, {
2017-03-21 01:36:54 +01:00
type: 'line',
data: data,
options: {
2020-11-25 07:50:12 +01:00
plugins: {
title: {
display: true,
text: 'Custom Chart Title'
}
2017-03-21 01:36:54 +01:00
}
}
2019-01-29 13:34:16 +01:00
});
2017-03-21 01:36:54 +01:00
```
2019-12-20 14:21:20 +01:00
This example shows how to specify separate top and bottom title text padding:
```javascript
2021-10-13 20:51:33 +02:00
const chart = new Chart(ctx, {
2019-12-20 14:21:20 +01:00
type: 'line',
data: data,
options: {
2020-11-25 07:50:12 +01:00
plugins: {
title: {
display: true,
text: 'Custom Chart Title',
padding: {
top: 10,
bottom: 30
}
2019-12-20 14:21:20 +01:00
}
}
}
});
```