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

# High Performance Charts

## Ordered Data

#### Ordered Data

```ts
import {
  AgCartesianAxisOptions,
  AgCartesianChartOptions,
  AgCartesianSeriesOptions,
  AgCharts,
  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";

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

const options: 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 },
    },
  },
};

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

const chart = AgCharts.create(options);

function setSeries(type: string) {
  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;
  }
  options.series = [series];

  chart.update(options);
}

function setAxes(type: string) {
  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;
  }
  options.axes = { x: axis };

  chart.update(options);
}

function setData(points: number) {
  options.data = getData(points);

  chart.update(options);
}

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

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

## Stacked Data

#### Stacked Data

```ts
import {
  AgCartesianAxisOptions,
  AgCartesianChartOptions,
  AgCartesianSeriesOptions,
  AgCharts,
  AnimationModule,
  AreaSeriesModule,
  BarSeriesModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  TimeAxisModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

const options: 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 },
    },
  },
};

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

const chart = AgCharts.create(options);

function setSeries(type: string) {
  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;
  }
  options.series = series;

  chart.update(options);
}

function setAxes(type: string) {
  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;
  }
  options.axes = { x: axis };

  chart.update(options);
}

function setData(points: number) {
  options.data = getData(points);

  chart.update(options);
}

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

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

## Bubble, Scatter

#### Bubble, Scatter

```ts
import {
  AgCartesianChartOptions,
  AgCartesianSeriesOptions,
  AgCharts,
  AnimationModule,
  BubbleSeriesModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  ScatterSeriesModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

const options: 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,
        },
      },
    },
  },
};

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

const chart = AgCharts.create(options);

function setSeries(type: string) {
  const { maxRenderedItems, shape } = options.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;
  }
  options.series = [series];

  chart.update(options);
}

function setShape(shape: string) {
  let series = options.series?.[0] as any;
  series.shape = shape;
  options.series = [series];

  chart.update(options);
}

function setMaxVisibleItems(maxRenderedItems: number) {
  let series = options.series?.[0] as any;
  series.maxRenderedItems = maxRenderedItems;
  options.series = [series];

  chart.update(options);
}

function setData(points: number) {
  options.data = getData(points);

  chart.update(options);
}

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

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