---
product: "AG Studio"
title: "Progression Charts"
description: "Build funnel, cone funnel and pyramid charts in AG Studio for stages such as a sales funnel: which fields they need, sorting 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: "Line and Area Charts"
      url: "https://www.ag-grid.com/studio/analysts/line-and-area-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: "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"
---

# Progression Charts

Progression Charts show values narrowing through sequential stages, such as a sales or conversion funnel, or growing through tiers.

**Funnel Chart** uses a stepped funnel to show conversion rates or sequential process stages.

**Cone Funnel Chart** uses a smooth-tapering funnel for the same kind of conversion or process visualisation.

**Pyramid Chart** uses a triangular layout for hierarchical or tiered data.

The example below places a Funnel beside a Cone Funnel, both showing how many visitors reach each stage of an online checkout, with a Pyramid below them showing how many customers belong to each loyalty tier.

#### Progression 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: {
        "funnel-chart": {
          type: "funnel-chart",
          dataMapping: {
            categoryKey: [{ id: "checkout.stage" }],
            valueKey: [{ id: "checkout.visitors", aggregation: "sum" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Funnel Chart",
            },
            subtitle: {
              enabled: true,
              text: "Visitors reaching each stage of the online checkout",
            },
          },
        },
        "cone-funnel-chart": {
          type: "cone-funnel-chart",
          dataMapping: {
            categoryKey: [{ id: "checkout.stage" }],
            valueKey: [{ id: "checkout.visitors", aggregation: "sum" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Cone Funnel Chart",
            },
            subtitle: {
              enabled: true,
              text: "Visitors reaching each stage of the online checkout",
            },
          },
        },
        "pyramid-chart": {
          type: "pyramid-chart",
          dataMapping: {
            categoryKey: [{ id: "customers.tier" }],
            valueKey: [{ id: "customers.customers", aggregation: "sum" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Pyramid Chart",
            },
            subtitle: {
              enabled: true,
              text: "Customers in each loyalty tier",
            },
          },
        },
      },
      widgetLayout: {
        "funnel-chart": { xTrack: 0, yTrack: 0, xSpan: 12, ySpan: 20 },
        "cone-funnel-chart": { xTrack: 12, yTrack: 0, xSpan: 12, ySpan: 20 },
        "pyramid-chart": { xTrack: 6, yTrack: 20, xSpan: 12, 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: Progression Chart](https://www.ag-grid.com/studio/examples/progression-charts/progression-chart/typescript/)

## Setup

| Slot | Required | Accepts | What it does |
| --- | --- | --- | --- |
| Stage | Yes | One category | Adds one stage for each value of the field, from top to bottom. |
| Value | Yes | One numeric field | Sets the size of each stage. |
| Tooltip | No | Any fields | Shows the fields in the tooltip without plotting them. |

In the example above, Stage is in the Stage slot and Visitors is in the Value slot of both funnels.

### Stage Order

The stages appear in the order they come from the data. To reorder them, sort the Value field using its menu in the Setup tab. A funnel reads best with its largest stage at the top, and a pyramid with its smallest.

In the example below, the loyalty tiers come from the data with Bronze, the largest tier, first, so the left Pyramid is upside down. The right Pyramid sorts Customers in ascending order, which puts the smallest tier, Platinum, at the top.

#### Stage Order

```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: {
        "pyramid-data-order": {
          type: "pyramid-chart",
          dataMapping: {
            categoryKey: [{ id: "customers.tier" }],
            valueKey: [{ id: "customers.customers", aggregation: "sum" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Pyramid: Data Order",
            },
            subtitle: {
              enabled: true,
              text: "Tiers in the order of the data, Bronze first",
            },
          },
        },
        "pyramid-sorted": {
          type: "pyramid-chart",
          dataMapping: {
            categoryKey: [{ id: "customers.tier" }],
            valueKey: [{ id: "customers.customers", aggregation: "sum" }],
            tooltipKey: [],
          },
          sort: [
            {
              field: { id: "customers.customers", aggregation: "sum" },
              direction: "asc",
            },
          ],
          format: {
            title: {
              enabled: true,
              text: "Pyramid: Customers Ascending",
            },
            subtitle: {
              enabled: true,
              text: "Value field sorted ascending in the Setup tab",
            },
          },
        },
      },
      widgetLayout: {
        "pyramid-data-order": { xTrack: 0, yTrack: 0, xSpan: 12, ySpan: 20 },
        "pyramid-sorted": { xTrack: 12, yTrack: 0, xSpan: 12, 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: Stage Order](https://www.ag-grid.com/studio/examples/progression-charts/progression-sort/typescript/)

### Tooltip

Fields in the Tooltip slot appear in the tooltip when you hover over a stage, but are not plotted. Use the slot for context that would clutter the chart, such as how a stage's visitors split by device.

In the example below, the funnel shows the visitors at each checkout stage, and the Setup tab is open beside the chart. Hover over a stage to see its Mobile Visitors and Desktop Visitors, 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: {
        "visitors-by-stage": {
          type: "funnel-chart",
          dataMapping: {
            categoryKey: [{ id: "checkout.stage" }],
            valueKey: [{ id: "checkout.visitors", aggregation: "sum" }],
            tooltipKey: [
              { id: "checkout.mobile", aggregation: "sum" },
              { id: "checkout.desktop", aggregation: "sum" },
            ],
          },
          format: {
            title: {
              enabled: true,
              text: "Visitors by Checkout Stage",
            },
          },
        },
      },
      widgetLayout: {
        "visitors-by-stage": { xTrack: 0, yTrack: 0, xSpan: 24, ySpan: 24 },
      },
      selection: { type: "widget", id: "visitors-by-stage" },
    },
  ],
  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/progression-charts/progression-tooltip/typescript/)

## Format

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

| Setting | Where | Default | What it does |
| --- | --- | --- | --- |
| Data Labels | Elements | Off | Shows each stage's value. **Font** and **Color** change the label text. |
| Direction | Format section | Vertical | **Vertical** runs the stages from top to bottom. **Horizontal** turns the chart on its side. |

The example below shows each setting applied to each variant. The funnels plot the checkout data, and the Pyramids plot the loyalty tiers. The left column turns on Data Labels, and the right column sets Direction to Horizontal.

#### 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: {
        "funnel-data-labels": {
          type: "funnel-chart",
          dataMapping: {
            categoryKey: [{ id: "checkout.stage" }],
            valueKey: [{ id: "checkout.visitors", aggregation: "sum" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Funnel: Data Labels",
            },
            subtitle: {
              enabled: true,
              text: "Elements > Data Labels on",
            },
            style: {
              theme: {
                funnel: {
                  series: {
                    label: {
                      enabled: true,
                    },
                  },
                },
              },
            },
          },
        },
        "funnel-horizontal": {
          type: "funnel-chart",
          dataMapping: {
            categoryKey: [{ id: "checkout.stage" }],
            valueKey: [{ id: "checkout.visitors", aggregation: "sum" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Funnel: Horizontal",
            },
            subtitle: {
              enabled: true,
              text: "Format > Direction Horizontal",
            },
            style: {
              theme: {
                funnel: {
                  series: {
                    direction: "horizontal",
                  },
                },
              },
            },
          },
        },
        "cone-funnel-data-labels": {
          type: "cone-funnel-chart",
          dataMapping: {
            categoryKey: [{ id: "checkout.stage" }],
            valueKey: [{ id: "checkout.visitors", aggregation: "sum" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Cone Funnel: Data Labels",
            },
            subtitle: {
              enabled: true,
              text: "Elements > Data Labels on",
            },
            style: {
              theme: {
                "cone-funnel": {
                  series: {
                    label: {
                      enabled: true,
                    },
                  },
                },
              },
            },
          },
        },
        "cone-funnel-horizontal": {
          type: "cone-funnel-chart",
          dataMapping: {
            categoryKey: [{ id: "checkout.stage" }],
            valueKey: [{ id: "checkout.visitors", aggregation: "sum" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Cone Funnel: Horizontal",
            },
            subtitle: {
              enabled: true,
              text: "Format > Direction Horizontal",
            },
            style: {
              theme: {
                "cone-funnel": {
                  series: {
                    direction: "horizontal",
                  },
                },
              },
            },
          },
        },
        "pyramid-data-labels": {
          type: "pyramid-chart",
          dataMapping: {
            categoryKey: [{ id: "customers.tier" }],
            valueKey: [{ id: "customers.customers", aggregation: "sum" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Pyramid: Data Labels",
            },
            subtitle: {
              enabled: true,
              text: "Elements > Data Labels on",
            },
            style: {
              theme: {
                pyramid: {
                  series: {
                    label: {
                      enabled: true,
                    },
                  },
                },
              },
            },
          },
        },
        "pyramid-horizontal": {
          type: "pyramid-chart",
          dataMapping: {
            categoryKey: [{ id: "customers.tier" }],
            valueKey: [{ id: "customers.customers", aggregation: "sum" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Pyramid: Horizontal",
            },
            subtitle: {
              enabled: true,
              text: "Format > Direction Horizontal",
            },
            style: {
              theme: {
                pyramid: {
                  series: {
                    direction: "horizontal",
                  },
                },
              },
            },
          },
        },
      },
      widgetLayout: {
        "funnel-data-labels": { xTrack: 0, yTrack: 0, xSpan: 12, ySpan: 20 },
        "funnel-horizontal": { xTrack: 12, yTrack: 0, xSpan: 12, ySpan: 20 },
        "cone-funnel-data-labels": {
          xTrack: 0,
          yTrack: 20,
          xSpan: 12,
          ySpan: 20,
        },
        "cone-funnel-horizontal": {
          xTrack: 12,
          yTrack: 20,
          xSpan: 12,
          ySpan: 20,
        },
        "pyramid-data-labels": { xTrack: 0, yTrack: 40, xSpan: 12, ySpan: 20 },
        "pyramid-horizontal": { xTrack: 12, yTrack: 40, xSpan: 12, 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: Format](https://www.ag-grid.com/studio/examples/progression-charts/progression-format/typescript/)