The basic font properties are named fontFamily, fontSize, fontStyle, and fontColor. Some objects have prefixed versions of these same properties. These objects are listed as follows:
| Object containing text element | Description | Font properties |
| Chart.defaults.global | Global defaults | defaultFontFamily, defaultFontSize, defaultFontStyle, defaultFontColor |
| Chart.defaults.global.title | Chart title | fontFamily, fontSize, fontStyle, fontColor |
| Chart.defaults.scale.ticks | Axis label | |
| Chart.defaults.scale.ticks.minor | Minor tick label | |
| Chart.defaults.scale.ticks.major | Major tick label | |
| Chart.defaults.global.legend | Legend label | |
| Chart.defaults.global.tooltips | Tooltip header | titleFontFamily, titleFontSize, titleFontStyle, titleFontColor |
| Chart.defaults.global.tooltips | Tooltip body | bodyFontFamily, bodyFontSize, bodyFontStyle, bodyFontColor |
| Chart.defaults.global.tooltips | Tooltip footer | footerFontFamily, footerFontSize, footerFontStyle, footerFontColor |
Objects that have font configuration properties
Since it's usually good practice to avoid using more than one font family for the whole chart, global options are the best place to configure this property. You can also set other font defaults:
Chart.defaults.global.defaultFontFamily =
'Courier, "Courier New", "Lucida Console", monospace';Chart.defaults.global.defaultFontSize = 12;
Chart.defaults.global.defaultFontStyle= 'normal';
Chart.defaults.global.defaultFontColor = '#333';
You can always choose to override specific properties where appropriate, such as the font size of a chart title:
Chart.defaults.global.title.fontSize = 24;
And you can override it again, setting a different value in the chart instance, if necessary:
const chart = new Chart("my-chart", {type: 'line', data: {…},
options: {
title: {
display: true,
text: "Very large title that doesn't fit in the default space",
fontSize: 20
}
}
});