---
title: "Create/Update"
framework: vue
version: "14.1.0"
---

# Create/Update

Learn about creating and updating charts in more detail.

## Creating and Updating Charts

`AgChartOptions` are supplied to the AG Charts component, and mutations of the options trigger an update of the chart configuration.

See the [Options Reference](https://www.ag-grid.com/charts/options/) for more detail about the `AgChartOptions` structure.

The following example demonstrates both create and update cases:

- Definition of an `options` object used to create the initial chart state.
- Buttons that invoke mutations of the `options` and trigger update of the chart state.

#### Create and Update with AgChartOptions

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";
import clone from "clone";

function buildSeries(name) {
  return {
    type: "area",
    xKey: "year",
    yKey: name.toLowerCase(),
    yName: name,
    fillOpacity: 0.5,
  };
}

const series = [
  buildSeries("IE"),
  buildSeries("Chrome"),
  buildSeries("Firefox"),
  buildSeries("Safari"),
];

const positions = ["left", "top", "right", "bottom"];

const legend = {
  position: positions[1],
};

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

const ChartExample = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <button v-on:click="reverseSeries()">Reverse Series</button>
        <button v-on:click="swapTitles()">Swap Titles</button>
        <button v-on:click="rotateLegend()">Rotate Legend</button>
      </div>
    </div>
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<AgChartOptions>({
      title: {
        text: "Browser Usage Statistics",
      },
      subtitle: {
        text: "2009-2019",
      },
      data: getData(),
      series,
      legend,
    });

    const reverseSeries = () => {
      const optionsCopy = clone(options.value);

      optionsCopy.series = series.reverse();

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

      const oldTitle = optionsCopy.title;
      optionsCopy.title = optionsCopy.subtitle;
      optionsCopy.subtitle = oldTitle;

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

      const currentIdx = positions.indexOf(legend.position ?? "top");
      legend.position = positions[(currentIdx + 1) % positions.length];
      optionsCopy.legend = legend;

      options.value = optionsCopy;
    };

    return {
      options,
      reverseSeries,
      swapTitles,
      rotateLegend,
    };
  },
});

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

[Live example: Create and Update with AgChartOptions](https://www.ag-grid.com/charts/vue3/api-create-update/examples/create-update)

## Destroying Charts

Charts are automatically destroyed when the AG Charts component is removed from the DOM.