---
title: "Create a Basic Chart"
framework: react
version: "14.1.0"
---

# Create a Basic Chart

Learn the key concepts of AG Charts by building a basic combination chart and applying styling & formatting

[Get Started](https://www.youtube.com/watch?v=_sspfzQEVec)

## Overview

In this tutorial you will:

1. [Create a Simple Bar chart](#chart-basics)
2. [Add an additional Line Series to the Bar Series](#combination-charts)
3. [Style the chart with Themes, titles, Legend, and formatted data](#styling)
4. [Format the axes](#formatting-axes)

By the end of this tutorial, you will have a Line and Bar combination chart, with a Legend, title and formatted values. Try it out for yourself by hovering elements to display tooltips, or toggling series visibility by clicking the Legend elements in the example below.

#### Complete Formatted Example

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgBarSeriesOptions,
  AgCategoryAxisOptions,
  AgChartCaptionOptions,
  AgChartLegendOptions,
  AgChartOptions,
  AgChartSubtitleOptions,
  AgLineSeriesOptions,
  AgNumberAxisOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

interface IData {
  // Chart Data Interface
  month:
    | "Jan"
    | "Feb"
    | "Mar"
    | "Apr"
    | "May"
    | "Jun"
    | "Jul"
    | "Aug"
    | "Sep"
    | "Oct"
    | "Nov"
    | "Dec";
  avgTemp: number;
  iceCreamSales: number;
}

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    // Chart Title
    title: { text: "Ice Cream Sales and Avg Temp" } as AgChartCaptionOptions,
    // Chart Subtitle
    subtitle: { text: "Data from 2022" } as AgChartSubtitleOptions,
    // Data: Data to be displayed within the chart
    data: [
      { month: "Jan", avgTemp: 2.3, iceCreamSales: 162000 },
      { month: "Mar", avgTemp: 6.3, iceCreamSales: 302000 },
      { month: "May", avgTemp: 16.2, iceCreamSales: 800000 },
      { month: "Jul", avgTemp: 22.8, iceCreamSales: 1254000 },
      { month: "Sep", avgTemp: 14.5, iceCreamSales: 950000 },
      { month: "Nov", avgTemp: 8.9, iceCreamSales: 200000 },
    ] as IData[],
    // Series: Defines which chart type and data to use
    series: [
      {
        type: "bar",
        xKey: "month",
        yKey: "iceCreamSales",
        yName: "Ice Cream Sales",
        // Optional Y Axis Key, to link series to an axis, with better code readability
        yKeyAxis: "priceAxis",
      } as AgBarSeriesOptions,
      {
        type: "line",
        xKey: "month",
        yKey: "avgTemp",
        yName: "Average Temperature (°C)",
        // Optional Y Axis Key, to link series to an axis, with better code readability
        yKeyAxis: "temperatureAxis",
      } as AgLineSeriesOptions,
    ],
    // Axes: Configure the axes for the chart
    axes: {
      // Use left axis for 'iceCreamSales' series, referencing the yKeyAxis value
      priceAxis: {
        type: "number",
        position: "left",
        // Format the label applied to this axis
        label: {
          formatter: (params) => {
            return parseFloat(params.value).toLocaleString();
          },
        },
      } as AgNumberAxisOptions,
      // Use right axis for 'avgTemp' series, referencing the yKeyAxis value
      temperatureAxis: {
        type: "number",
        position: "right",
        // Format the label applied to this axis (append ' °C')
        label: {
          formatter: (params) => {
            return params.value + " °C";
          },
        },
      } as AgNumberAxisOptions,
    },
    // Legend: Matches visual elements to their corresponding series or data categories.
    legend: {
      position: "right",
    } as AgChartLegendOptions,
  });

  return <AgCharts options={options} />;
};

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

[Live example: Complete Formatted Example](https://www.ag-grid.com/charts/reactFunctionalTs/create-a-basic-chart/examples/complete-formatted-example)

## Chart Basics

Complete our [Quick Start](https://www.ag-grid.com/charts/react/quick-start/) (or open the example below in Plunker) to start with a basic chart, comprised of:

- **Chart Options:** Object which contains the chart configuration options, including **data**, and **series** properties:
  - **data:** The data to display within a chart (*typically* an array of data-points).
  - **series:** The type of chart to display, and the data to use. For cartesian charts, a minimum of three properties are required:
    - **type:** Defines the type of chart to display (e.g. Line, Bar, etc.).
    - **xKey:** The data to use for the x-axis.
    - **yKey:** The data to use for the y-axis.

Putting these things together creates a basic chart.

#### Basic Example

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgBarSeriesOptions,
  AgChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

interface IData {
  // Chart Data Interface
  month:
    | "Jan"
    | "Feb"
    | "Mar"
    | "Apr"
    | "May"
    | "Jun"
    | "Jul"
    | "Aug"
    | "Sep"
    | "Oct"
    | "Nov"
    | "Dec";
  avgTemp: number;
  iceCreamSales: number;
}

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    // Data: Data to be displayed in the chart
    data: [
      { month: "Jan", avgTemp: 2.3, iceCreamSales: 162000 },
      { month: "Mar", avgTemp: 6.3, iceCreamSales: 302000 },
      { month: "May", avgTemp: 16.2, iceCreamSales: 800000 },
      { month: "Jul", avgTemp: 22.8, iceCreamSales: 1254000 },
      { month: "Sep", avgTemp: 14.5, iceCreamSales: 950000 },
      { month: "Nov", avgTemp: 8.9, iceCreamSales: 200000 },
    ] as IData[],
    // Series: Defines which chart type and data to use
    series: [
      {
        type: "bar",
        xKey: "month",
        yKey: "iceCreamSales",
      } as AgBarSeriesOptions,
    ],
  });

  return <AgCharts options={options} />;
};

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

[Live example: Basic Example](https://www.ag-grid.com/charts/reactFunctionalTs/create-a-basic-chart/examples/basic-example)

## Combination Charts

A chart can have more than one series, which can be useful when comparing datasets. To add another series to the chart, simply add another object to the series array, referencing the data to use.

```jsx
const [chartOptions, setChartOptions] = useState({
    series: [
        { type: 'bar', xKey: 'month', yKey: 'iceCreamSales' }, // Existing 'Bar' Series, using 'iceCreamSales' data-points
        { type: 'line', xKey: 'month', yKey: 'avgTemp' }, // Additional 'Line' Series, using 'avgTemp' data-points
    ],
    // ...
});
```

Running the chart at this point will show the two series in the same chart.

#### Combination Charts Example

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgBarSeriesOptions,
  AgChartOptions,
  AgLineSeriesOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

interface IData {
  // Chart Data Interface
  month:
    | "Jan"
    | "Feb"
    | "Mar"
    | "Apr"
    | "May"
    | "Jun"
    | "Jul"
    | "Aug"
    | "Sep"
    | "Oct"
    | "Nov"
    | "Dec";
  avgTemp: number;
  iceCreamSales: number;
}

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    // Data: Data to be displayed within the chart
    data: [
      { month: "Jan", avgTemp: 2.3, iceCreamSales: 162000 },
      { month: "Mar", avgTemp: 6.3, iceCreamSales: 302000 },
      { month: "May", avgTemp: 16.2, iceCreamSales: 800000 },
      { month: "Jul", avgTemp: 22.8, iceCreamSales: 1254000 },
      { month: "Sep", avgTemp: 14.5, iceCreamSales: 950000 },
      { month: "Nov", avgTemp: 8.9, iceCreamSales: 200000 },
    ] as IData[],
    // Series: Defines which chart type and data to use
    series: [
      {
        type: "bar",
        xKey: "month",
        yKey: "iceCreamSales",
      } as AgBarSeriesOptions,
      { type: "line", xKey: "month", yKey: "avgTemp" } as AgLineSeriesOptions,
    ],
  });

  return <AgCharts options={options} />;
};

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

