---
title: "Create/Update"
framework: react
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

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

function buildSeries(name: string): AgAreaSeriesOptions {
  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: AgChartLegendPosition[] = ["left", "top", "right", "bottom"];
const legend = {
  position: positions[1],
};
ModuleRegistry.registerModules([
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Browser Usage Statistics",
    },
    subtitle: {
      text: "2009-2019",
    },
    data: getData(),
    series,
    legend,
  });

  const reverseSeries = () => {
    const nextOptions = clone(options);

    nextOptions.series = series.reverse();

    setOptions(nextOptions);
  };

  const swapTitles = () => {
    const nextOptions = clone(options);

    const oldTitle = nextOptions.title;
    nextOptions.title = nextOptions.subtitle;
    nextOptions.subtitle = oldTitle;

    setOptions(nextOptions);
  };

  const rotateLegend = () => {
    const nextOptions = clone(options);

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

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={reverseSeries}>Reverse Series</button>
          <button onClick={swapTitles}>Swap Titles</button>
          <button onClick={rotateLegend}>Rotate Legend</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

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

## Destroying Charts

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