Skip to main content

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 graph:

  • 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)

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: ...
Example chart { type: 'line', ...

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,...
Example chart { type: 'radar', ...

Open in full editor