Vue ChartsFonts

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 and footnote 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:

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