[Live example: Combination Charts Example](https://www.ag-grid.com/charts/reactFunctionalTs/create-a-basic-chart/examples/combination-charts-example)

### Configuring Secondary Axes

The chart above shows both series in a single chart, but given that the data-sets are quite different, it would make more sense to have a secondary axis for the second series.

To do this, first we need to link each series to the appropriate axis using the `yKeyAxis` property on the series:

```jsx
const [chartOptions, setChartOptions] = useState({
    series: [
        {
            type: 'bar',
            xKey: 'month',
            yKey: 'iceCreamSales',
            // y-axis Key, to link series to an axis
            yKeyAxis: 'priceAxis',
        },
        {
            type: 'line',
            xKey: 'month',
            yKey: 'avgTemp',
            // y-axis Key, to link series to an axis
            yKeyAxis: 'temperatureAxis',
        },
    ],
    // ...
});
```

The `yKeyAxis` property provides a way to reference a series from the axis configuration. To configure the axes, we need to add the `axes` property to the chart options, defining each axis and linking it to the appropriate series using the same keys defined in the `yKeyAxis` properties above:

```jsx
const [chartOptions, setChartOptions] = useState({
    axes: {
        // Use left axis for 'iceCreamSales' series
        priceAxis: {
            type: 'number',
            position: 'left',
        },
        // Use right axis for 'avgTemp' series
        temperatureAxis: {
            type: 'number',
            position: 'right',
        },
    },
    // ...
});
```

Let's breakdown what's happening here:

- **`axes.{key}`:** The key used to reference the axis, which should match the `yKeyAxis` property on the series.
- **`type`:** The type of axis to use - one of [Category](https://www.ag-grid.com/charts/react/axes-types/#category), [Number](https://www.ag-grid.com/charts/react/axes-types/#number), [Time](https://www.ag-grid.com/charts/react/axes-types/#time) or [Log](https://www.ag-grid.com/charts/react/axes-types/#log).
- **`position`:** The position on the chart where the axis should be rendered, e.g. 'top', 'bottom', 'right' or 'left'.

Now when we run our chart, we should see both series and three axes.

#### Second Series Example

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgBarSeriesOptions,
  AgCategoryAxisOptions,
  AgChartOptions,
  AgLineSeriesOptions,
  AgNumberAxisOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

interface IData {
  // Chart Data Interface
  month:
    | "Jan"
    | "Feb"
    | "Mar"
    | "Apr"
    | "May"
    | "Jun"
    | "Jul"
    | "Aug"
    | "Sep"
    | "Oct"
    | "Nov"
    | "Dec";
  avgTemp: number;
  iceCreamSales: number;
}

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    // Data: Data to be displayed within the chart
    data: [
      { month: "Jan", avgTemp: 2.3, iceCreamSales: 162000 },
      { month: "Mar", avgTemp: 6.3, iceCreamSales: 302000 },
      { month: "May", avgTemp: 16.2, iceCreamSales: 800000 },
      { month: "Jul", avgTemp: 22.8, iceCreamSales: 1254000 },
      { month: "Sep", avgTemp: 14.5, iceCreamSales: 950000 },
      { month: "Nov", avgTemp: 8.9, iceCreamSales: 200000 },
    ] as IData[],
    // Series: Defines which chart type and data to use
    series: [
      {
        type: "bar",
        xKey: "month",
        yKey: "iceCreamSales",
        // Optional Y Axis Key, to link series to an axis, with better code readability
        yKeyAxis: "priceAxis",
      } as AgBarSeriesOptions,
      {
        type: "line",
        xKey: "month",
        yKey: "avgTemp",
        // Optional Y Axis Key, to link series to an axis, with better code readability
        yKeyAxis: "temperatureAxis",
      } as AgLineSeriesOptions,
    ],
    // Axes: Configure the axes for the chart
    axes: {
      // Use left axis for 'iceCreamSales' series
      priceAxis: {
        type: "number",
        position: "left",
      } as AgNumberAxisOptions,
      // Use right axis for 'avgTemp' series
      temperatureAxis: {
        type: "number",
        position: "right",
      } as AgNumberAxisOptions,
    },
  });

  return <AgCharts options={options} />;
};

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

[Live example: Second Series Example](https://www.ag-grid.com/charts/reactFunctionalTs/create-a-basic-chart/examples/second-series-example)

> **Note**
>
> Refer to our [Axes Configuration](https://www.ag-grid.com/charts/react/axes-configuration/) docs for more information on configuring axes.

## Styling

Now we have a chart complete with multiple series and axes, the last thing to do is style the chart.

### Titles

Titles and subtitles can also be added to the chart via the `title` and `subtitle` properties.

```js
const [chartOptions, setChartOptions] = useState({
    title: { text: 'Ice Cream Sales' },
    subtitle: { text: 'Data from 2022' },
    // ...
});
```

#### Titles Example

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgBarSeriesOptions,
  AgCategoryAxisOptions,
  AgChartCaptionOptions,
  AgChartOptions,
  AgChartSubtitleOptions,
  AgLineSeriesOptions,
  AgNumberAxisOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

interface IData {
  // Chart Data Interface
  month:
    | "Jan"
    | "Feb"
    | "Mar"
    | "Apr"
    | "May"
    | "Jun"
    | "Jul"
    | "Aug"
    | "Sep"
    | "Oct"
    | "Nov"
    | "Dec";
  avgTemp: number;
  iceCreamSales: number;
}

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    // Chart Title
    title: { text: "Ice Cream Sales and Avg Temp" } as AgChartCaptionOptions,
    // Chart Subtitle
    subtitle: { text: "Data from 2022" } as AgChartSubtitleOptions,
    // Data: Data to be displayed within the chart
    data: [
      { month: "Jan", avgTemp: 2.3, iceCreamSales: 162000 },
      { month: "Mar", avgTemp: 6.3, iceCreamSales: 302000 },
      { month: "May", avgTemp: 16.2, iceCreamSales: 800000 },
      { month: "Jul", avgTemp: 22.8, iceCreamSales: 1254000 },
      { month: "Sep", avgTemp: 14.5, iceCreamSales: 950000 },
      { month: "Nov", avgTemp: 8.9, iceCreamSales: 200000 },
    ] as IData[],
    // Series: Defines which chart type and data to use
    series: [
      {
        type: "bar",
        xKey: "month",
        yKey: "iceCreamSales",
        // Optional Y Axis Key, to link series to an axis, with better code readability
        yKeyAxis: "priceAxis",
      } as AgBarSeriesOptions,
      {
        type: "line",
        xKey: "month",
        yKey: "avgTemp",
        // Optional Y Axis Key, to link series to an axis, with better code readability
        yKeyAxis: "temperatureAxis",
      } as AgLineSeriesOptions,
    ],
    // Axes: Configure the axes for the chart
    axes: {
      // Use left axis for 'iceCreamSales' series
      priceAxis: {
        type: "number",
        position: "left",
      } as AgNumberAxisOptions,
      // Use right axis for 'avgTemp' series
      temperatureAxis: {
        type: "number",
        position: "right",
      } as AgNumberAxisOptions,
    },
  });

  return <AgCharts options={options} />;
};

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

[Live example: Titles Example](https://www.ag-grid.com/charts/reactFunctionalTs/create-a-basic-chart/examples/title-example)

*Note: Refer to the [title](https://www.ag-grid.com/charts/options/#reference-AgChartOptions-title) and [subtitle](https://www.ag-grid.com/charts/options/#reference-AgChartOptions-subtitle) API docs for a full list of properties that can be configured*

### Legend

You may have noticed that the chart added a Legend when we added a second series to our chart. We can configure the Legend using the `legend` property, including adjusting its size and position.

```js
const [chartOptions, setChartOptions] = useState({
    legend: {
        position: 'right',
    },
    // ...
});
```

We should now see the Legend displayed on the right hand side of the chart, rather than underneath it.

#### Legend Example

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgBarSeriesOptions,
  AgCategoryAxisOptions,
  AgChartCaptionOptions,
  AgChartLegendOptions,
  AgChartOptions,
  AgChartSubtitleOptions,
  AgLineSeriesOptions,
  AgNumberAxisOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

interface IData {
  // Chart Data Interface
  month:
    | "Jan"
    | "Feb"
    | "Mar"
    | "Apr"
    | "May"
    | "Jun"
    | "Jul"
    | "Aug"
    | "Sep"
    | "Oct"
    | "Nov"
    | "Dec";
  avgTemp: number;
  iceCreamSales: number;
}

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    // Chart Title
    title: { text: "Ice Cream Sales and Avg Temp" } as AgChartCaptionOptions,
    // Chart Subtitle
    subtitle: { text: "Data from 2022" } as AgChartSubtitleOptions,
    // Data: Data to be displayed within the chart
    data: [
      { month: "Jan", avgTemp: 2.3, iceCreamSales: 162000 },
      { month: "Mar", avgTemp: 6.3, iceCreamSales: 302000 },
      { month: "May", avgTemp: 16.2, iceCreamSales: 800000 },
      { month: "Jul", avgTemp: 22.8, iceCreamSales: 1254000 },
      { month: "Sep", avgTemp: 14.5, iceCreamSales: 950000 },
      { month: "Nov", avgTemp: 8.9, iceCreamSales: 200000 },
    ] as IData[],
    // Series: Defines which chart type and data to use
    // Series: Defines which chart type and data to use
    series: [
      {
        type: "bar",
        xKey: "month",
        yKey: "iceCreamSales",
        // Optional Y Axis Key, to link series to an axis, with better code readability
        yKeyAxis: "priceAxis",
      } as AgBarSeriesOptions,
      {
        type: "line",
        xKey: "month",
        yKey: "avgTemp",
        // Optional Y Axis Key, to link series to an axis, with better code readability
        yKeyAxis: "temperatureAxis",
      } as AgLineSeriesOptions,
    ],
    // Axes: Configure the axes for the chart
    axes: {
      // Use left axis for 'iceCreamSales' series
      priceAxis: {
        type: "number",
        position: "left",
      } as AgNumberAxisOptions,
      // Use right axis for 'avgTemp' series
      temperatureAxis: {
        type: "number",
        position: "right",
      } as AgNumberAxisOptions,
    },
    // Legend: Matches visual elements to their corresponding series or data categories.
    legend: {
      position: "right",
    } as AgChartLegendOptions,
  });

  return <AgCharts options={options} />;
};

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

[Live example: Legend Example](https://www.ag-grid.com/charts/reactFunctionalTs/create-a-basic-chart/examples/legend-example)

*Note: Refer to the [Legend](https://www.ag-grid.com/charts/react/legend/) docs for more info*

### Renaming Series

As you can see, our Legend and Tooltips use the property name from the data directly. We can show something more human readable by adding the `yName` property to our series.

```js
const [chartOptions, setChartOptions] = useState({
    series: [
        { type: 'bar', xKey: 'month', yKey: 'iceCreamSales', yName: 'Ice Cream Sales' },
        // ...
    ],
    // ...
});
```

Now we should see our Legend and Tooltips using the `yName` value as opposed to the `yKey`.

#### Formatting Series Example

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgBarSeriesOptions,
  AgCategoryAxisOptions,
  AgChartCaptionOptions,
  AgChartLegendOptions,
  AgChartOptions,
  AgChartSubtitleOptions,
  AgLineSeriesOptions,
  AgNumberAxisOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

interface IData {
  // Chart Data Interface
  month:
    | "Jan"
    | "Feb"
    | "Mar"
    | "Apr"
    | "May"
    | "Jun"
    | "Jul"
    | "Aug"
    | "Sep"
    | "Oct"
    | "Nov"
    | "Dec";
  avgTemp: number;
  iceCreamSales: number;
}

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    // Chart Title
    title: { text: "Ice Cream Sales and Avg Temp" } as AgChartCaptionOptions,
    // Chart Subtitle
    subtitle: { text: "Data from 2022" } as AgChartSubtitleOptions,
    // Data: Data to be displayed within the chart
    data: [
      { month: "Jan", avgTemp: 2.3, iceCreamSales: 162000 },
      { month: "Mar", avgTemp: 6.3, iceCreamSales: 302000 },
      { month: "May", avgTemp: 16.2, iceCreamSales: 800000 },
      { month: "Jul", avgTemp: 22.8, iceCreamSales: 1254000 },
      { month: "Sep", avgTemp: 14.5, iceCreamSales: 950000 },
      { month: "Nov", avgTemp: 8.9, iceCreamSales: 200000 },
    ] as IData[],
    // Series: Defines which chart type and data to use
    series: [
      {
        type: "bar",
        xKey: "month",
        yKey: "iceCreamSales",
        yName: "Ice Cream Sales",
        // Optional Y Axis Key, to link series to an axis, with better code readability
        yKeyAxis: "priceAxis",
      } as AgBarSeriesOptions,
      {
        type: "line",
        xKey: "month",
        yKey: "avgTemp",
        // Optional Y Axis Key, to link series to an axis, with better code readability
        yKeyAxis: "temperatureAxis",
      } as AgLineSeriesOptions,
    ],
    // Axes: Configure the axes for the chart
    axes: {
      // Use left axis for 'iceCreamSales' series
      priceAxis: {
        type: "number",
        position: "left",
      } as AgNumberAxisOptions,
      // Use right axis for 'avgTemp' series
      temperatureAxis: {
        type: "number",
        position: "right",
      } as AgNumberAxisOptions,
    },
    // Legend: Matches visual elements to their corresponding series or data categories.
    legend: {
      position: "right",
    } as AgChartLegendOptions,
  });

  return <AgCharts options={options} />;
};

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

