---
product: "AG Grid"
title: "Range Chart API"
description: "This section shows how Range Charts can be created via the Grid API."
enterprise: true
framework: vue
version: "36.2.0"
related:
    - title: "Pivot Chart API"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/integrated-charts-api-pivot-chart/"
    - title: "Cross Filter API"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/integrated-charts-api-cross-filter-chart/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Range Chart API

This section shows how Range Charts can be created via the Grid API.

## Creating Range Charts

Range Charts can be created through `gridApi.createRangeChart()` as shown below:

```ts
this.gridApi.createRangeChart({
    chartType: 'groupedColumn',
    cellRange: {
        rowStartIndex: 0,
        rowEndIndex: 4,
        columns: ['country', 'gold', 'silver'],
    },
    // other options...
});
```

The snippet above creates a Range Chart with the `groupedColumn` chart type using data from the first 4 and the `country`, `gold`, `silver` columns. For a full list of options see [Range Chart API](https://www.ag-grid.com/archive/36.2.0/vue-data-grid/integrated-charts-api-range-chart/#range-chart-api).

The following example demonstrates how Range Charts can be created programmatically via `gridApi.createRangeChart()`. Note the following:

- Clicking **'Top 5 Medal Winners'** will chart the first five rows of Gold and Silver medals by Country.
- Clicking **'Bronze Medals by Country'** will chart Bronze by Country using all rows (the provided cell range does not specify rows).
- Note the **'Bronze Medals by Country'** chart is unlinked from the grid as `unlinkChart=true`. Notice that sorting in the grid does not affect the chart and there is no chart range in the grid.

#### Charts in Grid Popup Window

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberEditorModule,
  NumberFilterModule,
  TextEditorModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";

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

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="outer-div">
      <div class="button-bar">
        <button v-on:click="onChart1()">Top 5 Medal Winners</button>
        <button v-on:click="onChart2()">Bronze Medals by Country</button>
      </div>
      <div class="grid-wrapper">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :columnDefs="columnDefs"
          :defaultColDef="defaultColDef"
          :cellSelection="true"
          :enableCharts="true"
          :popupParent="popupParent"
          :rowData="rowData"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", width: 150, chartDataType: "category" },
      { field: "gold", chartDataType: "series", sort: "desc" },
      { field: "silver", chartDataType: "series", sort: "desc" },
      { field: "bronze", chartDataType: "series" },
    ]);
    const defaultColDef = ref<ColDef>({
      editable: true,
      flex: 1,
      minWidth: 100,
      filter: true,
    });
    const popupParent = ref<HTMLElement | null>(document.body);
    const rowData = ref<any[]>(null);

    function onChart1() {
      gridApi.value.createRangeChart({
        cellRange: {
          rowStartIndex: 0,
          rowEndIndex: 4,
          columns: ["country", "gold", "silver"],
        },
        chartType: "groupedColumn",
        chartThemeOverrides: {
          common: {
            title: {
              enabled: true,
              text: "Top 5 Medal Winners",
            },
          },
        },
      });
    }
    function onChart2() {
      gridApi.value.createRangeChart({
        cellRange: {
          columns: ["country", "bronze"],
        },
        chartType: "groupedBar",
        chartThemeOverrides: {
          common: {
            title: {
              enabled: true,
              text: "Bronze Medal by Country",
            },
          },
        },
        unlinkChart: true,
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

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

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      popupParent,
      rowData,
      onGridReady,
      onChart1,
      onChart2,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Charts in Grid Popup Window](https://www.ag-grid.com/archive/36.2.0/examples/integrated-charts-api-range-chart/chart-api/vue3/)

## Range Chart Dashboard

The following example passes a [Chart Container](https://www.ag-grid.com/archive/36.2.0/vue-data-grid/integrated-charts-container/) to the API to place the chart in a location other than the grid's popup window. Note the following:

- The charts are placed in `div` elements outside the grid.
- The two pie charts are showing aggregations rather than charting individual rows.
- The bar chart is sensitive to changes in the rows. For example if you sort, the chart updates to always chart the first five rows.
- All data is editable in the grid. Changes to the grid data is reflected in the charts.
- The pie charts have legends on the right side. This is configured in the `chartThemeOverrides`.
- The chart menu has been [hidden](https://www.ag-grid.com/archive/36.2.0/vue-data-grid/integrated-charts-menu/#hiding-the-chart-menu) in the example below.

#### Charts in Dashboard

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartToolPanelsDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GetChartToolbarItems,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberEditorModule,
  NumberFilterModule,
  TextEditorModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";

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

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

function createGroupedBarChart(
  params: FirstDataRenderedEvent,
  selector: string,
  columns: string[],
) {
  params.api.createRangeChart({
    chartContainer: document.querySelector(selector) as HTMLElement,
    cellRange: {
      rowStartIndex: 0,
      rowEndIndex: 4,
      columns,
    },
    suppressChartRanges: true,
    chartType: "groupedBar",
  });
}

function createPieChart(
  params: FirstDataRenderedEvent,
  selector: string,
  columns: string[],
) {
  params.api.createRangeChart({
    chartContainer: document.querySelector(selector) as HTMLElement,
    cellRange: { columns },
    suppressChartRanges: true,
    chartType: "pie",
    aggFunc: "sum",
    chartThemeOverrides: {
      common: {
        padding: {
          top: 20,
          left: 10,
          bottom: 30,
          right: 10,
        },
        legend: {
          position: "right",
        },
      },
    },
  });
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div style="display: flex; flex-direction: column; height: 100%; width: 100%; overflow: hidden">
      <ag-grid-vue
        style="width: 100%; height: 30%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :cellSelection="true"
        :enableCharts="true"
        :chartToolPanelsDef="chartToolPanelsDef"
        :popupParent="popupParent"
        :getChartToolbarItems="getChartToolbarItems"
        :rowData="rowData"
        @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        <div id="chart1" class="my-chart" style="flex: 1 1 auto; height: 30%"></div>
        <div style="display: flex; flex: 1 1 auto; height: 30%; gap: 8px">
          <div id="chart2" class="my-chart" style="flex: 1 1 auto; width: 50%"></div>
          <div id="chart3" class="my-chart" style="flex: 1 1 auto; width: 50%"></div>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", width: 150, chartDataType: "category" },
      { field: "group", chartDataType: "category" },
      { field: "gold", chartDataType: "series" },
      { field: "silver", chartDataType: "series" },
      { field: "bronze", chartDataType: "series" },
    ]);
    const defaultColDef = ref<ColDef>({
      editable: true,
      flex: 1,
      minWidth: 100,
      filter: true,
    });
    const chartToolPanelsDef = ref<ChartToolPanelsDef>({ panels: [] });
    const popupParent = ref<HTMLElement | null>(document.body);
    const getChartToolbarItems = ref<GetChartToolbarItems>(() => []);
    const rowData = ref<any[]>(null);

    function onFirstDataRendered(event: FirstDataRenderedEvent) {
      createGroupedBarChart(event, "#chart1", ["country", "gold", "silver"]);
      createPieChart(event, "#chart2", ["group", "gold"]);
      createPieChart(event, "#chart3", ["group", "silver"]);
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

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

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      chartToolPanelsDef,
      popupParent,
      getChartToolbarItems,
      rowData,
      onGridReady,
      onFirstDataRendered,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Charts in Dashboard](https://www.ag-grid.com/archive/36.2.0/examples/integrated-charts-api-range-chart/dashboard/vue3/)

## Hiding Chart Ranges

In some cases it may be desirable to hide the chart ranges in the grid, see [Combination Charts](https://www.ag-grid.com/archive/36.2.0/vue-data-grid/integrated-charts-api-range-chart/#combination-charts).

To hide the chart ranges simply enable `suppressChartRanges=true` on the `ChartRangeParams`.

For more details refer to [Range Chart API](https://www.ag-grid.com/archive/36.2.0/vue-data-grid/integrated-charts-api-range-chart/#range-chart-api).

## Combination Charts

It is possible to create the following combination chart types via `gridApi.createRangeChart()`:

- Column & Line (`chartType: 'columnLineCombo'`)
- Area & Column (`chartType: 'areaColumnCombo'`)
- Custom Combination (`chartType: 'customCombo'`)

When the `customCombo` chart type is specified a new `CreateRangeChartParams.seriesChartTypes` must also be supplied. Also note that when `seriesChartTypes` is present a `customCombo` chart type is assumed, regardless of which `chartType` is supplied.

The `seriesChartTypes` property accepts an array of `SeriesChartType` objects as shown below:

```ts
this.gridApi.createRangeChart({
    chartType: 'customCombo',
    cellRange: {
      columns: ['month', 'rain', 'pressure', 'temp'],
    },
    seriesChartTypes: [
      { colId: 'rain', chartType: 'groupedColumn', secondaryAxis: false },
      { colId: 'pressure', chartType: 'line', secondaryAxis: true },
      { colId: 'temp', chartType: 'line', secondaryAxis: true }
    ],
    aggFunc: 'sum',
});
```

The following series chart types are supported with combination charts:

- Line (`chartType: 'line'`)
- Area (`chartType: 'Area'`)
- Stacked Area (`chartType: 'stackedArea'`)
- Grouped Column (`chartType: 'groupedColumn'`)
- Stacked Column (`chartType: 'stackedColumn'`)

Note that only `line` and `area` series chart types can be plotted against a secondary axis.

The following example demonstrates the above configuration, note the following:

- The 'Rain' series uses a `groupedColumn` chart type and is plotted against the primary Y axis (`secondaryAxis=false`)
- 'Pressure' and 'Temp' use a `line` chart type and are plotted against separate secondary Y axes (`secondaryAxis=true`)
- Values are aggregated by the 'Month' category by setting `aggFunc: 'sum'`
- Chart Ranges are hidden using `suppressChartRanges=true`

#### Combination Chart

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import { AgAxisCaptionFormatterParams } from "ag-charts-types";
import {
  AgChartThemeOverrides,
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberEditorModule,
  NumberFilterModule,
  TextEditorModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";

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

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="wrapper">
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :cellSelection="true"
        :enableCharts="true"
        :popupParent="popupParent"
        :chartThemeOverrides="chartThemeOverrides"
        :rowData="rowData"
        @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        <div id="myChart"></div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "day", maxWidth: 120 },
      {
        field: "month",
        chartDataType: "category",
        filterParams: {
          comparator: (a: string, b: string) => {
            const months: {
              [key: string]: number;
            } = {
              jan: 1,
              feb: 2,
              mar: 3,
              apr: 4,
              may: 5,
              jun: 6,
              jul: 7,
              aug: 8,
              sep: 9,
              oct: 10,
              nov: 11,
              dec: 12,
            };
            const valA = months[a.toLowerCase()];
            const valB = months[b.toLowerCase()];
            if (valA === valB) return 0;
            return valA > valB ? 1 : -1;
          },
        },
      },
      { field: "rain", chartDataType: "series" },
      { field: "pressure", chartDataType: "series" },
      { field: "temp", chartDataType: "series" },
      { field: "wind", chartDataType: "series" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
      editable: true,
      filter: true,
      floatingFilter: true,
    });
    const popupParent = ref<HTMLElement | null>(document.body);
    const chartThemeOverrides = ref<AgChartThemeOverrides>({
      common: {
        axes: {
          number: {
            title: {
              enabled: true,
              formatter: (params: AgAxisCaptionFormatterParams) => {
                return params.boundSeries.map((s) => s.name).join(" / ");
              },
            },
          },
        },
      },
      bar: {
        series: {
          strokeWidth: 2,
          fillOpacity: 0.8,
        },
      },
      line: {
        series: {
          strokeWidth: 5,
          strokeOpacity: 0.8,
          marker: {
            enabled: false,
          },
        },
      },
    });
    const rowData = ref<any[]>(null);

    function onFirstDataRendered(params: FirstDataRenderedEvent) {
      params.api.createRangeChart({
        chartType: "customCombo",
        cellRange: {
          columns: ["month", "rain", "pressure", "temp"],
        },
        seriesChartTypes: [
          { colId: "rain", chartType: "groupedColumn", secondaryAxis: false },
          { colId: "pressure", chartType: "line", secondaryAxis: true },
          { colId: "temp", chartType: "line", secondaryAxis: true },
        ],
        aggFunc: "sum",
        suppressChartRanges: true,
        chartContainer: document.querySelector("#myChart") as any,
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

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

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      popupParent,
      chartThemeOverrides,
      rowData,
      onGridReady,
      onFirstDataRendered,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Combination Chart](https://www.ag-grid.com/archive/36.2.0/examples/integrated-charts-api-range-chart/combination-chart/vue3/)

## Range Chart API

Range Charts can be created programmatically using:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `createRangeChart` | `Function` |  |  |  |

Properties available on the `CreateRangeChartParams` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `cellRange` | `ChartParamsCellRange` |  |  |  |
| `chartType` | `ChartType` |  |  |  |
| `suppressChartRanges` | `boolean` |  |  |  |
| `switchCategorySeries` | `boolean` |  |  |  |
| `aggFunc` | `string \| IAggFunc` |  |  |  |
| `seriesChartTypes` | `SeriesChartType[]` |  |  |  |
| `seriesGroupType` | `SeriesGroupType` |  |  |  |
| `useGroupColumnAsCategory` | `boolean` |  |  |  |
| `chartThemeName` | `string` |  |  |  |
| `chartContainer` | `HTMLElement` |  |  |  |
| `chartThemeOverrides` | `AgChartThemeOverrides` |  |  |  |
| `unlinkChart` | `boolean` |  |  |  |

The API returns a `ChartRef` object when a `chartContainer` is provided. This is the same structure that is provided to the `createChartContainer(chartRef)` callback. The `ChartRef` provides the application with the `destroyChart()` method that is required when the application wants to dispose the chart.