Skip to main content
The font property in appearanceConfig allows you to customize the typography of your graphs by specifying custom font families and colors for headings and body text.

​
Adding Custom Fonts

​
Step 1: Load Your Fonts

First, ensure your custom fonts are loaded in your application via @font-face declarations or web font services (like Google Fonts).

​
Step 2: Define Fonts in fontList

Create a fontList array that defines each font you want to use: 
const config = {
  fontList: [
    {
      id: 'custom-serif',
      label: 'Custom Serif',
      fontFamily: 'Garamond, Baskerville, serif'
    },
    {
      id: 'custom-sans',
      label: 'Custom Sans',
      fontFamily: 'Helvetica Neue, Arial, sans-serif'
    }
  ]
}

​
Step 3: Apply Fonts Using fontId

Reference your fonts in appearanceConfig using the fontId property: 
const config = {
  fontList,
  appearanceConfig: {
    font: {
      heading: {
        fontId: 'custom-serif'  // References the id from fontList
      },
      body: {
        fontId: 'custom-sans'  // References the id from fontList
      }
    }
  }
}

​
Step 4: Customize Text Colors (Optional)

You can also specify custom colors for heading and body text: 
const config = {
  fontList,
  appearanceConfig: {
    font: {
      heading: {
        fontId: 'custom-serif',
        color: '#1a1a1a'  // Dark gray for headings
      },
      body: {
        fontId: 'custom-sans',
        color: '#4a5568'  // Medium gray for body text
      }
    }
  }
}

​
Reference

​
Font List

The fontList array defines custom fonts available for use in your graphs. Each font is an object with these properties:
​
id
string
Unique identifier for the font. Use this value in the fontId property to reference the font.
​
label
string
Display name shown in the font selection UI.
​
fontFamily
string
CSS font-family value. Can include multiple fallback fonts separated by commas (e.g., 'Helvetica Neue', Arial, sans-serif).

​
Font

The font property in appearanceConfig allows you to apply fonts and colors to different text elements in your graphs.
​
heading
object
Font configuration for graph titles and headings.
​
body
object
Font configuration for body text, labels, legends, and annotations.
The color property accepts any valid CSS color value:
  • Hex colors: "#ff6b6b"
  • RGB/RGBA: "rgb(255, 107, 107)" or "rgba(255, 107, 107, 0.8)"
  • Named colors: "crimson", "steelblue"
  • HSL/HSLA: "hsl(0, 100%, 50%)"