mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 20:29:12 +02:00
5f6c3df6dc
* Add alignment options for title plugin. Alignment can be set to 'start', 'center'. or 'end'. A new sample has been added as well. * Update sample file title
2.1 KiB
2.1 KiB
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... |
fontSize |
number |
12 |
Font size. |
fontFamily |
string |
"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" |
Font family for the title text. |
fontColor |
Color |
'#666' |
Font color. |
fontStyle |
string |
'bold' |
Font style. |
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
}
}
}
});