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

# High Performance Charts

## Ordered Data

#### Ordered Data

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  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 = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <select v-on:change="setSeries($event.target.value)">
          <option value="area">Area</option>
          <option value="bar">Bar</option>
          <option value="line" selected="">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 v-on:change="setAxes($event.target.value)">
          <option value="time">Continuous Time</option>
          <option value="ordinal-time">Ordinal Time</option>
          <option value="ordinal-time-parent" selected="">Ordinal Time (Parent Level)</option>
          <option value="unit-time">Unit Time</option>
        </select>
        <button v-on:click="setData(1e3)">1k</button>
        <button v-on:click="setData(1e4)">10k</button>
        <button v-on:click="setData(1e5)">100k</button>
        <button v-on:click="setData(1e6)">1m</button>
      </div>
    </div>
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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) => {
      const optionsCopy = clone(options.value);

      let series;
      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;
      }
      optionsCopy.series = [series];

      options.value = optionsCopy;
    };
    const setAxes = (type) => {
      const optionsCopy = clone(options.value);

      let axis;
      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;
      }
      optionsCopy.axes = { x: axis };

      options.value = optionsCopy;
    };
    const setData = (points) => {
      const optionsCopy = clone(options.value);

      optionsCopy.data = getData(points);

      options.value = optionsCopy;
    };

    return {
      options,
      setSeries,
      setAxes,
      setData,
    };
  },
});

createApp(ChartExample).mount("#app");
```

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

## Stacked Data

#### Stacked Data

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  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 = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <select v-on:change="setSeries($event.target.value)">
          <option value="area" selected="">Area</option>
          <option value="bar">Bar</option>
          <option value="line">Line</option>
        </select>
        <select v-on:change="setAxes($event.target.value)">
          <option value="time">Continuous Time</option>
          <option value="ordinal-time">Ordinal Time</option>
          <option value="ordinal-time-parent" selected="">Ordinal Time (Parent Level)</option>
          <option value="unit-time">Unit Time</option>
        </select>
        <button v-on:click="setData(1e3)">1k</button>
        <button v-on:click="setData(1e4)">10k</button>
        <button v-on:click="setData(1e5)">100k</button>
        <button v-on:click="setData(1e6)">1m</button>
      </div>
    </div>
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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) => {
      const optionsCopy = clone(options.value);

      let series;
      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;
      }
      optionsCopy.series = series;

      options.value = optionsCopy;
    };
    const setAxes = (type) => {
      const optionsCopy = clone(options.value);

      let axis;
      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;
      }
      optionsCopy.axes = { x: axis };

      options.value = optionsCopy;
    };
    const setData = (points) => {
      const optionsCopy = clone(options.value);

      optionsCopy.data = getData(points);

      options.value = optionsCopy;
    };

    return {
      options,
      setSeries,
      setAxes,
      setData,
    };
  },
});

createApp(ChartExample).mount("#app");
```

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

## Bubble, Scatter

#### Bubble, Scatter

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  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 = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <select v-on:change="setSeries($event.target.value)">
          <option value="bubble" selected="">Bubble</option>
          <option value="scatter">Scatter</option>
        </select>
        <select v-on:change="setShape($event.target.value)">
          <option value="circle" selected="">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 v-on:click="setData(1e3)">1k</button>
        <button v-on:click="setData(1e4)">10k</button>
        <button v-on:click="setData(1e5)">100k</button>
        <button v-on:click="setData(1e6)">1m</button>
        <label>
          <span>Max Visible Items</span>
          <input type="range" min="500" max="10000" step="500" value="2000" v-on:change="setMaxVisibleItems($event.target.valueAsNumber)">
          </label>
        </div>
      </div>
      <ag-charts
        :options="options"
      />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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) => {
      const optionsCopy = clone(options.value);

      const { maxRenderedItems, shape } = optionsCopy.series?.[0];
      let series;
      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;
      }
      optionsCopy.series = [series];

      options.value = optionsCopy;
    };
    const setShape = (shape) => {
      const optionsCopy = clone(options.value);

      let series = optionsCopy.series?.[0];
      series.shape = shape;
      optionsCopy.series = [series];

      options.value = optionsCopy;
    };
    const setMaxVisibleItems = (maxRenderedItems) => {
      const optionsCopy = clone(options.value);

      let series = optionsCopy.series?.[0];
      series.maxRenderedItems = maxRenderedItems;
      optionsCopy.series = [series];

      options.value = optionsCopy;
    };
    const setData = (points) => {
      const optionsCopy = clone(options.value);

      optionsCopy.data = getData(points);

      options.value = optionsCopy;
    };

    return {
      options,
      setSeries,
      setShape,
      setMaxVisibleItems,
      setData,
    };
  },
});

createApp(ChartExample).mount("#app");
```

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