---
product: "AG Studio"
title: "Line and Area Charts"
description: "Build line and area charts in AG Studio to show trends over time: which fields they need, legends, tooltips, stacking and Format settings."
framework: react
version: "3.1.0"
related:
    - title: "Bar and Column Charts"
      url: "https://www.ag-grid.com/studio/analysts/bar-and-column-charts/"
    - title: "Combo Charts"
      url: "https://www.ag-grid.com/studio/analysts/combo-charts/"
    - title: "Scatter Charts"
      url: "https://www.ag-grid.com/studio/analysts/scatter-charts/"
    - title: "Polar Charts"
      url: "https://www.ag-grid.com/studio/analysts/polar-charts/"
    - title: "Proportional Charts"
      url: "https://www.ag-grid.com/studio/analysts/proportional-charts/"
    - title: "Progression Charts"
      url: "https://www.ag-grid.com/studio/analysts/progression-charts/"
    - title: "Hierarchical Charts"
      url: "https://www.ag-grid.com/studio/analysts/hierarchical-charts/"
    - title: "Statistical Charts"
      url: "https://www.ag-grid.com/studio/analysts/statistical-charts/"
llms: "https://www.ag-grid.com/studio/llms.txt"
---

# Line and Area Charts

Line and Area Charts show how values change across an ordered set of categories, usually time.

## Line Chart

**Line Chart** connects data points with a line to show a trend over time or across a continuous dimension. Use it when the shape of change matters more than any single value.

The example below tracks monthly active users on three platforms across a year. Each platform is a field in the Y Axis slot.

#### Line Chart

```ts
import {
  AgReportState,
  AgStudioApi,
  AgStudioProperties,
  createStudio,
  enableStudioDevValidations,
} from "ag-studio";
import { getData } from "./data.ts";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableStudioDevValidations();
}

const initialState: AgReportState = {
  pages: [
    {
      id: "page1",
      widgets: {
        "line-chart": {
          type: "line-chart",
          dataMapping: {
            categoryKey: [{ id: "users.month" }],
            valueKey: [
              { id: "users.web", aggregation: "sum" },
              { id: "users.ios", aggregation: "sum" },
              { id: "users.android", aggregation: "sum" },
            ],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Line Chart",
            },
            subtitle: {
              enabled: true,
              text: "Monthly active users by platform",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
      },
      widgetLayout: {
        "line-chart": {
          xTrack: 0,
          yTrack: 0,
          xSpan: 24,
          ySpan: 20,
        },
      },
    },
  ],
  selectedPageId: "page1",
  panels: {
    filters: {
      collapsed: true,
    },
    data: {
      collapsed: true,
    },
    edit: {
      collapsed: true,
    },
  },
};

const studioProperties: AgStudioProperties = {
  mode: "edit",
  initialState,
  data: getData(),
};

let studioApi: AgStudioApi;

// setup Studio after the page has finished loading
const studioDiv = document.querySelector<HTMLElement>("#myStudio")!;
studioApi = createStudio(studioDiv, studioProperties);
```

[Live example: Line Chart](https://www.ag-grid.com/studio/examples/line-and-area-charts/line-chart/typescript/)

## Area Charts

There are three Area Charts, each filling the area beneath a line:

**Area Chart** fills the area beneath a line to emphasise the magnitude of a trend over time.

**Stacked Area Chart** stacks filled areas to show cumulative trends and part-to-whole relationships over time.

**100% Stacked Area Chart** normalises stacked areas to 100% to show proportional trends over time.

The example below plots the same monthly website sessions from three marketing channels in all three variants.

#### Area Chart

```ts
import {
  AgReportState,
  AgStudioApi,
  AgStudioProperties,
  createStudio,
  enableStudioDevValidations,
} from "ag-studio";
import { getData } from "./data.ts";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableStudioDevValidations();
}

const initialState: AgReportState = {
  pages: [
    {
      id: "page1",
      widgets: {
        "area-chart": {
          type: "area-chart",
          dataMapping: {
            categoryKey: [{ id: "traffic.month" }],
            valueKey: [
              { id: "traffic.organic", aggregation: "sum" },
              { id: "traffic.paid", aggregation: "sum" },
              { id: "traffic.social", aggregation: "sum" },
            ],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Area Chart",
            },
            subtitle: {
              enabled: true,
              text: "Website sessions by marketing channel",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        "area-chart-stacked": {
          type: "area-chart-stacked",
          dataMapping: {
            categoryKey: [{ id: "traffic.month" }],
            valueKey: [
              { id: "traffic.organic", aggregation: "sum" },
              { id: "traffic.paid", aggregation: "sum" },
              { id: "traffic.social", aggregation: "sum" },
            ],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Stacked Area Chart",
            },
            subtitle: {
              enabled: true,
              text: "Website sessions by marketing channel",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        "area-chart-stacked-100": {
          type: "area-chart-stacked-100",
          dataMapping: {
            categoryKey: [{ id: "traffic.month" }],
            valueKey: [
              { id: "traffic.organic", aggregation: "sum" },
              { id: "traffic.paid", aggregation: "sum" },
              { id: "traffic.social", aggregation: "sum" },
            ],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "100% Stacked Area Chart",
            },
            subtitle: {
              enabled: true,
              text: "Share of monthly sessions by marketing channel",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
      },
      widgetLayout: {
        "area-chart": {
          xTrack: 0,
          yTrack: 0,
          xSpan: 24,
          ySpan: 20,
        },
        "area-chart-stacked": {
          xTrack: 0,
          yTrack: 20,
          xSpan: 24,
          ySpan: 20,
        },
        "area-chart-stacked-100": {
          xTrack: 0,
          yTrack: 40,
          xSpan: 24,
          ySpan: 20,
        },
      },
    },
  ],
  selectedPageId: "page1",
  panels: {
    filters: {
      collapsed: true,
    },
    data: {
      collapsed: true,
    },
    edit: {
      collapsed: true,
    },
  },
};

const studioProperties: AgStudioProperties = {
  mode: "edit",
  initialState,
  data: getData(),
};

let studioApi: AgStudioApi;

// setup Studio after the page has finished loading
const studioDiv = document.querySelector<HTMLElement>("#myStudio")!;
studioApi = createStudio(studioDiv, studioProperties);
```

[Live example: Area Chart](https://www.ag-grid.com/studio/examples/line-and-area-charts/area-chart/typescript/)

## Setup

Line and Area Charts take the same slots.

| Slot | Required | Accepts | What it does |
| --- | --- | --- | --- |
| X Axis | Yes | One category | Places one point along the axis for each value of the field, such as each month. |
| Y Axis | Yes | One or more numeric fields | Sets the height of each point. Each field adds a line or area in its own colour. |
| Legend | No | One category | Gives each value of this field its own line or area. |
| Tooltip | No | Any fields | Shows the fields in the tooltip without plotting them. |

A date field on the X Axis is grouped by a period, such as month or year. To change the period, see [Dates and Times](https://www.ag-grid.com/studio/analysts/building-widgets/#dates-and-times).

### Legend

A Legend splits each numeric field into a series for each value of a category. Use it when the values to compare are rows in the data, such as one row per region, rather than separate fields.

The example below has Region in the Legend slot of every chart. The left column has one field, Revenue, in the Y Axis slot, so each chart has one series per region. The right column adds Profit, so each region has a series for each field. Each row is one variant: Line, Area, Stacked Area and 100% Stacked Area. In the stacked variants, every series stacks into one total.

#### Legend

```ts
import {
  AgReportState,
  AgStudioApi,
  AgStudioProperties,
  createStudio,
  enableStudioDevValidations,
} from "ag-studio";
import { getData } from "./data.ts";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableStudioDevValidations();
}

const initialState: AgReportState = {
  pages: [
    {
      id: "page1",
      widgets: {
        "line-one": {
          type: "line-chart",
          dataMapping: {
            categoryKey: [{ id: "sales.month" }],
            valueKey: [{ id: "sales.revenue", aggregation: "sum" }],
            legendKey: [{ id: "sales.region" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Line: Revenue",
            },
            subtitle: {
              enabled: true,
              text: "By month, with Region in the Legend slot",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        "line-two": {
          type: "line-chart",
          dataMapping: {
            categoryKey: [{ id: "sales.month" }],
            valueKey: [
              { id: "sales.revenue", aggregation: "sum" },
              { id: "sales.profit", aggregation: "sum" },
            ],
            legendKey: [{ id: "sales.region" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Line: Revenue and Profit",
            },
            subtitle: {
              enabled: true,
              text: "By month, with Region in the Legend slot",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                    position: "right",
                  },
                },
              },
            },
          },
        },
        "area-one": {
          type: "area-chart",
          dataMapping: {
            categoryKey: [{ id: "sales.month" }],
            valueKey: [{ id: "sales.revenue", aggregation: "sum" }],
            legendKey: [{ id: "sales.region" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Area: Revenue",
            },
            subtitle: {
              enabled: true,
              text: "By month, with Region in the Legend slot",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        "area-two": {
          type: "area-chart",
          dataMapping: {
            categoryKey: [{ id: "sales.month" }],
            valueKey: [
              { id: "sales.revenue", aggregation: "sum" },
              { id: "sales.profit", aggregation: "sum" },
            ],
            legendKey: [{ id: "sales.region" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Area: Revenue and Profit",
            },
            subtitle: {
              enabled: true,
              text: "By month, with Region in the Legend slot",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                    position: "right",
                  },
                },
              },
            },
          },
        },
        "area-stacked-one": {
          type: "area-chart-stacked",
          dataMapping: {
            categoryKey: [{ id: "sales.month" }],
            valueKey: [{ id: "sales.revenue", aggregation: "sum" }],
            legendKey: [{ id: "sales.region" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Stacked Area: Revenue",
            },
            subtitle: {
              enabled: true,
              text: "By month, with Region in the Legend slot",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        "area-stacked-two": {
          type: "area-chart-stacked",
          dataMapping: {
            categoryKey: [{ id: "sales.month" }],
            valueKey: [
              { id: "sales.revenue", aggregation: "sum" },
              { id: "sales.profit", aggregation: "sum" },
            ],
            legendKey: [{ id: "sales.region" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Stacked Area: Revenue and Profit",
            },
            subtitle: {
              enabled: true,
              text: "By month, with Region in the Legend slot",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                    position: "right",
                  },
                },
              },
            },
          },
        },
        "area-stacked-100-one": {
          type: "area-chart-stacked-100",
          dataMapping: {
            categoryKey: [{ id: "sales.month" }],
            valueKey: [{ id: "sales.revenue", aggregation: "sum" }],
            legendKey: [{ id: "sales.region" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "100% Stacked Area: Revenue",
            },
            subtitle: {
              enabled: true,
              text: "By month, with Region in the Legend slot",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        "area-stacked-100-two": {
          type: "area-chart-stacked-100",
          dataMapping: {
            categoryKey: [{ id: "sales.month" }],
            valueKey: [
              { id: "sales.revenue", aggregation: "sum" },
              { id: "sales.profit", aggregation: "sum" },
            ],
            legendKey: [{ id: "sales.region" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "100% Stacked Area: Revenue and Profit",
            },
            subtitle: {
              enabled: true,
              text: "By month, with Region in the Legend slot",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                    position: "right",
                  },
                },
              },
            },
          },
        },
      },
      widgetLayout: {
        "line-one": { xTrack: 0, yTrack: 0, xSpan: 10, ySpan: 20 },
        "line-two": { xTrack: 10, yTrack: 0, xSpan: 14, ySpan: 20 },
        "area-one": { xTrack: 0, yTrack: 20, xSpan: 10, ySpan: 20 },
        "area-two": { xTrack: 10, yTrack: 20, xSpan: 14, ySpan: 20 },
        "area-stacked-one": { xTrack: 0, yTrack: 40, xSpan: 10, ySpan: 20 },
        "area-stacked-two": { xTrack: 10, yTrack: 40, xSpan: 14, ySpan: 20 },
        "area-stacked-100-one": { xTrack: 0, yTrack: 60, xSpan: 10, ySpan: 20 },
        "area-stacked-100-two": {
          xTrack: 10,
          yTrack: 60,
          xSpan: 14,
          ySpan: 20,
        },
      },
    },
  ],
  selectedPageId: "page1",
  panels: {
    filters: {
      collapsed: true,
    },
    data: {
      collapsed: true,
    },
    edit: {
      collapsed: true,
    },
  },
};

const studioProperties: AgStudioProperties = {
  mode: "edit",
  initialState,
  data: getData(),
};

let studioApi: AgStudioApi;

// setup Studio after the page has finished loading
const studioDiv = document.querySelector<HTMLElement>("#myStudio")!;
studioApi = createStudio(studioDiv, studioProperties);
```

[Live example: Legend](https://www.ag-grid.com/studio/examples/line-and-area-charts/line-legend/typescript/)

See [Group By Legend](https://www.ag-grid.com/studio/analysts/building-widgets/#group-by-legend) for how the series are named.

### Tooltip

Fields in the Tooltip slot appear in the tooltip when you hover over a point, but are not plotted. Use the slot for context that would clutter the chart, such as the number of orders behind each revenue figure.

In the example below, the line shows monthly online revenue, and the Setup tab is open beside the chart. Hover over a point to see its Orders and Returns, which are in the Tooltip slot.

#### Tooltip

```ts
import {
  AgReportState,
  AgStudioApi,
  AgStudioProperties,
  createStudio,
  enableStudioDevValidations,
} from "ag-studio";
import { getData } from "./data.ts";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableStudioDevValidations();
}

const initialState: AgReportState = {
  pages: [
    {
      id: "page1",
      widgets: {
        "revenue-by-month": {
          type: "line-chart",
          dataMapping: {
            categoryKey: [{ id: "sales.month" }],
            valueKey: [{ id: "sales.revenue", aggregation: "sum" }],
            tooltipKey: [
              { id: "sales.orders", aggregation: "sum" },
              { id: "sales.returns", aggregation: "sum" },
            ],
          },
          format: {
            title: {
              enabled: true,
              text: "Online Revenue by Month",
            },
          },
        },
      },
      widgetLayout: {
        "revenue-by-month": { xTrack: 0, yTrack: 0, xSpan: 24, ySpan: 24 },
      },
      selection: { type: "widget", id: "revenue-by-month" },
    },
  ],
  selectedPageId: "page1",
};

const studioProperties: AgStudioProperties = {
  mode: "edit",
  initialState,
  panels: {
    edit: {
      right: ["edit"],
    },
  },
  data: getData(),
};

let studioApi: AgStudioApi;

// setup Studio after the page has finished loading
const studioDiv = document.querySelector<HTMLElement>("#myStudio")!;
studioApi = createStudio(studioDiv, studioProperties);
```

[Live example: Tooltip](https://www.ag-grid.com/studio/examples/line-and-area-charts/line-tooltip/typescript/)

## Format

Line and Area Charts have these settings of their own on the Format tab, beside the title, axis and appearance settings every chart has. Your developer can change the defaults shown.

| Setting | Where | Default | What it does |
| --- | --- | --- | --- |
| Legend | Elements | Off | Shows the legend. **Position** places it around the chart, at the bottom by default. |
| Markers | Elements | On for Line Charts, off for Area Charts | Draws a marker at each point. **Shape** and **Size** change the marker. |
| Data Labels | Elements | Off | Shows the value of each point. **Font** and **Color** change the label text. |
| Connection Style | Line Chart or Area Chart section | Linear | Sets how the line joins its points: Linear, Smooth or Step. |

The example below shows each setting turned on in its own chart, over the same data. Markers are shown on an Area Chart, where they are off by default.

#### Format

```ts
import {
  AgReportState,
  AgStudioApi,
  AgStudioProperties,
  createStudio,
  enableStudioDevValidations,
} from "ag-studio";
import { getData } from "./data.ts";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableStudioDevValidations();
}

const initialState: AgReportState = {
  pages: [
    {
      id: "page1",
      widgets: {
        "data-labels": {
          type: "line-chart",
          dataMapping: {
            categoryKey: [{ id: "sales.month" }],
            valueKey: [
              { id: "sales.online", aggregation: "sum" },
              { id: "sales.in_store", aggregation: "sum" },
            ],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Line: Data Labels",
            },
            subtitle: {
              enabled: true,
              text: "Elements > Data Labels on",
            },
            style: {
              theme: {
                line: {
                  series: {
                    label: {
                      enabled: true,
                    },
                  },
                },
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        markers: {
          type: "area-chart",
          dataMapping: {
            categoryKey: [{ id: "sales.month" }],
            valueKey: [
              { id: "sales.online", aggregation: "sum" },
              { id: "sales.in_store", aggregation: "sum" },
            ],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Area: Markers",
            },
            subtitle: {
              enabled: true,
              text: "Elements > Markers on",
            },
            style: {
              theme: {
                area: {
                  series: {
                    marker: {
                      enabled: true,
                    },
                  },
                },
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        smooth: {
          type: "line-chart",
          dataMapping: {
            categoryKey: [{ id: "sales.month" }],
            valueKey: [
              { id: "sales.online", aggregation: "sum" },
              { id: "sales.in_store", aggregation: "sum" },
            ],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Line: Smooth",
            },
            subtitle: {
              enabled: true,
              text: "Line Chart > Connection Style Smooth",
            },
            style: {
              theme: {
                line: {
                  series: {
                    interpolation: {
                      type: "smooth",
                    },
                  },
                },
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        step: {
          type: "line-chart",
          dataMapping: {
            categoryKey: [{ id: "sales.month" }],
            valueKey: [
              { id: "sales.online", aggregation: "sum" },
              { id: "sales.in_store", aggregation: "sum" },
            ],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Line: Step",
            },
            subtitle: {
              enabled: true,
              text: "Line Chart > Connection Style Step",
            },
            style: {
              theme: {
                line: {
                  series: {
                    interpolation: {
                      type: "step",
                    },
                  },
                },
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        "stacked-smooth": {
          type: "area-chart-stacked",
          dataMapping: {
            categoryKey: [{ id: "sales.month" }],
            valueKey: [
              { id: "sales.online", aggregation: "sum" },
              { id: "sales.in_store", aggregation: "sum" },
            ],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Stacked Area: Smooth",
            },
            subtitle: {
              enabled: true,
              text: "Area Chart > Connection Style Smooth",
            },
            style: {
              theme: {
                area: {
                  series: {
                    interpolation: {
                      type: "smooth",
                    },
                  },
                },
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        "legend-position": {
          type: "line-chart",
          dataMapping: {
            categoryKey: [{ id: "sales.month" }],
            valueKey: [
              { id: "sales.online", aggregation: "sum" },
              { id: "sales.in_store", aggregation: "sum" },
            ],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Legend Position",
            },
            subtitle: {
              enabled: true,
              text: "Elements > Legend > Position Right",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                    position: "right",
                  },
                },
              },
            },
          },
        },
      },
      widgetLayout: {
        "data-labels": { xTrack: 0, yTrack: 0, xSpan: 12, ySpan: 22 },
        markers: { xTrack: 12, yTrack: 0, xSpan: 12, ySpan: 22 },
        smooth: { xTrack: 0, yTrack: 22, xSpan: 12, ySpan: 22 },
        step: { xTrack: 12, yTrack: 22, xSpan: 12, ySpan: 22 },
        "stacked-smooth": { xTrack: 0, yTrack: 44, xSpan: 12, ySpan: 22 },
        "legend-position": { xTrack: 12, yTrack: 44, xSpan: 12, ySpan: 22 },
      },
    },
  ],
  selectedPageId: "page1",
  panels: {
    filters: {
      collapsed: true,
    },
    data: {
      collapsed: true,
    },
    edit: {
      collapsed: true,
    },
  },
};

const studioProperties: AgStudioProperties = {
  mode: "edit",
  initialState,
  data: getData(),
};

let studioApi: AgStudioApi;

// setup Studio after the page has finished loading
const studioDiv = document.querySelector<HTMLElement>("#myStudio")!;
studioApi = createStudio(studioDiv, studioProperties);
```

[Live example: Format](https://www.ag-grid.com/studio/examples/line-and-area-charts/line-format/typescript/)