---
product: "AG Studio"
title: "Polar Charts"
description: "Build radar, radial bar, radial column and nightingale charts in AG Studio: which fields they need, legends, tooltips 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: "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"
---

# Polar Charts

Polar Charts plot values around a circular axis rather than a straight one.

## Radar Charts

**Radar Line Chart** uses lines on a radar layout to compare multiple variables at once.

**Radar Area Chart** fills the area on a radar layout to emphasise coverage across dimensions.

The example below compares three jackets across six rated attributes. Each jacket is a field in the Radius slot, so each draws its own series.

#### Radar Charts

```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: {
        "radar-line-chart": {
          type: "radar-line-chart",
          dataMapping: {
            categoryKey: [{ id: "ratings.attribute" }],
            valueKey: [
              { id: "ratings.alpine", aggregation: "sum" },
              { id: "ratings.storm", aggregation: "sum" },
              { id: "ratings.trail", aggregation: "sum" },
            ],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Radar Line Chart",
            },
            subtitle: {
              enabled: true,
              text: "Jacket ratings out of 10 across six attributes",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        "radar-area-chart": {
          type: "radar-area-chart",
          dataMapping: {
            categoryKey: [{ id: "ratings.attribute" }],
            valueKey: [
              { id: "ratings.alpine", aggregation: "sum" },
              { id: "ratings.storm", aggregation: "sum" },
              { id: "ratings.trail", aggregation: "sum" },
            ],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Radar Area Chart",
            },
            subtitle: {
              enabled: true,
              text: "Jacket ratings out of 10 across six attributes",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
      },
      widgetLayout: {
        "radar-line-chart": { xTrack: 0, yTrack: 0, xSpan: 12, ySpan: 22 },
        "radar-area-chart": { xTrack: 12, yTrack: 0, 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: Radar Charts](https://www.ag-grid.com/studio/examples/polar-charts/radar-chart/typescript/)

## Radial Charts

**Radial Column Chart** arranges bars in a circle, which suits cyclical or categorical data.

**Nightingale Chart** uses sectors of varying radius to emphasise differences in value.

**Radial Bar Chart** uses concentric circular bars for compact category comparisons.

The example below plots orders for each day of the week in all three. In Store and Online are separate fields, so each day has two series.

#### Radial Charts

```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: {
        "radial-column-chart": {
          type: "radial-column-chart",
          dataMapping: {
            categoryKey: [{ id: "orders.day" }],
            valueKey: [
              { id: "orders.in_store", aggregation: "sum" },
              { id: "orders.online", aggregation: "sum" },
            ],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Radial Column Chart",
            },
            subtitle: {
              enabled: true,
              text: "Orders by day of the week and channel",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        "nightingale-chart": {
          type: "nightingale-chart",
          dataMapping: {
            categoryKey: [{ id: "orders.day" }],
            valueKey: [
              { id: "orders.in_store", aggregation: "sum" },
              { id: "orders.online", aggregation: "sum" },
            ],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Nightingale Chart",
            },
            subtitle: {
              enabled: true,
              text: "Orders by day of the week and channel",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        "radial-bar-chart": {
          type: "radial-bar-chart",
          dataMapping: {
            categoryKey: [{ id: "orders.day" }],
            valueKey: [
              { id: "orders.in_store", aggregation: "sum" },
              { id: "orders.online", aggregation: "sum" },
            ],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Radial Bar Chart",
            },
            subtitle: {
              enabled: true,
              text: "Orders by day of the week and channel",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
      },
      widgetLayout: {
        "radial-column-chart": { xTrack: 0, yTrack: 0, xSpan: 12, ySpan: 22 },
        "nightingale-chart": { xTrack: 12, yTrack: 0, xSpan: 12, ySpan: 22 },
        "radial-bar-chart": { xTrack: 6, yTrack: 22, 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: Radial Charts](https://www.ag-grid.com/studio/examples/polar-charts/radial-chart/typescript/)

## Setup

The categories go around the circle on most Polar Charts, and the values extend out from the centre. The Radial Bar Chart is the other way round: each category is a ring, and its value sets how far the bar runs around the circle. Its slot names are swapped to match.

| Slot | Required | Accepts | What it does |
| --- | --- | --- | --- |
| Angle (Radial Bar Chart: Radius) | Yes | One category | Places one category for each value of the field. |
| Radius (Radial Bar Chart: Angle) | Yes | One or more numeric fields | Sets the size of each category's point, bar or sector. Each field adds a series. |
| Legend | No | One category | Gives each value of this field its own series and colour. Not offered on the Nightingale Chart. |
| Tooltip | No | Any fields | Shows the fields in the tooltip without plotting them. |

In the Radial Charts example above, Day is in the Angle slot, and In Store and Online are two fields in the Radius slot. On the Radial Bar Chart, the same fields are in the Radius and Angle slots respectively.

### 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 Nightingale Chart has no Legend slot.

The example below has Region in the Legend slot of every chart. The left column has one field, In Store, so each department has one series per region. The right column adds Online, so each region has a series for each field. Each row is one Widget: Radar Line, Radar Area, Radial Column and Radial Bar.

#### 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: {
        "radar-line-chart-one": {
          type: "radar-line-chart",
          dataMapping: {
            categoryKey: [{ id: "sales.department" }],
            valueKey: [{ id: "sales.in_store", aggregation: "sum" }],
            legendKey: [{ id: "sales.region" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Radar Line: In Store",
            },
            subtitle: {
              enabled: true,
              text: "By department, with Region in the Legend slot",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        "radar-area-chart-one": {
          type: "radar-area-chart",
          dataMapping: {
            categoryKey: [{ id: "sales.department" }],
            valueKey: [{ id: "sales.in_store", aggregation: "sum" }],
            legendKey: [{ id: "sales.region" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Radar Area: In Store",
            },
            subtitle: {
              enabled: true,
              text: "By department, with Region in the Legend slot",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        "radial-column-chart-one": {
          type: "radial-column-chart",
          dataMapping: {
            categoryKey: [{ id: "sales.department" }],
            valueKey: [{ id: "sales.in_store", aggregation: "sum" }],
            legendKey: [{ id: "sales.region" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Radial Column: In Store",
            },
            subtitle: {
              enabled: true,
              text: "By department, with Region in the Legend slot",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        "radial-bar-chart-one": {
          type: "radial-bar-chart",
          dataMapping: {
            categoryKey: [{ id: "sales.department" }],
            valueKey: [{ id: "sales.in_store", aggregation: "sum" }],
            legendKey: [{ id: "sales.region" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Radial Bar: In Store",
            },
            subtitle: {
              enabled: true,
              text: "By department, with Region in the Legend slot",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        "radar-line-chart-two": {
          type: "radar-line-chart",
          dataMapping: {
            categoryKey: [{ id: "sales.department" }],
            valueKey: [
              { id: "sales.in_store", aggregation: "sum" },
              { id: "sales.online", aggregation: "sum" },
            ],
            legendKey: [{ id: "sales.region" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Radar Line: In Store and Online",
            },
            subtitle: {
              enabled: true,
              text: "By department, with Region in the Legend slot",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                    position: "right",
                  },
                },
              },
            },
          },
        },
        "radar-area-chart-two": {
          type: "radar-area-chart",
          dataMapping: {
            categoryKey: [{ id: "sales.department" }],
            valueKey: [
              { id: "sales.in_store", aggregation: "sum" },
              { id: "sales.online", aggregation: "sum" },
            ],
            legendKey: [{ id: "sales.region" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Radar Area: In Store and Online",
            },
            subtitle: {
              enabled: true,
              text: "By department, with Region in the Legend slot",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                    position: "right",
                  },
                },
              },
            },
          },
        },
        "radial-column-chart-two": {
          type: "radial-column-chart",
          dataMapping: {
            categoryKey: [{ id: "sales.department" }],
            valueKey: [
              { id: "sales.in_store", aggregation: "sum" },
              { id: "sales.online", aggregation: "sum" },
            ],
            legendKey: [{ id: "sales.region" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Radial Column: In Store and Online",
            },
            subtitle: {
              enabled: true,
              text: "By department, with Region in the Legend slot",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                    position: "right",
                  },
                },
              },
            },
          },
        },
        "radial-bar-chart-two": {
          type: "radial-bar-chart",
          dataMapping: {
            categoryKey: [{ id: "sales.department" }],
            valueKey: [
              { id: "sales.in_store", aggregation: "sum" },
              { id: "sales.online", aggregation: "sum" },
            ],
            legendKey: [{ id: "sales.region" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Radial Bar: In Store and Online",
            },
            subtitle: {
              enabled: true,
              text: "By department, with Region in the Legend slot",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                    position: "right",
                  },
                },
              },
            },
          },
        },
      },
      widgetLayout: {
        "radar-line-chart-one": { xTrack: 0, yTrack: 0, xSpan: 10, ySpan: 22 },
        "radar-area-chart-one": { xTrack: 0, yTrack: 22, xSpan: 10, ySpan: 22 },
        "radial-column-chart-one": {
          xTrack: 0,
          yTrack: 44,
          xSpan: 10,
          ySpan: 22,
        },
        "radial-bar-chart-one": { xTrack: 0, yTrack: 66, xSpan: 10, ySpan: 22 },
        "radar-line-chart-two": { xTrack: 10, yTrack: 0, xSpan: 14, ySpan: 22 },
        "radar-area-chart-two": {
          xTrack: 10,
          yTrack: 22,
          xSpan: 14,
          ySpan: 22,
        },
        "radial-column-chart-two": {
          xTrack: 10,
          yTrack: 44,
          xSpan: 14,
          ySpan: 22,
        },
        "radial-bar-chart-two": {
          xTrack: 10,
          yTrack: 66,
          xSpan: 14,
          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: Legend](https://www.ag-grid.com/studio/examples/polar-charts/polar-legend/typescript/)

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

### Tooltip

Fields in the Tooltip slot appear in the tooltip when you hover over the chart, but are not plotted. Use the slot for context that would clutter the chart, such as the revenue behind each day's orders.

In the example below, each column shows the orders for a day of the week, and the Setup tab is open beside the chart. Hover over a column to see its Revenue 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: {
        "orders-by-day": {
          type: "radial-column-chart",
          dataMapping: {
            categoryKey: [{ id: "orders.day" }],
            valueKey: [{ id: "orders.orders", aggregation: "sum" }],
            tooltipKey: [
              { id: "orders.revenue", aggregation: "sum" },
              { id: "orders.returns", aggregation: "sum" },
            ],
          },
          format: {
            title: {
              enabled: true,
              text: "Orders by Day of the Week",
            },
          },
        },
      },
      widgetLayout: {
        "orders-by-day": { xTrack: 0, yTrack: 0, xSpan: 24, ySpan: 24 },
      },
      selection: { type: "widget", id: "orders-by-day" },
    },
  ],
  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/polar-charts/polar-tooltip/typescript/)

## Format

Polar 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 |
| --- | --- | --- | --- |
| Legend | Elements | Off | Shows the legend. **Position** places it around the chart, at the bottom by default. |
| Data Labels | Elements | Off | Shows each value on the chart. **Font** and **Color** change the label text. |
| Segment Borders | Elements | Off | Radial Column, Nightingale and Radial Bar Charts only. Draws a border around each bar and sector. **Width** and **Color** change the border. |

Segment Borders separate neighbouring sectors, which helps when they share a colour. The border is 1 pixel wide and matches the page's Widget background colour until you change it.

The example below shows each setting turned on in its own chart, over the same data. Data Labels are on a Radar Line and a Radial Bar Chart, Segment Borders are on each of the three charts that offer them, and the legend is moved to the right on a Radar Area Chart. The Radial Bar Chart with Segment Borders plots In Store only.

#### 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: {
        "radar-line-data-labels": {
          type: "radar-line-chart",
          dataMapping: {
            categoryKey: [{ id: "orders.day" }],
            valueKey: [
              { id: "orders.in_store", aggregation: "sum" },
              { id: "orders.online", aggregation: "sum" },
            ],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Radar Line: Data Labels",
            },
            subtitle: {
              enabled: true,
              text: "Elements > Data Labels on",
            },
            style: {
              theme: {
                "radar-line": {
                  series: {
                    label: {
                      enabled: true,
                    },
                  },
                },
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        "radial-bar-data-labels": {
          type: "radial-bar-chart",
          dataMapping: {
            categoryKey: [{ id: "orders.day" }],
            valueKey: [
              { id: "orders.in_store", aggregation: "sum" },
              { id: "orders.online", aggregation: "sum" },
            ],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Radial Bar: Data Labels",
            },
            subtitle: {
              enabled: true,
              text: "Elements > Data Labels on",
            },
            style: {
              theme: {
                "radial-bar": {
                  series: {
                    label: {
                      enabled: true,
                    },
                  },
                },
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        "radial-column-segment-borders": {
          type: "radial-column-chart",
          dataMapping: {
            categoryKey: [{ id: "orders.day" }],
            valueKey: [
              { id: "orders.in_store", aggregation: "sum" },
              { id: "orders.online", aggregation: "sum" },
            ],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Radial Column: Segment Borders",
            },
            subtitle: {
              enabled: true,
              text: "Elements > Segment Borders on, Width 2",
            },
            style: {
              custom: {
                seriesStroke: {
                  enabled: true,
                  strokeWidth: 2,
                },
              },
              theme: {
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        "nightingale-segment-borders": {
          type: "nightingale-chart",
          dataMapping: {
            categoryKey: [{ id: "orders.day" }],
            valueKey: [
              { id: "orders.in_store", aggregation: "sum" },
              { id: "orders.online", aggregation: "sum" },
            ],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Nightingale: Segment Borders",
            },
            subtitle: {
              enabled: true,
              text: "Elements > Segment Borders on, Width 2",
            },
            style: {
              custom: {
                seriesStroke: {
                  enabled: true,
                  strokeWidth: 2,
                },
              },
              theme: {
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        "radial-bar-segment-borders": {
          type: "radial-bar-chart",
          dataMapping: {
            categoryKey: [{ id: "orders.day" }],
            valueKey: [{ id: "orders.in_store", aggregation: "sum" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Radial Bar: Segment Borders",
            },
            subtitle: {
              enabled: true,
              text: "Elements > Segment Borders on, Width 2",
            },
            style: {
              custom: {
                seriesStroke: {
                  enabled: true,
                  strokeWidth: 2,
                },
              },
              theme: {
                common: {
                  legend: {
                    enabled: true,
                  },
                },
              },
            },
          },
        },
        "radar-area-legend-position": {
          type: "radar-area-chart",
          dataMapping: {
            categoryKey: [{ id: "orders.day" }],
            valueKey: [
              { id: "orders.in_store", aggregation: "sum" },
              { id: "orders.online", aggregation: "sum" },
            ],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Radar Area: Legend Position",
            },
            subtitle: {
              enabled: true,
              text: "Elements > Legend > Position Right",
            },
            style: {
              theme: {
                common: {
                  legend: {
                    enabled: true,
                    position: "right",
                  },
                },
              },
            },
          },
        },
      },
      widgetLayout: {
        "radar-line-data-labels": {
          xTrack: 0,
          yTrack: 0,
          xSpan: 12,
          ySpan: 22,
        },
        "radial-bar-data-labels": {
          xTrack: 12,
          yTrack: 0,
          xSpan: 12,
          ySpan: 22,
        },
        "radial-column-segment-borders": {
          xTrack: 0,
          yTrack: 22,
          xSpan: 12,
          ySpan: 22,
        },
        "nightingale-segment-borders": {
          xTrack: 12,
          yTrack: 22,
          xSpan: 12,
          ySpan: 22,
        },
        "radial-bar-segment-borders": {
          xTrack: 0,
          yTrack: 44,
          xSpan: 12,
          ySpan: 22,
        },
        "radar-area-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/polar-charts/polar-format/typescript/)