JavaScript ChartsText

This section describes how to style the text used throughout a chart, including titles, labels and other elements. It covers font options, applying multiple font styles and inline images within a single text element.

Fonts Copy Link

Each chart element has font options, including fontFamily, fontSize and fontWeight. The font options for the whole chart can be set once using theme parameters.

Font Families Copy Link

Font families can accept the following value types:

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 to true 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 to true to automatically load Google fonts.
• The title uses the Google font Pacifico.
• The subtitle uses the Google font DM Serif Text with a fallback to monospace.
• The left axis uses the local system font Helvetica with a fallback to Arial then sans-serif.
• The bottom axis uses the Google font Orbitron.

Multi-Style Text Elements Copy Link

The chart title, subtitle and footnote support multiple font styles within one element.

{
    title: {
        text: [
            {
                text: '2025',
                fontStyle: 'italic',
            },
            {
                text: ' Financial Growth ',
                fontSize: 26,
            },
            {
                text: 'Overview',
                color: '#ff7f0e',
                fontFamily: 'monospace',
            },
        ],
    },
}

In the above example:

• Pass an array of TextSegment objects, each with a text property and font style overrides.
• The top-level font options on each element apply to all segments, unless a segment overrides them.

Label Formatters with Multi-Style Text Copy Link

Series and axis label formatters also support multiple font styles.

{
    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 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.

Aligning Segments Vertically Copy Link

Segments share a baseline by default. Set verticalAlign: 'middle' to centre it instead.

{
    title: {
        text: [
            { text: '🚀 ', fontSize: 36, verticalAlign: 'baseline' },
            { text: 'Quarterly ', fontSize: 16, verticalAlign: 'baseline' },
            { text: 'Spending ', fontSize: 28, verticalAlign: 'baseline' },
            { text: 'Growth', fontSize: 20, verticalAlign: 'baseline' },
        ],
    },
}

In this example:

• Use the buttons to align every segment in the title, moving the large and small text together.
• 'baseline' and 'bottom' differ where text has descenders (such as the p, y, and g in the title): baseline aligns the text baselines, while bottom aligns the lowest pixel of each segment.
• verticalAlign applies per segment, so a single line can also mix baseline-aligned text with centred emoji or icon glyphs.

Displaying Images and Text Copy Link

Text Segments support adding inline images using multiple approaches.

Inline Image Segments Copy Link

Provide any image URL through the url property:

{
    axes: {
        x: {
            type: 'category',
            label: {
                formatter: ({ value }) => [
                    {
                        type: 'image',
                        url: flagsUrl + `${value}.png`,
                        width: 20,
                        height: 15,
                        verticalAlign: 'middle',
                    },
                    { text: ` ${String(value).toUpperCase()}`, fontWeight: 'bold' },
                ],
            },
        },
    },
}

An image segment uses type: 'image' and supports:

• width and height - these are required.
• verticalAlign - vertical alignment against the text.
• cornerRadius, padding - for styling the image box.
• backgroundFill - also shows as a placeholder while the image loads or if it fails.
• overflowStrategy- drop priority for label collision avoidance.
  • 'hide' - images are dropped before text is truncated.
  • 'keep' images take priority, dropping trailing text first and only dropping the image if it cannot fit on its own.

Block Image Segments Copy Link

Set block: true on an image that begins a row, and the text segments that follow wrap into a column to its right instead of continuing on the same line.

{
    type: 'image',
    url: brandIconsUrl + `${datum.slug}.svg`,
    width: 36,
    height: 36,
    block: true,
    padding: 6,
    backgroundFill: 'rgba(0, 0, 0, 0.35)',
    cornerRadius: 8,
}

In this example:

• The block image segment anchors to the left of its row, with the following text wrapping into a column to its right. The column can span multiple lines.
• Defaults verticalAlign to 'middle', centring the image against the text column beside it.
• Is dropped when its row has no space for it, leaving the text to use the full width. This is controlled by the overflowStrategy option.

Emojis and Font Icons Copy Link

Emojis and font icons render through native canvas, with no API changes required. Both can be mixed freely with text within a single element.

In this example:

• The axis labels use number emojis within the text property of a TextSegment object.
• The title uses a FontAwesome glyph to add a chart icon and a star.
  • Font icons set the icon font with fontFamily and fontWeight on the segment and use the icon's glyph as the text.
  • They are loaded via CSS, with the chart downloading any referenced fonts and re-rendering once they are ready.

{
    axes: {
        x: {
            type: 'category',
            label: {
                formatter: ({ value }) => [
                    { text: '1️⃣ ', fontSize: 18, verticalAlign: 'middle' },
                    { text: String(value), fontWeight: 'bold', verticalAlign: 'middle' },
                ],
            },
        },
    },
}

{
    title: {
        text: [
            {
                text: `${ICON_CHART_LINE} `,
                fontFamily: ICON_FAMILY_SOLID,
                fontWeight: SOLID_WEIGHT,
                color: '#1f77b4',
                verticalAlign: 'middle',
            },
            { text: 'Top Markets 2025', fontWeight: 'bold' },
            {
                text: ` ${ICON_STAR}`,
                fontFamily: ICON_FAMILY_SOLID,
                fontWeight: SOLID_WEIGHT,
                color: '#f1c40f',
                verticalAlign: 'middle',
            },
        ],
        fontSize: 22,
    },
}

API Reference Copy Link

See API Options for the full list of font options on each chart element.