---
title: "High Performance Charts"
framework: react
version: "14.1.0"
---

# High Performance Charts

## Ordered Data

#### Ordered Data

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianAxisOptions,
  AgCartesianChartOptions,
  AgCartesianSeriesOptions,
  AnimationModule,
  AreaSeriesModule,
  BarSeriesModule,
  CandlestickSeriesModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  OhlcSeriesModule,
  OrdinalTimeAxisModule,
  RangeAreaSeriesModule,
  RangeBarSeriesModule,
  TimeAxisModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

ModuleRegistry.registerModules([
  AnimationModule,
  AreaSeriesModule,
  BarSeriesModule,
  CandlestickSeriesModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  NavigatorModule,
  NumberAxisModule,
  OhlcSeriesModule,
  OrdinalTimeAxisModule,
  RangeAreaSeriesModule,
  RangeBarSeriesModule,
  TimeAxisModule,
  UnitTimeAxisModule,
  ZoomModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    data: getData(1e4),
    animation: { enabled: false },
    zoom: {
      enabled: true,
      anchorPointX: "pointer",
      anchorPointY: "pointer",
      autoScaling: {
        enabled: true,
      },
    },
    navigator: {
      enabled: true,
      miniChart: {
        enabled: true,
      },
    },
    series: [
      {
        type: "line",
        xKey: "timestamp",
        yKey: "close",
      },
    ],
    axes: {
      x: {
        type: "ordinal-time",
        parentLevel: { enabled: true },
      },
    },
  });

  const setSeries = (type: string) => {
    const nextOptions = clone(options);

    let series: AgCartesianSeriesOptions;
    switch (type) {
      case "bar":
      case "area":
      case "line":
        series = {
          type,
          xKey: "timestamp",
          yKey: "close",
        };
        break;
      case "range-area":
      case "range-bar":
        series = {
          type,
          xKey: "timestamp",
          yLowKey: "low",
          yHighKey: "high",
        };
        break;
      case "candlestick":
      case "ohlc":
        series = {
          type,
          xKey: "timestamp",
          lowKey: "low",
          highKey: "high",
          openKey: "open",
          closeKey: "close",
        };
        break;
      default:
        return;
    }
    nextOptions.series = [series];

    setOptions(nextOptions);
  };

  const setAxes = (type: string) => {
    const nextOptions = clone(options);

    let axis: AgCartesianAxisOptions;
    switch (type) {
      case "time":
        axis = {
          type,
          nice: false,
        };
        break;
      case "ordinal-time":
      case "unit-time":
        axis = {
          type,
        };
        break;
      case "ordinal-time-parent":
        axis = {
          type: "ordinal-time",
          parentLevel: { enabled: true },
        };
        break;
      default:
        return;
    }
    nextOptions.axes = { x: axis };

    setOptions(nextOptions);
  };

  const setData = (points: number) => {
    const nextOptions = clone(options);

    nextOptions.data = getData(points);

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <select onChange={(event) => setSeries(event.target.value)}>
            <option value="area">Area</option>
            <option value="bar">Bar</option>
            <option value="line">Line</option>
            <option value="range-area">Range Area</option>
            <option value="range-bar">Range Bar</option>
            <option value="candlestick">Candlestick</option>
            <option value="ohlc">OHLC</option>
          </select>
          <select onChange={(event) => setAxes(event.target.value)}>
            <option value="time">Continuous Time</option>
            <option value="ordinal-time">Ordinal Time</option>
            <option value="ordinal-time-parent">
              Ordinal Time (Parent Level)
            </option>
            <option value="unit-time">Unit Time</option>
          </select>
          <button onClick={() => setData(1e3)}>1k</button>
          <button onClick={() => setData(1e4)}>10k</button>
          <button onClick={() => setData(1e5)}>100k</button>
          <button onClick={() => setData(1e6)}>1m</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

[Live example: Ordered Data](https://www.ag-grid.com/charts/reactFunctionalTs/high-performance-charts/examples/ordered-data)

## Stacked Data

#### Stacked Data

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianAxisOptions,
  AgCartesianChartOptions,
  AgCartesianSeriesOptions,
  AnimationModule,
  AreaSeriesModule,
  BarSeriesModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  TimeAxisModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

ModuleRegistry.registerModules([
  AnimationModule,
  AreaSeriesModule,
  BarSeriesModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  NavigatorModule,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  TimeAxisModule,
  UnitTimeAxisModule,
  ZoomModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    data: getData(1e4),
    animation: { enabled: false },
    zoom: {
      enabled: true,
      anchorPointX: "pointer",
      anchorPointY: "pointer",
      autoScaling: {
        enabled: true,
      },
    },
    navigator: {
      enabled: true,
      miniChart: {
        enabled: true,
      },
    },
    series: [
      {
        type: "area",
        xKey: "timestamp",
        yKey: "petrol",
        stacked: true,
      },
      {
        type: "area",
        xKey: "timestamp",
        yKey: "diesel",
        stacked: true,
      },
    ],
    axes: {
      x: {
        type: "ordinal-time",
        parentLevel: { enabled: true },
      },
    },
  });

  const setSeries = (type: string) => {
    const nextOptions = clone(options);

    let series: AgCartesianSeriesOptions[];
    switch (type) {
      case "bar":
      case "area":
      case "line":
        series = [
          {
            type,
            xKey: "timestamp",
            yKey: "petrol",
            stacked: true,
          },
          {
            type,
            xKey: "timestamp",
            yKey: "diesel",
            stacked: true,
          },
        ];
        break;
      default:
        return;
    }
    nextOptions.series = series;

    setOptions(nextOptions);
  };

  const setAxes = (type: string) => {
    const nextOptions = clone(options);

    let axis: AgCartesianAxisOptions;
    switch (type) {
      case "time":
        axis = {
          type,
          nice: false,
        };
        break;
      case "ordinal-time":
      case "unit-time":
        axis = {
          type,
        };
        break;
      case "ordinal-time-parent":
        axis = {
          type: "ordinal-time",
          parentLevel: { enabled: true },
        };
        break;
      default:
        return;
    }
    nextOptions.axes = { x: axis };

    setOptions(nextOptions);
  };

  const setData = (points: number) => {
    const nextOptions = clone(options);

    nextOptions.data = getData(points);

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <select onChange={(event) => setSeries(event.target.value)}>
            <option value="area">Area</option>
            <option value="bar">Bar</option>
            <option value="line">Line</option>
          </select>
          <select onChange={(event) => setAxes(event.target.value)}>
            <option value="time">Continuous Time</option>
            <option value="ordinal-time">Ordinal Time</option>
            <option value="ordinal-time-parent">
              Ordinal Time (Parent Level)
            </option>
            <option value="unit-time">Unit Time</option>
          </select>
          <button onClick={() => setData(1e3)}>1k</button>
          <button onClick={() => setData(1e4)}>10k</button>
          <button onClick={() => setData(1e5)}>100k</button>
          <button onClick={() => setData(1e6)}>1m</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

[Live example: Stacked Data](https://www.ag-grid.com/charts/reactFunctionalTs/high-performance-charts/examples/stacked-data)

## Bubble, Scatter

#### Bubble, Scatter

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

ModuleRegistry.registerModules([
  AnimationModule,
  BubbleSeriesModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  ScatterSeriesModule,
  ZoomModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    data: getData(1e4),
    animation: { enabled: false },
    zoom: {
      enabled: true,
      axes: "xy",
      anchorPointX: "pointer",
      anchorPointY: "pointer",
      autoScaling: {
        enabled: false,
      },
    },
    series: [
      {
        type: "bubble",
        xKey: "x",
        yKey: "y",
        sizeKey: "size",
        maxRenderedItems: 2000,
      },
    ],
    theme: {
      overrides: {
        bubble: {
          series: {
            fillOpacity: 0.2,
            strokeOpacity: 0.2,
          },
        },
        scatter: {
          series: {
            fillOpacity: 0.2,
            strokeOpacity: 0.2,
          },
        },
      },
    },
  });

  const setSeries = (type: string) => {
    const nextOptions = clone(options);

    const { maxRenderedItems, shape } = nextOptions.series?.[0] as any;
    let series: AgCartesianSeriesOptions;
    switch (type) {
      case "bubble":
        series = {
          type: "bubble",
          xKey: "x",
          yKey: "y",
          sizeKey: "size",
          shape,
          maxRenderedItems,
        };
        break;
      case "scatter":
        series = {
          type: "scatter",
          xKey: "x",
          yKey: "y",
          shape,
          maxRenderedItems,
        };
        break;
      default:
        return;
    }
    nextOptions.series = [series];

    setOptions(nextOptions);
  };

  const setShape = (shape: string) => {
    const nextOptions = clone(options);

    let series = nextOptions.series?.[0] as any;
    series.shape = shape;
    nextOptions.series = [series];

    setOptions(nextOptions);
  };

  const setMaxVisibleItems = (maxRenderedItems: number) => {
    const nextOptions = clone(options);

    let series = nextOptions.series?.[0] as any;
    series.maxRenderedItems = maxRenderedItems;
    nextOptions.series = [series];

    setOptions(nextOptions);
  };

  const setData = (points: number) => {
    const nextOptions = clone(options);

    nextOptions.data = getData(points);

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <select onChange={(event) => setSeries(event.target.value)}>
            <option value="bubble">Bubble</option>
            <option value="scatter">Scatter</option>
          </select>
          <select onChange={(event) => setShape(event.target.value)}>
            <option value="circle">Circle</option>
            <option value="cross">Cross</option>
            <option value="diamond">Diamond</option>
            <option value="heart">Heart</option>
            <option value="plus">Plus</option>
            <option value="square">Square</option>
            <option value="star">Star</option>
            <option value="triangle">Triangle</option>
          </select>
          <button onClick={() => setData(1e3)}>1k</button>
          <button onClick={() => setData(1e4)}>10k</button>
          <button onClick={() => setData(1e5)}>100k</button>
          <button onClick={() => setData(1e6)}>1m</button>
          <label>
            <span>Max Visible Items</span>
            <input
              type="range"
              min="500"
              max="10000"
              step="500"
              defaultValue="2000"
              onChange={(event) =>
                setMaxVisibleItems(event.target.valueAsNumber)
              }
            />
          </label>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

[Live example: Bubble, Scatter](https://www.ag-grid.com/charts/reactFunctionalTs/high-performance-charts/examples/bubble-scatter)