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:
Here's another example with a chart that has a radial axis: