---
title: "Chart Types"
enterprise: true
framework: angular
version: "36.1.0"
---

# Chart Types

This section provides an overview of the chart types available in Integrated Charts.

## Column / Bar

#### Column / Bar

```ts
import { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartRef,
  ChartToolPanelsDef,
  ChartType,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="wrapper">
    <div class="button-container">
      <button (click)="updateChart('groupedColumn')">Grouped Column</button>
      <button (click)="updateChart('stackedColumn')">Stacked Column</button>
      <button (click)="updateChart('normalizedColumn')">
        Normalized Column
      </button>
      <button (click)="updateChart('groupedBar')">Grouped Bar</button>
      <button (click)="updateChart('stackedBar')">Stacked Bar</button>
      <button (click)="updateChart('normalizedBar')">Normalized Bar</button>
    </div>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [popupParent]="popupParent"
      [cellSelection]="true"
      [enableCharts]="true"
      [chartToolPanelsDef]="chartToolPanelsDef"
      [rowData]="rowData"
      (firstDataRendered)="onFirstDataRendered($event)"
      (gridReady)="onGridReady($event)"
    />
    <div id="myChart"></div>
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi;

  columnDefs: ColDef[] = [
    {
      field: "period",
      chartDataType: "category",
      headerName: "Financial Period",
      width: 150,
    },
    {
      field: "recurring",
      chartDataType: "series",
      headerName: "Recurring revenue",
    },
    {
      field: "individual",
      chartDataType: "series",
      headerName: "Individual sales",
    },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  popupParent: HTMLElement | null = document.body;
  chartToolPanelsDef: ChartToolPanelsDef = {
    defaultToolPanel: "settings",
  };
  rowData!: any[];

  onFirstDataRendered(params: FirstDataRenderedEvent) {
    chartRef = params.api.createRangeChart({
      chartContainer: document.querySelector("#myChart") as any,
      cellRange: {
        columns: ["period", "recurring", "individual"],
      },
      chartType: "groupedColumn",
    })!;
  }

  updateChart(chartType: ChartType) {
    this.gridApi.updateChart({
      type: "rangeChartUpdate",
      chartId: `${chartRef.chartId}`,
      chartType: chartType,
    });
  }

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;

    getData().then((rowData) => params.api.setGridOption("rowData", rowData));
  }
}

let chartRef: ChartRef;
```

[Live example: Column / Bar](https://www.ag-grid.com/examples/integrated-charts-chart-types/column-bar/angular/)

**More Details**:

- [Bar Series](https://www.ag-grid.com/charts/javascript/bar-series/)

## Pie / Donut

#### Pie / Donut

```ts
import { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartRef,
  ChartToolPanelsDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="wrapper">
    <div class="button-container">
      <button (click)="updateChart('pie')">Pie</button>
      <button (click)="updateChart('donut')">Donut</button>
    </div>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [popupParent]="popupParent"
      [cellSelection]="true"
      [enableCharts]="true"
      [chartToolPanelsDef]="chartToolPanelsDef"
      [rowData]="rowData"
      (firstDataRendered)="onFirstDataRendered($event)"
      (gridReady)="onGridReady($event)"
    />
    <div id="myChart"></div>
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi;

  columnDefs: ColDef[] = [
    {
      field: "period",
      chartDataType: "category",
      headerName: "Financial Period",
      width: 150,
    },
    {
      field: "recurring",
      chartDataType: "series",
      headerName: "Recurring revenue",
    },
    {
      field: "individual",
      chartDataType: "series",
      headerName: "Individual sales",
    },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  popupParent: HTMLElement | null = document.body;
  chartToolPanelsDef: ChartToolPanelsDef = {
    defaultToolPanel: "settings",
  };
  rowData!: any[];

  onFirstDataRendered(params: FirstDataRenderedEvent) {
    const chartType = "pie";
    chartRef = params.api.createRangeChart({
      chartContainer: document.querySelector("#myChart") as any,
      chartType,
      cellRange: {
        rowStartIndex: 0,
        rowEndIndex: 3,
        columns: chartConfig[chartType].chartColumns,
      },
    })!;
  }

  updateChart(chartType: "pie" | "donut") {
    this.gridApi.updateChart({
      type: "rangeChartUpdate",
      chartId: `${chartRef.chartId}`,
      chartType,
      cellRange: {
        rowStartIndex: 0,
        rowEndIndex: 3,
        columns: chartConfig[chartType].chartColumns,
      },
    });
  }

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;

    getData().then((rowData) => params.api.setGridOption("rowData", rowData));
  }
}

let chartRef: ChartRef;
const chartConfig: Record<
  "pie" | "donut",
  {
    chartColumns: string[];
  }
> = {
  pie: {
    chartColumns: ["period", "individual"],
  },
  donut: {
    chartColumns: ["period", "recurring", "individual"],
  },
};
```

[Live example: Pie / Donut](https://www.ag-grid.com/examples/integrated-charts-chart-types/pie-donut/angular/)

**More Details:**

- [Pie Series](https://www.ag-grid.com/charts/javascript/pie-series/)
- [Donut Series](https://www.ag-grid.com/charts/javascript/donut-series/)

## Line / Area

#### Line / Area

```ts
import { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartRef,
  ChartToolPanelsDef,
  ChartType,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="wrapper">
    <div class="button-container">
      <button (click)="updateChart('line')">Line</button>
      <button (click)="updateChart('stackedLine')">Stacked Line</button>
      <button (click)="updateChart('normalizedLine')">Normalized Line</button>
      <button (click)="updateChart('area')">Grouped Area</button>
      <button (click)="updateChart('stackedArea')">Stacked Area</button>
      <button (click)="updateChart('normalizedArea')">Normalized Area</button>
    </div>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [popupParent]="popupParent"
      [cellSelection]="true"
      [enableCharts]="true"
      [chartToolPanelsDef]="chartToolPanelsDef"
      [rowData]="rowData"
      (firstDataRendered)="onFirstDataRendered($event)"
      (gridReady)="onGridReady($event)"
    />
    <div id="myChart"></div>
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi;

  columnDefs: ColDef[] = [
    {
      field: "period",
      chartDataType: "category",
      headerName: "Financial Period",
      width: 150,
    },
    {
      field: "recurring",
      chartDataType: "series",
      headerName: "Recurring revenue",
    },
    {
      field: "individual",
      chartDataType: "series",
      headerName: "Individual sales",
    },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  popupParent: HTMLElement | null = document.body;
  chartToolPanelsDef: ChartToolPanelsDef = {
    defaultToolPanel: "settings",
  };
  rowData!: any[];

  onFirstDataRendered(params: FirstDataRenderedEvent) {
    chartRef = params.api.createRangeChart({
      chartContainer: document.querySelector("#myChart") as any,
      cellRange: {
        columns: ["period", "recurring", "individual"],
      },
      chartType: "line",
    })!;
  }

  updateChart(chartType: ChartType) {
    this.gridApi.updateChart({
      type: "rangeChartUpdate",
      chartId: `${chartRef.chartId}`,
      chartType: chartType,
    });
  }

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;

    getData().then((rowData) => params.api.setGridOption("rowData", rowData));
  }
}

let chartRef: ChartRef;
```

[Live example: Line / Area](https://www.ag-grid.com/examples/integrated-charts-chart-types/line-area/angular/)

**More Details:**

- [Line Series](https://www.ag-grid.com/charts/javascript/line-series/)
- [Area Series](https://www.ag-grid.com/charts/javascript/area-series/)

## Scatter / Bubble

#### Scatter / Bubble

```ts
import { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartRef,
  ChartToolPanelsDef,
  ChartType,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="wrapper">
    <div class="button-container">
      <button (click)="updateChart('scatter')">Scatter</button>
      <button (click)="updateChart('bubble')">Bubble</button>
    </div>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [popupParent]="popupParent"
      [cellSelection]="true"
      [enableCharts]="true"
      [chartToolPanelsDef]="chartToolPanelsDef"
      [rowData]="rowData"
      (firstDataRendered)="onFirstDataRendered($event)"
      (gridReady)="onGridReady($event)"
    />
    <div id="myChart"></div>
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi;

  columnDefs: ColDef[] = [
    { field: "division", width: 150, chartDataType: "category" },
    { field: "resource", width: 150, chartDataType: "category" },
    { field: "revenue", chartDataType: "series" },
    { field: "expenses", chartDataType: "series" },
    { field: "headcount", chartDataType: "series" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  popupParent: HTMLElement | null = document.body;
  chartToolPanelsDef: ChartToolPanelsDef = {
    defaultToolPanel: "settings",
  };
  rowData!: any[];

  onFirstDataRendered(params: FirstDataRenderedEvent) {
    chartRef = params.api.createRangeChart({
      chartContainer: document.querySelector("#myChart") as any,
      cellRange: {
        columns: ["resource", "revenue", "expenses", "headcount"],
      },
      chartType: "scatter",
    })!;
  }

  updateChart(chartType: ChartType) {
    this.gridApi.updateChart({
      type: "rangeChartUpdate",
      chartId: `${chartRef.chartId}`,
      chartType: chartType,
    });
  }

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;

    getData().then((rowData) => params.api.setGridOption("rowData", rowData));
  }
}

let chartRef: ChartRef;
```

[Live example: Scatter / Bubble](https://www.ag-grid.com/examples/integrated-charts-chart-types/scatter-bubble/angular/)

**More Details:**

- [Scatter Series](https://www.ag-grid.com/charts/javascript/scatter-series/)
- [Bubble Series](https://www.ag-grid.com/charts/javascript/bubble-series/)

## Polar

#### Polar

```ts
import { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartRef,
  ChartToolPanelsDef,
  ChartType,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="wrapper">
    <div class="button-container">
      <button (click)="updateChart('radarLine')">Radar Line</button>
      <button (click)="updateChart('radarArea')">Radar Area</button>
      <button (click)="updateChart('nightingale')">Nightingale</button>
      <button (click)="updateChart('radialColumn')">Radial Column</button>
      <button (click)="updateChart('radialBar')">Radial Bar</button>
    </div>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [popupParent]="popupParent"
      [cellSelection]="true"
      [enableCharts]="true"
      [chartToolPanelsDef]="chartToolPanelsDef"
      [rowData]="rowData"
      (firstDataRendered)="onFirstDataRendered($event)"
      (gridReady)="onGridReady($event)"
    />
    <div id="myChart"></div>
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi;

  columnDefs: ColDef[] = [
    { field: "division", chartDataType: "category", width: 150 },
    {
      field: "recurring",
      chartDataType: "series",
      headerName: "Recurring revenue",
    },
    {
      field: "individual",
      chartDataType: "series",
      headerName: "Individual sales",
    },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  popupParent: HTMLElement | null = document.body;
  chartToolPanelsDef: ChartToolPanelsDef = {
    defaultToolPanel: "settings",
  };
  rowData!: any[];

  onFirstDataRendered(params: FirstDataRenderedEvent) {
    chartRef = params.api.createRangeChart({
      chartContainer: document.querySelector("#myChart") as any,
      cellRange: {
        columns: ["division", "recurring", "individual"],
      },
      chartType: "radarLine",
    })!;
  }

  updateChart(chartType: ChartType) {
    this.gridApi.updateChart({
      type: "rangeChartUpdate",
      chartId: `${chartRef.chartId}`,
      chartType: chartType,
    });
  }

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;

    getData().then((rowData) => params.api.setGridOption("rowData", rowData));
  }
}

let chartRef: ChartRef;
```

[Live example: Polar](https://www.ag-grid.com/examples/integrated-charts-chart-types/polar/angular/)

**More Details:**

- [Radar Line Series](https://www.ag-grid.com/charts/javascript/radar-line-series/)
- [Radar Area Series](https://www.ag-grid.com/charts/javascript/radar-area-series/)
- [Nightingale Series](https://www.ag-grid.com/charts/javascript/nightingale-series/)
- [Radial Column Series](https://www.ag-grid.com/charts/javascript/radial-column-series/)
- [Radial Bar Series](https://www.ag-grid.com/charts/javascript/radial-bar-series/)

## Statistical

#### Statistical

```ts
import { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartRef,
  ChartToolPanelsDef,
  ChartType,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="wrapper">
    <div class="button-container">
      <button (click)="updateChart('boxPlot')">Box Plot</button>
      <button (click)="updateChart('histogram')">Histogram</button>
      <button (click)="updateChart('rangeBar')">Range Bar</button>
      <button (click)="updateChart('rangeArea')">Range Area</button>
    </div>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [popupParent]="popupParent"
      [cellSelection]="true"
      [enableCharts]="true"
      [chartToolPanelsDef]="chartToolPanelsDef"
      [rowData]="rowData"
      (firstDataRendered)="onFirstDataRendered($event)"
      (gridReady)="onGridReady($event)"
    />
    <div id="myChart"></div>
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi;

  columnDefs: ColDef[] = [
    {
      field: "period",
      chartDataType: "category",
      headerName: "Financial Period",
      width: 150,
    },
    { field: "client", chartDataType: "category", headerName: "Client name" },
    {
      field: "recurring",
      chartDataType: "series",
      headerName: "Recurring revenue",
    },
    {
      field: "individual",
      chartDataType: "series",
      headerName: "Individual sales",
    },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  popupParent: HTMLElement | null = document.body;
  chartToolPanelsDef: ChartToolPanelsDef = {
    defaultToolPanel: "settings",
  };
  rowData!: any[];

  onFirstDataRendered(params: FirstDataRenderedEvent) {
    chartRef = params.api.createRangeChart({
      chartContainer: document.querySelector("#myChart") as any,
      cellRange: {
        columns: ["period", "client", "recurring", "individual"],
      },
      chartType: "boxPlot",
    })!;
  }

  updateChart(chartType: ChartType) {
    this.gridApi.updateChart({
      type: "rangeChartUpdate",
      chartId: `${chartRef.chartId}`,
      chartType: chartType,
    });
  }

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;

    getData().then((rowData) => params.api.setGridOption("rowData", rowData));
  }
}

let chartRef: ChartRef;
```

[Live example: Statistical](https://www.ag-grid.com/examples/integrated-charts-chart-types/statistical/angular/)

**More Details:**

- [Histogram Series](https://www.ag-grid.com/charts/javascript/histogram-series/)
- [Range Bar Series](https://www.ag-grid.com/charts/javascript/range-bar-series/)
- [Range Area Series](https://www.ag-grid.com/charts/javascript/range-area-series/)
- [Box Plot Series](https://www.ag-grid.com/charts/javascript/box-plot-series/)

## Hierarchical

#### Hierarchical

```ts
import { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartRef,
  ChartToolPanelsDef,
  ChartType,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="wrapper">
    <div class="button-container">
      <button (click)="updateChart('treemap')">Treemap</button>
      <button (click)="updateChart('sunburst')">Sunburst</button>
    </div>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [popupParent]="popupParent"
      [cellSelection]="true"
      [enableCharts]="true"
      [chartToolPanelsDef]="chartToolPanelsDef"
      [rowData]="rowData"
      (firstDataRendered)="onFirstDataRendered($event)"
      (gridReady)="onGridReady($event)"
    />
    <div id="myChart"></div>
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi;

  columnDefs: ColDef[] = [
    { field: "division", width: 150, chartDataType: "category" },
    { field: "resource", width: 150, chartDataType: "category" },
    { field: "revenue", chartDataType: "series" },
    { field: "expenses", chartDataType: "series" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  popupParent: HTMLElement | null = document.body;
  chartToolPanelsDef: ChartToolPanelsDef = {
    defaultToolPanel: "settings",
  };
  rowData!: any[];

  onFirstDataRendered(params: FirstDataRenderedEvent) {
    chartRef = params.api.createRangeChart({
      chartContainer: document.querySelector("#myChart") as any,
      cellRange: {
        columns: ["division", "resource", "revenue", "expenses"],
      },
      chartType: "treemap",
    })!;
  }

  updateChart(chartType: ChartType) {
    this.gridApi.updateChart({
      type: "rangeChartUpdate",
      chartId: `${chartRef.chartId}`,
      chartType: chartType,
    });
  }

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;

    getData().then((rowData) => params.api.setGridOption("rowData", rowData));
  }
}

let chartRef: ChartRef;
```

[Live example: Hierarchical](https://www.ag-grid.com/examples/integrated-charts-chart-types/hierarchical/angular/)

**More Details:**

- [Treemap Series](https://www.ag-grid.com/charts/javascript/treemap-series/)
- [Sunburst Series](https://www.ag-grid.com/charts/javascript/sunburst-series/)

## Specialized

#### Specialized

```ts
import { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartRef,
  ChartToolPanelsDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="wrapper">
    <div class="button-container">
      <button (click)="updateChart('heatmap')">Heatmap</button>
      <button (click)="updateChart('waterfall')">Waterfall</button>
    </div>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [popupParent]="popupParent"
      [cellSelection]="true"
      [enableCharts]="true"
      [chartToolPanelsDef]="chartToolPanelsDef"
      [rowData]="rowData"
      (firstDataRendered)="onFirstDataRendered($event)"
      (gridReady)="onGridReady($event)"
    />
    <div id="myChart"></div>
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi;

  columnDefs: ColDef[] = heatmapColDefs;
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  popupParent: HTMLElement | null = document.body;
  chartToolPanelsDef: ChartToolPanelsDef = {
    defaultToolPanel: "settings",
  };
  rowData!: any[];

  onFirstDataRendered(params: FirstDataRenderedEvent) {
    chartRef = params.api.createRangeChart({
      chartContainer: document.querySelector("#myChart") as any,
      chartType: "heatmap",
      cellRange: {
        columns: heatmapColIds,
      },
    })!;
  }

  updateChart(chartType: "heatmap" | "waterfall") {
    getData(chartType).then((rowData) => {
      this.gridApi.updateGridOptions({
        columnDefs: chartType === "heatmap" ? heatmapColDefs : waterfallColDefs,
        rowData,
      });
      setTimeout(() => {
        this.gridApi.updateChart({
          type: "rangeChartUpdate",
          chartId: chartRef.chartId,
          chartType,
          cellRange: {
            columns: chartType === "heatmap" ? heatmapColIds : waterfallColIds,
          },
        });
      });
    });
  }

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;

    getData("heatmap").then((rowData) =>
      params.api.setGridOption("rowData", rowData),
    );
  }
}

let chartRef: ChartRef;
const heatmapColIds: string[] = [
  "year",
  "jan",
  "feb",
  "mar",
  "apr",
  "may",
  "jun",
  "jul",
  "aug",
  "sep",
  "oct",
  "nov",
  "dec",
];
const heatmapColDefs: ColDef[] = [
  { field: "year", width: 150, chartDataType: "category" },
  { field: "jan" },
  { field: "feb" },
  { field: "mar" },
  { field: "apr" },
  { field: "may" },
  { field: "jun" },
  { field: "jul" },
  { field: "aug" },
  { field: "sep" },
  { field: "oct" },
  { field: "nov" },
  { field: "dec" },
];
const waterfallColIds: string[] = ["financials", "amount"];
const waterfallColDefs: ColDef[] = [
  { field: "financials", width: 150, chartDataType: "category" },
  { field: "amount", chartDataType: "series" },
];
```

[Live example: Specialized](https://www.ag-grid.com/examples/integrated-charts-chart-types/specialized/angular/)

**More Details:**

- [Heatmap Series](https://www.ag-grid.com/charts/javascript/heatmap-series/)
- [Waterfall Series](https://www.ag-grid.com/charts/javascript/waterfall-series/)

## Funnel

#### Funnel

```ts
import { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartRef,
  ChartToolPanelsDef,
  ChartType,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="wrapper">
    <div class="button-container">
      <button (click)="updateChart('funnel')">Funnel</button>
      <button (click)="updateChart('coneFunnel')">Cone Funnel</button>
      <button (click)="updateChart('pyramid')">Pyramid</button>
    </div>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [popupParent]="popupParent"
      [cellSelection]="true"
      [enableCharts]="true"
      [chartToolPanelsDef]="chartToolPanelsDef"
      [rowData]="rowData"
      (firstDataRendered)="onFirstDataRendered($event)"
      (gridReady)="onGridReady($event)"
    />
    <div id="myChart"></div>
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi;

  columnDefs: ColDef[] = [
    {
      field: "group",
      chartDataType: "category",
      headerName: "Group",
      width: 150,
    },
    { field: "count", chartDataType: "series", headerName: "Count" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  popupParent: HTMLElement | null = document.body;
  chartToolPanelsDef: ChartToolPanelsDef = {
    defaultToolPanel: "settings",
  };
  rowData!: any[];

  onFirstDataRendered(params: FirstDataRenderedEvent) {
    chartRef = params.api.createRangeChart({
      chartContainer: document.querySelector("#myChart") as any,
      cellRange: {
        columns: ["group", "count"],
      },
      chartType: "funnel",
    })!;
  }

  updateChart(chartType: ChartType) {
    this.gridApi.updateChart({
      type: "rangeChartUpdate",
      chartId: `${chartRef.chartId}`,
      chartType: chartType,
    });
  }

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;

    getData().then((rowData) => params.api.setGridOption("rowData", rowData));
  }
}

let chartRef: ChartRef;
```

[Live example: Funnel](https://www.ag-grid.com/examples/integrated-charts-chart-types/funnel/angular/)

**More Details:**

- [Funnel Series](https://www.ag-grid.com/charts/javascript/funnel-series/)
- [Cone Funnel Series](https://www.ag-grid.com/charts/javascript/cone-funnel-series/)
- [Pyramid Series](https://www.ag-grid.com/charts/javascript/pyramid-series/)

## Combination

#### Combination

```ts
import { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartRef,
  ChartToolPanelsDef,
  ChartType,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="wrapper">
    <div class="button-container">
      <button (click)="updateChart('columnLineCombo')">
        Column Line Combo
      </button>
      <button (click)="updateChart('areaColumnCombo')">
        Area Column Combo
      </button>
    </div>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [popupParent]="popupParent"
      [cellSelection]="true"
      [enableCharts]="true"
      [chartToolPanelsDef]="chartToolPanelsDef"
      [rowData]="rowData"
      (firstDataRendered)="onFirstDataRendered($event)"
      (gridReady)="onGridReady($event)"
    />
    <div id="myChart"></div>
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi;

  columnDefs: ColDef[] = [
    {
      field: "period",
      chartDataType: "category",
      headerName: "Financial Period",
      width: 150,
    },
    {
      field: "recurring",
      chartDataType: "series",
      headerName: "Recurring revenue",
    },
    {
      field: "individual",
      chartDataType: "series",
      headerName: "Individual sales",
    },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  popupParent: HTMLElement | null = document.body;
  chartToolPanelsDef: ChartToolPanelsDef = {
    defaultToolPanel: "settings",
  };
  rowData!: any[];

  onFirstDataRendered(params: FirstDataRenderedEvent) {
    chartRef = params.api.createRangeChart({
      chartContainer: document.querySelector("#myChart") as any,
      cellRange: {
        columns: ["period", "recurring", "individual"],
      },
      chartType: "columnLineCombo",
    })!;
  }

  updateChart(chartType: ChartType) {
    this.gridApi.updateChart({
      type: "rangeChartUpdate",
      chartId: `${chartRef.chartId}`,
      chartType: chartType,
    });
  }

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;

    getData().then((rowData) => params.api.setGridOption("rowData", rowData));
  }
}

let chartRef: ChartRef;
```

[Live example: Combination](https://www.ag-grid.com/examples/integrated-charts-chart-types/combo/angular/)

**More Details:**

- [Combination Charts](https://www.ag-grid.com/charts/javascript/combination-series/)