Fonts
QuickChart supports all Google Noto fonts. Custom fonts are available upon request.
To change font size and style, you may set values for each component of the chart:
- Chart.js v2
- Chart.js v3+
- For the legend, use
options.legend.labelsand setfontColor,fontStyle, orfontFamily(chart.js doc) - For the axis ticks, use
options.scales.<axis>.ticks.font*(chart.js doc). - For radar and polar area charts, there is only one axis, so use
options.scale.ticks.font*instead.- Radar charts can also adjust outer labels using
options.scale.pointLabels.font*(chart.js doc)
- Radar charts can also adjust outer labels using
- For the chart title, use
options.title.font*(chart.js doc)
- For the legend, use
options.plugins.legend.labelsand setcolor,font.style, orfont.family(chart.js doc) - For the axis ticks, use
options.scales.<axis>.ticks.fontand set properties likecolor,style, orfamily(chart.js doc). - For radar and polar area charts, there is only one scale, so use
options.scales.r.scale.ticks.fontand set properties likecolor,style, orfamily(chart.js doc). - For the chart title, use
options.plugins.title.fontand set properties likecolor,style, orfamily(chart.js doc)
The example below displays a number of chart font size, style, and color customizations for each component of the chart:
{
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Users',
data: [5,6,7,8,9],
}]
},
options: {
legend: {
labels: {
fontSize: 10,
fontStyle: 'bold',
fontColor: '#404040',
}
},
title: {
display: true,
text: 'My Chart Title',
fontSize: 20,
fontColor: '#000',
},
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
fontFamily: 'Mono',
fontColor: '#0f0',
},
},
],
xAxes: [
{
ticks: {
Here's another example with a chart that has a radial axis:
{
type: 'radar',
data: {
labels: [
'January',
'February',
'March',
],
datasets: [
{
data: [15.09, 15.67, 12.5],
label: 'D0',
},
{
data: [24.55, 28.91, 21.81],
label: 'D1',
},
],
},
options: {
scale: {
pointLabels: {
fontSize: 16,
fontStyle: 'bold italic',
},
ticks: {
fontColor: 'blue',
},
},
legend: {
fontFamily: 'mono',
},
},
}