---
title: "Key Features"
framework: react
version: "14.1.0"
---

# Key Features

This page provides an overview of and introduction to popular features available in AG Charts. Learn how to use Community features, configure and customise themes, and get started with Enterprise features.

> **Note**
>
> The following sections assume a level of familiarity with common Charts concepts. If you're new to Charts in general, we recommend starting with our [Introductory Tutorial](https://www.ag-grid.com/charts/react/create-a-basic-chart/) instead.

## Displaying Data

#### Configuring Axes Example

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    data: getData(),
    series: [
      {
        type: "bar",
        xKey: "year",
        yKey: "women",
        yName: "Women",
      },
      {
        type: "bar",
        xKey: "year",
        yKey: "men",
        yName: "Men",
      },
      {
        type: "line",
        xKey: "year",
        yKey: "portions",
        yName: "Portions",
        yKeyAxis: "ySecondary",
      },
    ],
    axes: {
      y: {
        type: "number",
        position: "left",
        title: {
          text: "Adults Who Eat 5 A Day (%)",
        },
        label: {
          formatter: ({ value }) => value + "%",
        },
      },
      ySecondary: {
        type: "number",
        position: "right",
        title: {
          text: "Portions Consumed (Per Day)",
        },
      },
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Configuring Axes Example](https://www.ag-grid.com/charts/reactFunctionalTs/key-features/examples/configuring-axes-example)

### Series and Data

A chart can contain multiple series, which are provided in the `series` array.

Every series has its own [series options](https://www.ag-grid.com/charts/options/#reference-AgChartOptions-series), but they all share a common set of configurations. These include a `type` as well as `_Key` properties to connect to the visualisation to the data, such as `xKey` and `yKey` for cartesian charts.

```js
{
    data: [
        { year: '2001', women: 25 },
        { country: '2003', value: 26 },
    ],
    series: [
        {
            type: 'bar',
            xKey: 'year',
            yKey: 'women',
        },
    ],
}
```

### Axes

Cartesian charts can use [Categorical](https://www.ag-grid.com/charts/react/axes-types/#category), [Numerical](https://www.ag-grid.com/charts/react/axes-types/#number), [Time](https://www.ag-grid.com/charts/react/axes-types/#time), or [Logarithmic](https://www.ag-grid.com/charts/react/axes-types/#log) axes. These do not need to be configured unless customisation is required.

Use `axes.position` to control the position of the axis, and `axes.type` to define the type.

```js
{
    axes: {
        x: {
            type: 'category', // category | grouped-category | number | log | time | ordinal-time
            position: 'bottom', // top | right | bottom | left
        },
        y: {
            type: 'number', // category | grouped-category | number | log | time | ordinal-time
            position: 'left', // top | right | bottom | left
        },
    },
}
```

Polar charts such as the [Radar Line Series](https://www.ag-grid.com/charts/react/radar-line-series/), use [Polar Axes](https://www.ag-grid.com/charts/react/radar-line-series/#customisation) which have similar options.

### Secondary Axes

Charts can have more than one axis in each direction, allowing for series with different domains to be displayed on the same chart.

Use the series `xKeyAxis` / `yKeyAxis` property to link a series to a specific axis.

```js
{
    series: [
        {
            type: 'bar',
            yKeyAxis: 'y',
            //...
        },
        {
            type: 'bar',
            yKeyAxis: 'ySecondary',
            //...
        },
    ],
    axes: {
        y: {
            type: 'number',
            position: 'left',
        },
        ySecondary: {
            type: 'number',
            position: 'right',
        },
    },
}
```

### Axis Intervals

The [Axis Interval](https://www.ag-grid.com/charts/react/axes-intervals/) determines which axis labels, grid lines and ticks are shown along the axis. Intervals can be defined in [steps](https://www.ag-grid.com/charts/react/axes-intervals/#step), [absolute values](https://www.ag-grid.com/charts/react/axes-intervals/#values) or dynamically with [min/max spacing](https://www.ag-grid.com/charts/react/axes-intervals/#min--max-spacing).

Use `axes.interval` to control the interval of the axis.

```js
{
    axes: {
        y: {
            type: 'number',
            interval: { step: 5 }, // or { values: [0, 5, 10] } | { minSpacing: 50, maxSpacing: 100 }
        },
    },
}
```

### Axis Labels

[Axis labels](https://www.ag-grid.com/charts/react/axes-labels/) can be styled, rotated and configured to automatically avoid collisions.

Use `axes.label` to control the appearance of the axis labels.

```js
{
    axes: {
        y: {
            type: 'number',
            label: {
                minSpacing: 20,
                avoidCollisions: false, // enabled by default
                autoRotate: false, // enabled by default
            },
        },
    },
}
```

### Value Formatting

Data values are displayed in many places, such as series and axes labels. Use the chart-level or item-level `formatter` callbacks to set the format of these.

The `params` contain contextual information necessary to identify the item, and the callback should return a `String` object.

```js
formatter: function (params) {
    return params.value * 100 + '%';
}
```

## Data Elements

#### Enhancing Data Example

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  CategoryAxisModule,
  CrossLinesModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { DataType, getData } from "./data";

const customItems = ["Jun", "Jul", "Aug", "Sep"];
ModuleRegistry.registerModules([
  CategoryAxisModule,
  CrossLinesModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions<DataType>>({
    data: getData(),
    series: [
      {
        type: "line",
        xKey: "month",
        yKey: "temp",
        yName: "Temperature",
        marker: {
          shape: "diamond",
          size: 12,
          fill: "green",
          itemStyler: ({ datum, fill, highlightState }) => {
            return {
              fill: customItems.includes(datum.month)
                ? highlightState === "highlighted-item"
                  ? "yellow"
                  : "red"
                : fill,
            };
          },
        },
      },
    ],
    legend: {
      enabled: true,
      position: "top",
      toggleSeries: false,
    },
    axes: {
      x: {
        type: "category",
        title: {
          text: "Month",
        },
        crossLines: [
          {
            type: "range",
            range: ["Jun", "Sep"],
          },
        ],
      },
      y: {
        type: "number",
        title: {
          text: "Temperature (°C)",
        },
        crossLines: [
          {
            type: "line",
            value: 11,
          },
        ],
      },
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Enhancing Data Example](https://www.ag-grid.com/charts/reactFunctionalTs/key-features/examples/enhancing-data-example)

### Legend

[Legends](https://www.ag-grid.com/charts/react/legend/) are enabled by default on charts with more than one series.

Use the `legend` options to configure the legend position and size and to disable the series toggling functionality on legend click.

```js
{
    legend: {
        enabled: true, // defaults to true for charts with multiple series
        position: 'top', // 'bottom', 'right', 'left',
        toggleSeries: false,
    },
}
```

### Cross Lines

Use the `crossLines` array in the axis options to add `line` or `range` [Cross Lines](https://www.ag-grid.com/charts/react/axes-cross-lines/) along any axis.

```js
{
    axes: {
        y: {
            crossLines: [
                {
                    type: 'line',
                    value: 11,
                },
                {
                    type: 'range',
                    range: ['Jun', 'Sep'],
                },
            ],
        },
    },
}
```

### Conditional Styling

[Item Stylers](https://www.ag-grid.com/charts/react/stylers/#item-stylers) allow customisation of the visual appearance of series and markers based on certain conditions.

Use the `itemStyler` callback function to customise the appearance of a specific bar or marker:

```js
{
    series: [
        {
            marker: {
                itemStyler: ({ datum, xKey, fill, highlighted }) => {
                    return {
                        fill: datum[xKey] === 'Jul' ? (highlighted ? 'lime' : 'red') : fill,
                    };
                },
            },
        },
    ],
}
```

## Layout and Styling

#### Customising Charts Example

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: `Renewable Fuel Sources`,
    },
    subtitle: {
      text: `Kilotonnes of Oil Equivalent`,
    },
    theme: {
      overrides: {
        common: {
          title: {
            fontSize: 22,
            color: "#444444",
          },
        },
        bar: {
          series: {
            label: {
              enabled: true,
              fontSize: 14,
              placement: "outside-end",
            },
            strokeWidth: 1,
          },
        },
      },
    },
    data: getData(),
    series: [
      {
        type: "bar",
        xKey: "year",
        yKey: "Onshore wind",
        yName: "Onshore Wind",
        fill: { type: "gradient" },
      },
      {
        type: "bar",
        xKey: "year",
        yKey: "Offshore wind",
        yName: "Offshore Wind",
        fill: { type: "pattern" },
      },
      {
        type: "bar",
        xKey: "year",
        yKey: "Solar photovoltaics",
        yName: "Solar Photovoltaics",
        fill: {
          type: "image",
          url: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="192" height="144" viewBox="0 0 64 48" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2; fill: white;"><path d="M58 10H41l-8 8h25v-8Z"/><path d="M43 30v-8H29l-8 8h22Z"/><path d="M13 38.01l4-4.01h14v8H13v-3.99Z"/><path d="M41 10l-4 4H11V6h30v4Z"/><path d="M16 26h9l8-8H16v8Z"/><path d="M6 37.988h7.012L21 30H6.008v8Z"/></svg>',
          width: 64,
          height: 48,
          backgroundFill: "#004290",
        },
      },
      {
        type: "bar",
        xKey: "year",
        yKey: "Plant biomass",
        yName: "Plant Biomass",
        fill: { type: "gradient" },
      },
      {
        type: "bar",
        xKey: "year",
        yKey: "Landfill gas",
        yName: "Landfill Gas",
        fill: { type: "pattern" },
      },
    ],
    axes: {
      x: { type: "category", paddingOuter: 0 },
    },
    legend: {
      fill: "#f6f6f6",
      border: {
        stroke: "#dddddd",
      },
      padding: 10,
      item: {
        label: {
          color: "#333333",
        },
      },
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Customising Charts Example](https://www.ag-grid.com/charts/reactFunctionalTs/key-features/examples/customizing-charts-example)

### Fills and Strokes

Each series type has its own [series specific styling options](https://www.ag-grid.com/charts/options/#reference-AgChartOptions-series) depending on the visualisation, with the most common properties being `fill` and `stroke`.

[Series Fills](https://www.ag-grid.com/charts/react/fills/) can be a solid colour, [a gradient](https://www.ag-grid.com/charts/react/fills/#gradients), [a pattern](https://www.ag-grid.com/charts/react/fills/#patterns) or [an image](https://www.ag-grid.com/charts/react/fills/#images).

Strokes can have a `stroke` colour, as well as a `strokeWidth` and a `lineDash[]` array.

### Marker Shape

[Markers](https://www.ag-grid.com/charts/react/markers/) can be customised to change their [shape, size, and style](https://www.ag-grid.com/charts/react/markers/#marker-shape-size-and-colour).

Use the `series.marker` property to customise markers.

```js
{
    series: [
        {
            stroke: 'maroon',
            marker: {
                shape: 'square', // defaults to 'circle'
                size: 20,
                fill: 'red',
                stroke: 'maroon',
            },
        },
    ],
}
```

### Chart Elements

Various chart elements can be customised to change their [Fills & Borders](https://www.ag-grid.com/charts/react/fills-borders/) as well as padding and corner radius.

### Themes

AG Charts comes with 5 [Themes](https://www.ag-grid.com/charts/react/themes/), each available in light or dark mode.

Use the `theme` property to set the theme:

```js
{
    theme: 'ag-default', // or 'ag-sheets', 'ag-polychroma', 'ag-material', 'ag-vivid'
}
```

Themes can also be customised or created with the [Theming API](https://www.ag-grid.com/charts/themes-api/).

Use `params` to set styles across the whole chart, `palette` to define the colour palette used for the datapoints, and `overrides` to change a specific default within the base theme.

```js
const customTheme = {
    palette: {
        //these are used by each series in rotation
        fills: ['#5C2983', '#0076C5', '#21B372', '#FDDE02', '#F76700', '#D30018'],
        strokes: ['#881008'],
    },
    params: {
        // these are used by all chart elements unless explicitly overridden
        fontFamily: 'Georgia, serif',
        fontSize: 16,
    },
    overrides: {
        //used as default for all series types
        common: {
            title: {
                fontSize: 24,
            },
        },
        bar: {
            //used for bar series only
            series: {
                label: {
                    enabled: true,
                    color: 'white',
                },
            },
        },
    },
};
```

### Chart Size

The chart will dynamically [auto-size](https://www.ag-grid.com/charts/react/layout/#chart-size) to the size of its container element, defaulting to a minimum width and height of 300px.

Use the `width`/`minWidth` and `height`/`minHeight` options if a fixed size is required:

```js
{
    width: 800,
    height: 600,
}
```

### RTL Text & Layout

AG Charts supports [right-to-left (RTL)](https://www.ag-grid.com/charts/react/rtl/) text direction for languages such as Arabic, Persian, and Hebrew.

Set `enableRtl` to enable RTL layout, or use the `dir="rtl"` attribute on the chart container for automatic detection.

```js
{
    enableRtl: true,
}
```

## Interactivity

#### User Interactions Example

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  UnitTimeAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
  UnitTimeAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    data: getData(),
    title: {
      text: `Renewable Fuel Sources`,
    },
    subtitle: {
      text: `Kilotonnes of Oil Equivalent`,
    },
    tooltip: { mode: "shared" },
    theme: {
      overrides: {
        line: {
          series: {
            highlight: {
              highlightedItem: {
                strokeWidth: 5,
              },
              unhighlightedSeries: {
                opacity: 0.2,
              },
            },
            interpolation: {
              type: "smooth",
            },
          },
        },
      },
    },
    series: [
      {
        type: "line",
        xKey: "year",
        yKey: "Onshore wind",
        yName: "Onshore Wind",
      },
      {
        type: "line",
        xKey: "year",
        yKey: "Offshore wind",
        yName: "Offshore Wind",
      },
      {
        type: "line",
        xKey: "year",
        yKey: "Solar photovoltaics",
        yName: "Solar Photovoltaics",
      },
      {
        type: "line",
        xKey: "year",
        yKey: "Plant biomass",
        yName: "Plant Biomass",
      },
      {
        type: "line",
        xKey: "year",
        yKey: "Landfill gas",
        yName: "Landfill Gas",
      },
    ],
    axes: {
      x: {
        type: "unit-time",
        min: new Date(2000, 0, 1),
        max: new Date(2022, 0, 1),
      },
      y: {
        type: "number",
        title: {
          text: `ktoe`,
        },
        label: {
          formatter: (params) => `${params.value / 1000}K`,
        },
      },
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: User Interactions Example](https://www.ag-grid.com/charts/reactFunctionalTs/key-features/examples/user-interactions-example)

### Tooltips

[Tooltips](https://www.ag-grid.com/charts/react/tooltips/) are enabled by default. Their content is based on the data values and keys of the series.

[Tooltip modes](https://www.ag-grid.com/charts/react/tooltips/#tooltip-modes) include a shared tooltip which includes the values for all series, and a compact tooltip for smaller charts.

```js
{
    tooltip: {
        mode: 'shared', // or 'single' or 'compact'
    },
}
```

Use the `tooltip.renderer` callback function to customise the content of the tooltip or create a [Custom Tooltip](https://www.ag-grid.com/charts/react/tooltips/#using-custom-tooltips):

```js
{
    tooltip: {
        renderer: (params) => {
            return '<div class="custom-tooltip">' + params.datum[params.xKey] + '</div>';
        },
    },
}
```

### Highlighting Hovered Data

Items and Series are [highlighted](https://www.ag-grid.com/charts/react/series-highlighting/) when hovered.

Use `highlight` options to [customise](https://www.ag-grid.com/charts/react/series-highlighting/#customisation) highlighted and unhighlighted items and series:

```js
{
    series: [
        {
            type: 'bar',
            // Per-series highlight customisation.
            highlight: {
                // Attributes that apply to the highlighted item only.
                highlightedItem: {
                    strokeWidth: 5,
                },
                // Attributes that apply to all other series.
                unhighlightedSeries: {
                    opacity: 0.2,
                },
            },
        },
    ],
}
```

### Handling Events

Callbacks are provided for [Series](https://www.ag-grid.com/charts/react/events/#series-events), [Legend](https://www.ag-grid.com/charts/react/events/#legend-events) and [Chart](https://www.ag-grid.com/charts/react/events/#chart-events) events. These include clicks, double-clicks and zoom events.

Register `listeners` to respond to [Events](https://www.ag-grid.com/charts/react/events/) on the chart.

```js
{
    // Charts Events
    listeners: {
        click: (params) => {
            console.log('click');
        },
    },
    // Series Events
    series: [
        {
            listeners: {
                seriesNodeClick: (params) => {
                    console.log('node clicked');
                },
            },
        },
    ],
    // Legend Events
    legend: {
        listeners: {
            legendItemClick: (params) => {
                console.log('item clicked');
            },
        },
    },
}
```

### Saving and Restoring State

The dynamic [State](https://www.ag-grid.com/charts/react/api-state/) of the chart can be saved and restored. This includes the [Zoom](https://www.ag-grid.com/charts/react/zoom/), [Annotation](https://www.ag-grid.com/charts/react/annotations/) and [Series Visibility](https://www.ag-grid.com/charts/react/legend/#series-visibility-toggling).

Use the `getState()` and `setState()` APIs to retrieve and restore the current state of the chart.

```js
function saveState() {
    const newState = chart.getState();
    // save to database...
}

function restoreState() {
    // retrieve state from database...
    chart.setState(state);
}
```

You can also use the `initialState` property to set the [initial state](https://www.ag-grid.com/charts/react/api-state/#initial-state) of the chart when it loads.

```js
{
    initialState: {
        zoom: {
            rangeX: {
                start: {
                    __type: 'date',
                    value: new Date('2021-01-01').getTime(),
                },
            },
        },
    },
}
```

## Enterprise Features  (Enterprise)

AG Charts comes in two forms:

- **AG Charts Community**: Free for everyone, including production use - no licence required.
- **AG Charts Enterprise**: Requires a licence to use in production. Free to test locally, but requires a [trial](https://www.ag-grid.com/charts/react/community-vs-enterprise/#request-a-30-day-enterprise-bundle-trial-licence) to test in production.

Import the `ag-charts-enterprise` package to access Enterprise features.

Learn more on the [Community vs. Enterprise](https://www.ag-grid.com/charts/react/community-vs-enterprise/) page.

*All Enterprise features are marked with an  (Enterprise) in our docs.*

#### Enterprise Features Example

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    zoom: {
      enabled: true,
      autoScaling: { enabled: true },
    },
    tooltip: {
      enabled: false,
    },
    navigator: {
      miniChart: {
        enabled: true,
      },
    },
    axes: {
      x: {
        type: "number",
        nice: false,
        interval: {
          minSpacing: 80,
          maxSpacing: 120,
        },
        label: {
          autoRotate: false,
        },
      },
    },
    data: getData(),
    animation: {
      duration: 1500, // ms
    },
    series: [
      {
        type: "line",
        xKey: "year",
        yKey: "spending",
        marker: {
          enabled: false,
        },
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Enterprise Features Example](https://www.ag-grid.com/charts/reactFunctionalTs/key-features/examples/enterprise-features-example)

In the above example you can [Zoom](https://www.ag-grid.com/charts/react/zoom/) by scrolling over the chart, or by using the [Navigator](https://www.ag-grid.com/charts/react/navigator/) or [Context Menu](https://www.ag-grid.com/charts/react/context-menu/).

### Zoom  (Enterprise)

To enable [Zooming](https://www.ag-grid.com/charts/react/zoom/), set the `zoom` property to `true`.

```js
{
    zoom: {
        enabled: true,
    },
}
```

See the [Zoom Options](https://www.ag-grid.com/charts/options/#reference-AgChartOptions-zoom) for further customisation options, including enabling specific zoom methods, controlling the anchor point, scrolling step, and many more.

The y-axis will automatically adjust to fit the visible items. This is controlled by the `autoScaling` option.

```js
{
    zoom: {
        autoScaling: {
            enabled: true,
        },
    },
}
```

### Navigator  (Enterprise)

Zooming and Panning can be done with the [Navigator](https://www.ag-grid.com/charts/react/navigator/).

A [Mini Chart](https://www.ag-grid.com/charts/react/navigator/#mini-chart) can also be displayed within the Navigator to give additional context.

```js
{
    navigator: {
        enabled: true,
        miniChart: {
            enabled: true,
        },
    },
}
```

### Scrollbar  (Enterprise)

The [Scrollbar](https://www.ag-grid.com/charts/react/scrollbar/) provides panning navigation when bars use fixed widths or when zoom is applied.

```js
{
    scrollbar: {
        enabled: true,
    },
}
```

### Context Menu  (Enterprise)

The [Context Menu](https://www.ag-grid.com/charts/react/context-menu/) provides [Zoom](https://www.ag-grid.com/charts/react/zoom/) and [Download](https://www.ag-grid.com/charts/react/api-download/) functionality, as well as allowing element specific [custom actions](https://www.ag-grid.com/charts/react/context-menu/#custom-actions).

```js
{
    contextMenu: {
        enabled: true,
        items: [
            {
                showOn: 'always',
                label: 'Say hello',
                action: () => log('Hello world!'),
            },
            'separator',
            {
                showOn: 'series-node',
                label: 'Say hello to a node',
                action: ({ datum, yKey }) => {
                    console.log(`Hello ${yKey} in ${datum.month}!`);
                },
            },
        ],
    },
}
```

### Annotations  (Enterprise)

[Annotations](https://www.ag-grid.com/charts/react/annotations/) allow end users to add trend-lines and text annotations to aid in data analysis and markup.

These are available in all Cartesian charts and can be enabled with `annotations.enabled = true`.

### Range Buttons  (Enterprise)

[Range Buttons](https://www.ag-grid.com/charts/react/range-buttons/) allow users to quickly navigate to specific time periods along the chart timeline, such as 1 month, 6 months, or 1 year.

## Server-Side Rendering  (Enterprise)

The [Server-Side Rendering](https://www.ag-grid.com/charts/react/server-side-rendering/) package renders AG Charts to PNG and JPEG image buffers in Node.js, without a browser. Use it to generate chart images for email reports, PDF documents, or API endpoints.

## Specialized Charts  (Enterprise)

### Financial Charts  (Enterprise)

Build interactive [Financial Charts](https://www.ag-grid.com/charts/react/financial-charts/) featuring advanced annotations with minimal configuration.

#### Financial Charts Showcase

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgFinancialCharts } from "ag-charts-react";
import {
  AgFinancialChartOptions,
  ContextMenuModule,
  FinancialChartModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([FinancialChartModule]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgFinancialChartOptions>({
    data: getData(),
    title: { text: "Acme Inc." },
    initialState: {
      annotations: [
        {
          type: "parallel-channel",
          start: {
            x: { __type: "date", value: new Date("2023-10-23").getTime() },
            y: 148.0,
          },
          end: {
            x: { __type: "date", value: new Date("2024-04-12").getTime() },
            y: 207.0,
          },
          height: 14,
        },
        {
          type: "horizontal-line",
          value: 111.0,
          stroke: "#089981",
          axisLabel: {
            fill: "#089981",
          },
        },
        {
          type: "horizontal-line",
          value: 125.0,
          stroke: "#089981",
          axisLabel: {
            fill: "#089981",
          },
          text: {
            label: "Support Level",
            position: "center",
            alignment: "right",
            color: "#089981",
          },
        },
        {
          type: "horizontal-line",
          value: 143.8,
          stroke: "#F23645",
          axisLabel: {
            fill: "#F23645",
          },
        },
        {
          type: "horizontal-line",
          value: 200.8,
          stroke: "#F23645",
          axisLabel: {
            fill: "#F23645",
          },
          text: {
            label: "Resistance",
            position: "center",
            alignment: "left",
            color: "#F23645",
          },
        },
        {
          type: "horizontal-line",
          text: {
            label: "Short-term Support",
            position: "top",
            alignment: "center",
            fontSize: 10,
            color: "#a5a9ac",
          },
          value: 181.03092783505156,
          axisLabel: {
            fill: "#a5a9ac",
          },
          stroke: "#a5a9ac",
          lineStyle: "dotted",
        },
        {
          type: "text",
          text: "Distribution",
          x: {
            __type: "date",
            value: "Thu Feb 22 2024 00:00:00 GMT+0000 (Greenwich Mean Time)",
          },
          y: 207.0103092783505,
        },
        {
          type: "comment",
          text: "Accumulation",
          x: {
            __type: "date",
            value: "Thu Nov 09 2023 00:00:00 GMT+0000 (Greenwich Mean Time)",
          },
          y: 131.7479612248038,
        },
        {
          type: "callout",
          color: "#040404",
          fill: "#6baaf3",
          fillOpacity: 0.6,
          stroke: "#2395ff",
          strokeOpacity: 1,
          strokeWidth: 2,
          text: "Markup",
          start: {
            x: {
              __type: "date",
              value: "Tue Dec 26 2023 00:00:00 GMT+0000 (Greenwich Mean Time)",
            },
            y: 173.2989690721649,
          },
          end: {
            x: {
              __type: "date",
              value: "Tue Jul 18 2023 01:00:00 GMT+0100 (British Summer Time)",
            },
            y: 167.11340206185565,
          },
        },
        {
          type: "line",
          start: {
            x: {
              __type: "date",
              value: "Tue Oct 25 2022 01:00:00 GMT+0100 (British Summer Time)",
            },
            y: 120.72164948453609,
          },
          end: {
            x: {
              __type: "date",
              value: "Thu May 04 2023 01:00:00 GMT+0100 (British Summer Time)",
            },
            y: 138.96907216494844,
          },
          extendEnd: true,
          strokeWidth: 2,
          lineStyle: "dashed",
        },
      ],
    },
  });

  return <AgFinancialCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Financial Charts Showcase](https://www.ag-grid.com/charts/reactFunctionalTs/key-features/examples/financial-charts-showcase)

To create a financial chart, simply provide your financial data:

```jsx
const [options, setOptions] = useState({
    data: getData(),
});

return <AgFinancialCharts options={options} />;
```

### Maps  (Enterprise)

The [Map Series](https://www.ag-grid.com/charts/react/maps/) types enable visualising geographic data in different ways, using [GeoJSON](https://geojson.org/) data.

#### Map Kitchen Sink Example

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  MapLineSeriesModule,
  MapMarkerSeriesModule,
  MapShapeBackgroundSeriesModule,
  MapShapeSeriesModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { getCurrencyData } from "./data";
import { cables, capitals, topology } from "./topology";

const currencyLayers: Record<
  string,
  {
    title: string;
    fill: string;
  }
> = {
  euro: { title: "Euro", fill: "#3F51B5" },
  dollar: { title: "Dollar", fill: "#8BC34A" },
  franc: { title: "Franc", fill: "#F44336" },
  pound: { title: "Pound", fill: "#2196F3" },
  dinar: { title: "Dinar", fill: "#9C27B0" },
  peso: { title: "Peso", fill: "#FFC107" },
  rupee: { title: "Rupee", fill: "#FF9800" },
  rial: { title: "Rial", fill: "#009688" },
};
ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  MapLineSeriesModule,
  MapMarkerSeriesModule,
  MapShapeBackgroundSeriesModule,
  MapShapeSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    topology,
    series: [
      {
        type: "map-shape-background",
        fillOpacity: 0,
        stroke: "#66879933",
      },
      {
        type: "map-shape",
        legendItemName: "Shapes",
        title: "Other Currency",
        data: topology.features
          .map((t: any) => ({ name: t.properties.name }))
          .filter(({ name }: { name: string }) => currencyLayers[name] == null),
        idKey: "name",
        fill: "#668799",
        fillOpacity: 0.4,
        highlight: {
          highlightedItem: {
            fillOpacity: 1,
          },
        },
      },
      ...Object.entries(currencyLayers).map(([currency, { title, fill }]) => ({
        type: "map-shape" as const,
        legendItemName: "Shapes",
        showInLegend: false,
        title,
        idKey: "name",
        data: getCurrencyData(currency),
        fill,
        fillOpacity: 0.4,
        highlight: {
          highlightedItem: {
            fillOpacity: 1,
          },
        },
      })),
      {
        type: "map-line",
        topology: cables,
        legendItemName: "Lines",
        data: cables.features.map((t: any) => {
          return { name: t.properties.name };
        }),
        idKey: "name",
        title: "Submarine Cables",
        stroke: "#546E7A",
        strokeWidth: 0.5,
      },
      {
        type: "map-marker",
        topology: capitals,
        legendItemName: "Markers",
        showInLegend: false,
        data: capitals.features
          .map((t: any) => {
            return { name: t.properties.city };
          })
          .filter(({ name }: { name: string }) => name != null),
        idKey: "name",
        title: "Capital City",
        topologyIdKey: "city",
        size: 4,
        fill: "#546E7A",
        fillOpacity: 1,
        strokeWidth: 0,
      },
      {
        type: "map-marker",
        legendItemName: "Markers",
        title: "Stock Exchange",
        data: [
          { name: "New York", lat: 40.707, long: -74.011 },
          { name: "Tokyo", lat: 35.681, long: 139.777 },
          { name: "London", lat: 51.515, long: -0.09 },
          { name: "Hong Kong", lat: 22.32, long: 114.171 },
          { name: "India", lat: 28.624, long: 77.214 },
        ],
        latitudeKey: "lat",
        longitudeKey: "long",
        labelKey: "name",
        labelName: "Name",
        label: { enabled: false },
        shape: "pin",
        size: 40,
        fill: "#EF5452",
        fillOpacity: 1,
        strokeWidth: 0,
      },
    ],
    legend: {
      enabled: true,
      item: {
        showSeriesStroke: true,
      },
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Map Kitchen Sink Example](https://www.ag-grid.com/charts/reactFunctionalTs/key-features/examples/map-kitchen-sink)

To create a map chart, provide a [Map Topology](https://www.ag-grid.com/charts/react/map-topology/) in [GeoJSON](https://geojson.org/) format and link the correct property in the `properties` key:

```js
{
    series: [
        {
            type: 'map-shape',
            topology: {
                type: 'FeatureCollection',
                features: [
                    {
                        type: 'Feature',
                        geometry: {
                            type: 'Polygon',
                            coordinates: [
                                /*...*/
                            ],
                        },
                        properties: {
                            name: 'United Kingdom',
                            code: 'GB',
                        },
                    },
                ],
                // ...
            },
            data: [
                { country: 'United Kingdom', population: 67330000 },
                { country: 'France', population: 67500000 },
                // ...
            ],
            idKey: 'country',
            topologyIdKey: 'name', //default value
        },
    ],
}
```

### Gauges  (Enterprise)

[Radial Gauges](https://www.ag-grid.com/charts/react/radial-gauge/) and [Linear Gauges](https://www.ag-grid.com/charts/react/linear-gauge/) display a single data point within a predefined range using a Radial or Linear scale.

#### Radial Gauge Example

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgGauge } from "ag-charts-react";
import {
  AgGaugeOptions,
  AllGaugeModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
} from "ag-charts-enterprise";

const performanceStages = [
  "VERY POOR",
  "POOR",
  "AVERAGE",
  "GOOD",
  "VERY GOOD",
  "EXCELLENT",
].flatMap((item) => ["", item]);
ModuleRegistry.registerModules([
  AllGaugeModule,
  AnimationModule,
  CrosshairModule,
  LegendModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgGaugeOptions>({
    type: "radial-gauge",

    value: 89,
    segmentation: {
      interval: {
        count: 4,
      },
      spacing: 4,
    },
    innerRadiusRatio: 0.7,
    scale: {
      min: 0,
      max: 100,
      interval: {
        step: 10,
      },
      label: {
        formatter: ({ index }) => {
          return `${performanceStages[index]}`;
        },
      },
    },
    bar: {
      fillMode: "discrete",
    },
    label: {
      fontSize: 20,
    },
    secondaryLabel: {
      text: "Grid Performance",
    },
  });

  return <AgGauge options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Radial Gauge Example](https://www.ag-grid.com/charts/reactFunctionalTs/key-features/examples/simple-radial-gauge)

Provide a `type`, `value` and `scale` to create a gauge with the `createGauge` API:

```jsx
const [options, setOptions] = useState({
    type: 'radial-gauge', // or 'linear-gauge'
    value: 80,
    scale: {
        min: 0,
        max: 100,
    },
});

return <AgGauge options={options} />;
```

### Funnel, Cone Funnel & Pyramid  (Enterprise)

[Funnel](https://www.ag-grid.com/charts/react/funnel-series/), [Cone Funnel](https://www.ag-grid.com/charts/react/cone-funnel-series/) and [Pyramid](https://www.ag-grid.com/charts/react/pyramid-series/) series visualise how values change through stages of a process, or show proportional breakdowns.

To create a funnel chart, use the `funnel`, `cone-funnel`, or `pyramid` series type:

```js
{
    series: [
        {
            type: 'funnel', // or 'cone-funnel' or 'pyramid'
            stageKey: 'stage',
            valueKey: 'value',
        },
    ],
}
```