---
title: "Text"
framework: javascript
version: "14.1.0"
---

# Text

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

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](https://www.ag-grid.com/charts/javascript/themes/#parameters).

### Font Families

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 [Google Fonts](#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. |

### Google Fonts

#### Google Fonts

```ts
import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";

ModuleRegistry.registerModules([
  AnimationModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
  ContextMenuModule,
]);

const options: AgChartOptions = {
  title: {
    text: "Title in Pacifico",
    fontFamily: { googleFont: "Pacifico" },
    fontSize: 25,
    maxHeight: 50,
  },
  subtitle: {
    text: "Subtitle in DM Serif Text",
    fontFamily: [{ googleFont: "DM Serif Text" }, "monospace"],
    fontSize: 18,
  },
  data: [
    { month: "Jan", avgTemp: 2.3, iceCreamSales: 162000 },
    { month: "Mar", avgTemp: 6.3, iceCreamSales: 302000 },
    { month: "May", avgTemp: 16.2, iceCreamSales: 800000 },
    { month: "Jul", avgTemp: 22.8, iceCreamSales: 1254000 },
    { month: "Sep", avgTemp: 14.5, iceCreamSales: 950000 },
    { month: "Nov", avgTemp: 8.9, iceCreamSales: 200000 },
  ],
  series: [
    {
      type: "line",
      xKey: "month",
      yKey: "iceCreamSales",
      yName: "Ice Cream Sales",
    },
  ],
  axes: {
    y: {
      type: "number",
      label: { fontFamily: ["Helvetica", "Arial", "sans-serif"] },
    },
    x: {
      type: "category",
      label: {
        fontFamily: { googleFont: "Orbitron" },
        fontSize: 12,
      },
    },
  },
  loadGoogleFonts: true,
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Google Fonts](https://www.ag-grid.com/charts/typescript/text/examples/google-fonts)

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

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

#### Multi-Style Text

```ts
import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";

ModuleRegistry.registerModules([
  AnimationModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
  ContextMenuModule,
]);

const options: AgChartOptions = {
  title: {
    text: [
      {
        text: "2025",
        fontStyle: "italic",
      },
      {
        text: " Financial Growth ",
        fontSize: 26,
      },
      {
        text: "Overview",
        color: "#ff7f0e",
        fontFamily: "monospace",
      },
    ],
    color: "#1f77b4",
    fontSize: 34,
    fontWeight: "bold",
  },
  subtitle: {
    text: [
      { text: "Quarterly Revenue vs Expenses Analysis", color: "#2ca02c" },
      { text: " for Q1 & Q2 2025", color: "#d62728" },
    ],
    fontSize: 18,
    fontWeight: "bold",
  },
  footnote: {
    text: [
      { text: "All of this " },
      { text: "data is fictitious", fontWeight: "bold", fontSize: 15 },
      { text: " and for example purposes only." },
    ],
  },
  data: [
    { quarter: "Q1", revenue: 500000, expenses: 450000 },
    { quarter: "Q2", revenue: 750000, expenses: 600000 },
    { quarter: "Q3", revenue: 1000000, expenses: 800000 },
    { quarter: "Q4", revenue: 1200000, expenses: 950000 },
  ],
  series: [
    {
      type: "line",
      xKey: "quarter",
      yKey: "revenue",
      yName: "Revenue",
    },
    {
      type: "line",
      xKey: "quarter",
      yKey: "expenses",
      yName: "Expenses",
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Multi-Style Text](https://www.ag-grid.com/charts/typescript/text/examples/text-segments)

```js
{
    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

Series and axis label formatters also support multiple font styles.

#### Multi-Style Label Formatters

```ts
import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  ContextMenuModule,
]);

const options: AgChartOptions = {
  title: {
    text: "Product Sales Performance",
  },
  subtitle: {
    text: "Q4 2025 Sales vs Target",
  },
  data: getData(),
  series: [
    {
      type: "bar",
      xKey: "product",
      yKey: "sales",
      yName: "Sales",
      label: {
        enabled: true,
        formatter: ({ value }) => {
          return [
            {
              text: value.toString(),
              fontSize: 18,
              fontWeight: "bold",
              color: "white",
            },
            {
              text: "\nunits",
              fontSize: 11,
              color: "rgba(255, 255, 255, 0.8)",
            },
          ];
        },
      },
    },
  ],
  axes: {
    y: {
      type: "number",
      label: {
        formatter: ({ value }) => {
          if (value === 0) return "0";
          return [
            {
              text: value.toString(),
              fontSize: 13,
              fontWeight: "bold",
            },
            {
              text: " units",
              fontSize: 10,
            },
          ];
        },
      },
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Multi-Style Label Formatters](https://www.ag-grid.com/charts/typescript/text/examples/label-formatters)

```js
{
    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

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

#### Aligning Segments Vertically

```ts
import {
  AgChartOptions,
  AgCharts,
  BarSeriesModule,
  CategoryAxisModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

function buildTitle(verticalAlign: "baseline" | "top" | "middle" | "bottom") {
  return [
    { text: "🚀 ", fontSize: 36, verticalAlign },
    { text: "Quarterly ", fontSize: 16, verticalAlign },
    { text: "Spending ", fontSize: 28, verticalAlign },
    { text: "Growth", fontSize: 20, verticalAlign },
  ];
}
ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  NumberAxisModule,
]);

const options: AgChartOptions = {
  title: {
    text: buildTitle("baseline"),
    fontWeight: "bold",
  },
  data: [
    { quarter: "Q1", sales: 120 },
    { quarter: "Q2", sales: 180 },
    { quarter: "Q3", sales: 240 },
    { quarter: "Q4", sales: 310 },
  ],
  series: [
    {
      type: "bar",
      xKey: "quarter",
      yKey: "sales",
      yName: "Sales",
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function setVerticalAlign(
  verticalAlign: "baseline" | "top" | "middle" | "bottom",
) {
  chart.updateDelta({ title: { text: buildTitle(verticalAlign) } });
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).setVerticalAlign = setVerticalAlign;
}
```

[Live example: Aligning Segments Vertically](https://www.ag-grid.com/charts/typescript/text/examples/text-vertical-align)

```js
{
    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

Text Segments support adding inline images using multiple approaches.

### Inline Image Segments

#### Inline Images

```ts
import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";
import { TData, getData } from "./data";

const flagsUrl = "https://www.ag-grid.com/charts/example-assets/flags/";
const arrowUp =
  "data:image/svg+xml;utf8," +
  encodeURIComponent(
    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#22c55e" d="M8 2 14 12H2z"/></svg>',
  );
const arrowDown =
  "data:image/svg+xml;utf8," +
  encodeURIComponent(
    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#d62728" d="M8 14 2 4h12z"/></svg>',
  );
ModuleRegistry.registerModules([
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const options: AgChartOptions = {
  title: {
    text: [
      { text: "Top Markets " },
      {
        type: "image",
        url: flagsUrl + "us.png",
        width: 24,
        height: 18,
        verticalAlign: "middle",
      },
      { text: " 2025", fontWeight: "bold" },
    ],
    fontSize: 22,
  },
  subtitle: {
    text: "Quarterly revenue by country",
  },
  data: getData(),
  series: [
    {
      type: "bar",
      xKey: "code",
      yKey: "revenue",
      yName: "Revenue",
      label: {
        enabled: true,
        fill: { ref: "backgroundColor" } as any,
        color: { ref: "foregroundColor" },
        formatter: ({ datum }) => {
          const d = datum as TData;
          return [
            { text: `${d.revenue}M `, fontWeight: "bold" },
            {
              type: "image",
              url: d.delta >= 0 ? arrowUp : arrowDown,
              width: 12,
              height: 12,
              verticalAlign: "middle",
            },
          ];
        },
      },
    },
  ],
  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" },
        ],
      },
    },
    y: {
      type: "number",
      label: { formatter: ({ value }) => `$${value}M` },
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Inline Images](https://www.ag-grid.com/charts/typescript/text/examples/inline-images)

Provide any image URL through the `url` property:

```js
{
    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](#aligning-segments-vertically).
- `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

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.

#### Block-leading Image

```ts
import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  LegendModule,
  ModuleRegistry,
  TreemapSeriesModule,
} from "ag-charts-enterprise";
import { TData, getData } from "./data";

const brandIconsUrl = "https://www.ag-grid.com/charts/example-assets/brand-icons/";
ModuleRegistry.registerModules([
  AnimationModule,
  LegendModule,
  TreemapSeriesModule,
]);

const options: AgChartOptions = {
  data: getData(),
  series: [
    {
      type: "treemap",
      labelKey: "name",
      sizeKey: "value",
      group: {
        label: {
          fontSize: 14,
          color: "#fff",
        },
      },
      tile: {
        label: {
          formatter: ({ datum }) => {
            const d = datum as TData;
            return [
              {
                type: "image",
                url: brandIconsUrl + `${d.slug}.svg`,
                width: 36,
                height: 36,
                block: true,
                padding: 6,
                backgroundFill: "rgba(0, 0, 0, 0.35)",
                cornerRadius: 8,
              },
              { text: d.name, fontWeight: "bold", verticalAlign: "middle" },
              { text: `\n$${d.value}B`, color: "rgba(0, 0, 0, 0.6)" },
            ];
          },
          fontSize: 16,
          minimumFontSize: 10,
          spacing: 2,
        },
        secondaryLabel: { enabled: false },
      },
    },
  ],
  title: { text: "Top Tech Brand Values, 2024" },
  subtitle: { text: "Brand value in USD billions" },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Block-leading Image](https://www.ag-grid.com/charts/typescript/text/examples/inline-images-treemap)

```js
{
    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

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

#### Inline Emoji and Font Icons

```ts
import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";
import { TData, getData } from "./data";

const data = getData();
// Keycap number emoji (U+0031..U+0035 + U+FE0F + U+20E3) rank each country by position.
const rankEmoji = ["1️⃣", "2️⃣", "3️⃣", "4️⃣", "5️⃣"];
const rankByCountry = new Map(data.map((d, i) => [d.country, rankEmoji[i]]));
const ICON_FAMILY_SOLID = "Font Awesome 6 Free";
const SOLID_WEIGHT = 900;
const ICON_CHART_LINE = "";
const ICON_STAR = "";
ModuleRegistry.registerModules([
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const options: AgChartOptions = {
  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,
  },
  subtitle: {
    text: [
      {
        text: `${ICON_CHART_LINE} `,
        fontFamily: ICON_FAMILY_SOLID,
        fontWeight: SOLID_WEIGHT,
        color: "#1f77b4",
        verticalAlign: "middle",
      },
      { text: "Quarterly revenue by country" },
    ],
  },
  data,
  series: [
    {
      type: "bar",
      xKey: "country",
      yKey: "revenue",
      yName: "Revenue",
      label: {
        enabled: true,
        formatter: ({ datum }) => `${(datum as TData).revenue}M`,
      },
    },
  ],
  axes: {
    x: {
      type: "category",
      label: {
        formatter: ({ value }) => [
          {
            text: `${rankByCountry.get(String(value)) ?? ""} `,
            fontSize: 18,
            verticalAlign: "middle",
          },
          { text: String(value), fontWeight: "bold", verticalAlign: "middle" },
        ],
      },
    },
    y: {
      type: "number",
      label: { formatter: ({ value }) => `$${value}M` },
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Inline Emoji and Font Icons](https://www.ag-grid.com/charts/typescript/text/examples/inline-emoji-icons)

In this example:

- The axis labels use number emojis within the `text` property of a `TextSegment` object.
- The title uses a [FontAwesome](https://fontawesome.com/) 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.

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

```js
{
    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

See [API Options](https://www.ag-grid.com/charts/options/) for the full list of font options on each chart element.