Font options include font family, size, weight, and style.
Font Options Copy Link
Each chart element has font options, including fontFamily
, fontSize
and fontWeight
. See API Options for more details.
Multi-Style Text Elements Copy Link
The chart title, subtitle and footnote support multiple font styles within the one element.
This is done by passing an array of TextSegment
objects, where each object contains a text
property and associated font style overrides.
{
title: {
text: [
{
text: '2025',
fontStyle: 'italic',
},
{
text: ' Financial Growth ',
fontSize: 26,
},
{
text: 'Overview',
color: '#ff7f0e',
fontFamily: 'monospace',
},
],
},
}
In the above example:
- The
title
,subtitle
andfootnote
use text segments to vary font options within the text. - The top level font options within each element are used for all text segments, unless overridden.
Label Formatters with Multi-Style Text Copy Link
Series labels and axes labels also support multiple font styles when using formatters.
Instead of returning a string, formatters can return an array of TextSegment
objects, where each segment contains a text
property and associated font style overrides.
{
series: [
{
type: 'bar',
label: {
formatter: ({ value }) => [
{ text: value.toString(), fontSize: 18, fontWeight: 'bold', color: 'white' },
{ text: '\nunits', fontSize: 11, color: 'rgba(255, 255, 255, 0.8)' },
],
},
},
],
}
In the above example:
- The label formatter returns an array of
TextSegment
objects instead of a string. - The first segment shows the value in large, bold, white text.
- The second segment displays "units" in smaller, semi-transparent text.
- Each text segment can have independent font styling (size, weight, color, style, family).
- Newline characters (
\n
) separate segments across multiple lines.
Font Theme Parameters Copy Link
The font options for the whole chart can be set once, by using theme parameters.
Extended Syntax for Font Families Copy Link
Font families can accept the following value types:
Syntax | Description |
---|---|
string | A CSS font-family value, such as 'Arial, sans-serif' . |
{ googleFont: 'IBM Plex Sans' } | A Google font. You must load the font or ask the chart to load it for you, see Loading Google Fonts below. |
['Arial', 'sans-serif'] | An array of fonts. Each item can be a string font name or a { googleFont: "..." } object. The browser will attempt to use the first font and fall back to later fonts if the first one fails to load or is not available on the host system. |
Loading Google Fonts Copy Link
To prevent potential licensing and privacy implications, the chart will not load Google fonts unless requested to.
If you want to use Google fonts, you should either:
- Set the chart's
loadGoogleFonts
option totrue
and use the{ googleFont: "..." }
object for the chart to load the font from Google's CDN. - Load the font yourself using a
@font-face
rule in your application's CSS.
If the font has not been loaded through either of the above methods, the theme will fall back to the most appropriate font available on the system.
In the above example:
- The
loadGoogleFonts
option is set totrue
to automatically load Google fonts. - The title uses the Google font
Pacifico
. - The subtitle uses the Google font
DM Serif Text
with a fallback tomonospace
. - The left axis uses the local system font
Helvetica
with a fallback toArial
thensans-serif
. - The bottom axis uses the Google font
Orbitron
.