[Live example: Formatting Series Example](https://www.ag-grid.com/charts/reactFunctionalTs/create-a-basic-chart/examples/format-series-example)

### Formatting Axes

The last thing to do is format our axes labels to make the chart more readable. We can do this by using a `formatter` on the `label` property of the axis.

The `formatter` should be a function that receives the axis label data and returns a `String` to display. For example, we can format our right axis to include ' °C' with the following function:

```js
const [chartOptions, setChartOptions] = useState({
    axes: {
        // ...
        temperatureAxis: {
            type: 'number',
            position: 'right',
            label: {
                // Label value as a formatter function
                formatter: (params) => {
                    return params.value + ' °C';
                },
            },
        },
    },
    // ...
});
```

Now our chart should display formatted temperature values on the right axis.

#### Second Series Formatted Example

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgBarSeriesOptions,
  AgCategoryAxisOptions,
  AgChartCaptionOptions,
  AgChartLegendOptions,
  AgChartOptions,
  AgChartSubtitleOptions,
  AgLineSeriesOptions,
  AgNumberAxisOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

interface IData {
  // Chart Data Interface
  month:
    | "Jan"
    | "Feb"
    | "Mar"
    | "Apr"
    | "May"
    | "Jun"
    | "Jul"
    | "Aug"
    | "Sep"
    | "Oct"
    | "Nov"
    | "Dec";
  avgTemp: number;
  iceCreamSales: number;
}

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    // Chart Title
    title: { text: "Ice Cream Sales and Avg Temp" } as AgChartCaptionOptions,
    // Chart Subtitle
    subtitle: { text: "Data from 2022" } as AgChartSubtitleOptions,
    // Data: Data to be displayed within the chart
    data: [
      { month: "Jan", avgTemp: 2.3, iceCreamSales: 162000 },
      { month: "Mar", avgTemp: 6.3, iceCreamSales: 302000 },
      { month: "May", avgTemp: 16.2, iceCreamSales: 800000 },
      { month: "Jul", avgTemp: 22.8, iceCreamSales: 1254000 },
      { month: "Sep", avgTemp: 14.5, iceCreamSales: 950000 },
      { month: "Nov", avgTemp: 8.9, iceCreamSales: 200000 },
    ] as IData[],
    // Series: Defines which chart type and data to use
    series: [
      {
        type: "bar",
        xKey: "month",
        yKey: "iceCreamSales",
        yName: "Ice Cream Sales",
        // Optional Y Axis Key, to link series to an axis, with better code readability
        yKeyAxis: "priceAxis",
      } as AgBarSeriesOptions,
      {
        type: "line",
        xKey: "month",
        yKey: "avgTemp",
        // Optional Y Axis Key, to link series to an axis, with better code readability
        yKeyAxis: "temperatureAxis",
      } as AgLineSeriesOptions,
    ],
    // Axes: Configure the axes for the chart
    axes: {
      // Use left axis for 'iceCreamSales' series, referencing the yKeyAxis value
      priceAxis: {
        type: "number",
        position: "left",
      } as AgNumberAxisOptions,
      // Use right axis for 'avgTemp' series, referencing the yKeyAxis value
      temperatureAxis: {
        type: "number",
        position: "right",
        // Format the label applied to this axis (append ' °C')
        label: {
          formatter: (params) => {
            return params.value + " °C";
          },
        },
      } as AgNumberAxisOptions,
    },
    // Legend: Matches visual elements to their corresponding series or data categories.
    legend: {
      position: "right",
    } as AgChartLegendOptions,
  });

  return <AgCharts options={options} />;
};

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

