---
title: "User Created Charts"
enterprise: true
framework: vue
version: "36.1.0"
---

# User Created Charts

User created charts are designed to provide an out-of-the box charting experience, similar to that found in spreadsheet applications such as Excel, but fully integrated inside your applications.

Users can select a range of cells in the grid and create a chart from the context menu, as shown below:

![Chart Showcase](https://www.ag-grid.com/_astro/chart-showcase.Ctd-5_q9.gif)

Notice that Chart Ranges appear in the grid after a chart is created. These provide useful visual feedback for users by highlighting the charted category and series data in the grid.

Try it out on our [demo page](https://www.ag-grid.com/example/) by doing the following:

- Select a [Cell Range](https://www.ag-grid.com/vue-data-grid/cell-selection/) of numeric values in the grid by dragging the mouse over a range of cells.
- Bring up the [Context Menu](https://www.ag-grid.com/vue-data-grid/context-menu/) and select the desired chart type from the 'Chart Range' sub menu.

Note that developers can also programmatically create range charts, see [Application Created Charts](https://www.ag-grid.com/vue-data-grid/integrated-charts-application-created/).

## Enabling User Created Charts

All that is required for users to create charts, from the data already contained in the grid, is to enable the following grid option:

```ts
<ag-grid-vue
    :enableCharts="enableCharts"
    /* other grid options ... */>
</ag-grid-vue>

this.enableCharts = true;
```

To allow users to create charts from a [Cell Selection](https://www.ag-grid.com/vue-data-grid/cell-selection/) and / or display the [Chart Ranges](https://www.ag-grid.com/vue-data-grid/integrated-charts-range-chart/#creating-chart-ranges) in the grid, cell selection should also be enabled as follows:

```ts
<ag-grid-vue
    :enableCharts="enableCharts"
    :cellSelection="cellSelection"
    /* other grid options ... */>
</ag-grid-vue>

this.enableCharts = true;
this.cellSelection = true;
```

## User Created Charts

The video above highlights a number of charting features. For more details on each feature follow the links provided below:

[Chart Ranges](https://www.ag-grid.com/vue-data-grid/integrated-charts-range-chart/#creating-chart-ranges): When a chart is created, corresponding chart ranges appear in the grid and can be adjusted via the chart range handle.

[Categories and Series](https://www.ag-grid.com/vue-data-grid/integrated-charts-range-chart/#category-and-series-ranges): Columns can be configured as either categories or series for charting. If not configured then the grid will infer whether a column contains category or series data.

![Range Handle](https://www.ag-grid.com/_astro/category-range-fill-handle.Bfo_sgWF.png)

[Chart Menu](https://www.ag-grid.com/vue-data-grid/integrated-charts-menu/): The Chart Menu can be opened by a button located in the top-right corner of the chart. The Chart Menu allows a user to:

- Edit the chart via the Chart Tool Panels
- Change advanced settings such as interactivity
- Link/unlink the chart to the grid
- Download the chart

![Open Chart Menu](https://www.ag-grid.com/_astro/chart-menu.Bq6Vjs53.png)

[Chart Tool Panels](https://www.ag-grid.com/vue-data-grid/integrated-charts-chart-tool-panels/): The Chart Tool Panels can be opened via the Edit Chart option in the Chart Menu. The Chart Tool Panels allow a user to:

- Change the chart type
- Change the theme
- Change which columns are used as categories and series
- Format different aspects of the chart

![Open Chart Tool Panel](https://www.ag-grid.com/_astro/chart-panel.oxdHktUE.png)

By default, user created charts are displayed inside the grid's own popup windows. The windows can be moved (by mouse dragging a window's title bar) and resized (by mouse dragging a window's borders).

It is also possible to display user created charts in a location or application dialog. For more details see the section on [providing a chart container](https://www.ag-grid.com/vue-data-grid/integrated-charts-container/).

> **Note**
>
> If using the grid's own popup window, you will probably want to use the grid option `popupParent` so that the popup windows are not constrained to the bounds of the grid. Typically, users set `popupParent=document.body` to achieve this.