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

• For the legend, use options.legend.labels and set fontColor, fontStyle, or fontFamily (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)
• For the chart title, use options.title.font* (chart.js doc)

Chart.js v3+

• For the legend, use options.plugins.legend.labels and set color, font.style, or font.family (chart.js doc)
• For the axis ticks, use options.scales.<axis>.ticks.font and set properties like color, style, or family (chart.js doc).
• For radar and polar area charts, there is only one scale, so use options.scales.r.scale.ticks.font and set properties like color, style, or family (chart.js doc).
• For the chart title, use options.plugins.title.font and set properties like color, style, or family (chart.js doc)

The example below displays a number of chart font size, style, and color customizations for each component of the chart:

Chart URL: https://quickchart.io/chart?c={ type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May'], datasets: [{ label: 'Users', data: ...

Open in full editor

Here's another example with a chart that has a radial axis:

Chart URL: https://quickchart.io/chart?c={ type: 'radar', data: { labels: [ 'January', 'February', 'March', ], datasets: [ { data: [15.09,...

Open in full editor