[Live example: Second Series Formatted Example](https://www.ag-grid.com/charts/reactFunctionalTs/create-a-basic-chart/examples/second-series-formatted-example)

*Note: Refer to the [axes](https://www.ag-grid.com/charts/options/#reference-AgChartOptions-axes) API docs for a full list of properties that can be configured*

## Test your Knowledge

1. Format the left axis using `toLocaleString()`

   *Hint: Add a formatter to the `axes.{key}.label` property*
2. Change the 'avgTemp' legend item label to 'Average Temperature (°C)'.

   *Hint: use the `yName` property on the 'avgTemp' series*

If you're stuck, check the source code of the example.

#### Complete Formatted Example

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgBarSeriesOptions,
  AgCategoryAxisOptions,
  AgChartCaptionOptions,
  AgChartLegendOptions,
  AgChartOptions,
  AgChartSubtitleOptions,
  AgLineSeriesOptions,
  AgNumberAxisOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

interface IData {
  // Chart Data Interface
  month:
    | "Jan"
    | "Feb"
    | "Mar"
    | "Apr"
    | "May"
    | "Jun"
    | "Jul"
    | "Aug"
    | "Sep"
    | "Oct"
    | "Nov"
    | "Dec";
  avgTemp: number;
  iceCreamSales: number;
}

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

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    // Chart Title
    title: { text: "Ice Cream Sales and Avg Temp" } as AgChartCaptionOptions,
    // Chart Subtitle
    subtitle: { text: "Data from 2022" } as AgChartSubtitleOptions,
    // Data: Data to be displayed within the chart
    data: [
      { month: "Jan", avgTemp: 2.3, iceCreamSales: 162000 },
      { month: "Mar", avgTemp: 6.3, iceCreamSales: 302000 },
      { month: "May", avgTemp: 16.2, iceCreamSales: 800000 },
      { month: "Jul", avgTemp: 22.8, iceCreamSales: 1254000 },
      { month: "Sep", avgTemp: 14.5, iceCreamSales: 950000 },
      { month: "Nov", avgTemp: 8.9, iceCreamSales: 200000 },
    ] as IData[],
    // Series: Defines which chart type and data to use
    series: [
      {
        type: "bar",
        xKey: "month",
        yKey: "iceCreamSales",
        yName: "Ice Cream Sales",
        // Optional Y Axis Key, to link series to an axis, with better code readability
        yKeyAxis: "priceAxis",
      } as AgBarSeriesOptions,
      {
        type: "line",
        xKey: "month",
        yKey: "avgTemp",
        yName: "Average Temperature (°C)",
        // Optional Y Axis Key, to link series to an axis, with better code readability
        yKeyAxis: "temperatureAxis",
      } as AgLineSeriesOptions,
    ],
    // Axes: Configure the axes for the chart
    axes: {
      // Use left axis for 'iceCreamSales' series, referencing the yKeyAxis value
      priceAxis: {
        type: "number",
        position: "left",
        // Format the label applied to this axis
        label: {
          formatter: (params) => {
            return parseFloat(params.value).toLocaleString();
          },
        },
      } as AgNumberAxisOptions,
      // Use right axis for 'avgTemp' series, referencing the yKeyAxis value
      temperatureAxis: {
        type: "number",
        position: "right",
        // Format the label applied to this axis (append ' °C')
        label: {
          formatter: (params) => {
            return params.value + " °C";
          },
        },
      } as AgNumberAxisOptions,
    },
    // Legend: Matches visual elements to their corresponding series or data categories.
    legend: {
      position: "right",
    } as AgChartLegendOptions,
  });

  return <AgCharts options={options} />;
};

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

[Live example: Complete Formatted Example](https://www.ag-grid.com/charts/reactFunctionalTs/create-a-basic-chart/examples/complete-formatted-example)

## Summary

Congratulations, you've completed our introductory tutorial! By now, you should be familiar with a few key concepts of AG Charts:

- **Chart Options:** Object which contains all of the configuration options for the chart.
- **Data:** The data to be displayed within the chart.
- **Series:** Controls the chart type (series) and links it to the data. Multiple series can be used to create combination charts.
- **Axes:** Controls the Axes and links it to the data.
- **Styling & Formatting:** Controls the look and feel of the chart through formatters and series properties.