---
title: "Chart Events"
enterprise: true
framework: vue
version: "36.1.0"
---

# Chart Events

There are several events which are raised at different points in the lifecycle of a chart.

## ChartCreated

The `ChartCreated` event is raised whenever a chart is first created.

Properties available on the `ChartCreatedEvent<TData = any, TContext = any>` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `chartId` | `string` |  |  | Id of the created chart. This can later be used to reference the chart via api methods. |
| `api` | [`GridApi`](https://www.ag-grid.com/vue-data-grid/grid-api/) |  |  | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/vue-data-grid/typescript-generics/#context-tcontext) |  |  | Application context as set on `gridOptions.context`. |
| `type` | `TEventType` |  |  | Event identifier |

## ChartRangeSelectionChanged

This is raised any time that the data range used to render the chart from is changed, e.g. by using the range selection handle or by making changes in the Data tab of the configuration sidebar. This event contains a `cellRange` object that gives you information about the range, allowing you to recreate the chart.

Properties available on the `ChartRangeSelectionChangedEvent<TData = any, TContext = any>` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `chartId` | `string` |  |  | Id of the effected chart. |
| `id` | `string` |  |  | Same as `chartId`. |
| `cellRange` | `CellRangeParams` |  |  | New cellRange selected. |
| `api` | [`GridApi`](https://www.ag-grid.com/vue-data-grid/grid-api/) |  |  | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/vue-data-grid/typescript-generics/#context-tcontext) |  |  | Application context as set on `gridOptions.context`. |
| `type` | `TEventType` |  |  | Event identifier |

## ChartOptionsChanged

Any changes made in the panels will raise the `ChartOptionsChanged` event:

Properties available on the `ChartOptionsChangedEvent<TData = any, TContext = any>` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `chartId` | `string` |  |  | Id of the effected chart. |
| `chartType` | `ChartType` |  |  | ChartType |
| `chartThemeName` | `string` |  |  | Chart theme name of currently selected theme. |
| `chartOptions` | [`AgChartThemeOverrides`](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides) |  |  | Chart options. |
| `api` | [`GridApi`](https://www.ag-grid.com/vue-data-grid/grid-api/) |  |  | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/vue-data-grid/typescript-generics/#context-tcontext) |  |  | Application context as set on `gridOptions.context`. |
| `type` | `TEventType` |  |  | Event identifier |

Here the `chartThemeName` will be set to the name of the currently selected theme, which will be either one of the [Provided Themes](https://www.ag-grid.com/vue-data-grid/integrated-charts-customisation/#provided-themes) or a [Custom Theme](https://www.ag-grid.com/vue-data-grid/integrated-charts-customisation/#custom-chart-themes) if used.

## ChartDestroyed

This is raised when a chart is destroyed.

Properties available on the `ChartDestroyed<TData = any, TContext = any>` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `chartId` | `string` |  |  | Id of the effected chart. |
| `api` | [`GridApi`](https://www.ag-grid.com/vue-data-grid/grid-api/) |  |  | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/vue-data-grid/typescript-generics/#context-tcontext) |  |  | Application context as set on `gridOptions.context`. |
| `type` | `TEventType` |  |  | Event identifier |

## Example: Chart Events

The following example demonstrates when the described events occur by writing to the console whenever they are triggered. Try the following:

- Create a chart from selection, for example, select a few cells in the "Month" and "Sunshine" columns and right-click to "Chart Range" as a "Line" chart. Notice that a "Created chart with ID id-xxxxxxxxxxxxx" message has been logged to the console.
- Shrink or expand the selection by a few cells to see the "Changed range selection of chart with ID id-xxxxxxxxxxxx" logged.
- Click the [Chart Tool Panels Button](https://www.ag-grid.com/vue-data-grid/integrated-charts-chart-tool-panels/) inside the chart dialog to show chart settings and switch to a column chart. Notice that a "Changed options of chart with ID id-xxxxxxxxxxxxx" message has been logged to the console.
- Close the chart dialog to see the "Destroyed chart with ID id-xxxxxxxxxxx" message logged.

#### Events

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartCreatedEvent,
  ChartDestroyedEvent,
  ChartOptionsChangedEvent,
  ChartRangeSelectionChangedEvent,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :cellSelection="true"
      :popupParent="popupParent"
      :enableCharts="true"
      :rowData="rowData"
      @chart-created="onChartCreated"
      @chart-range-selection-changed="onChartRangeSelectionChanged"
      @chart-options-changed="onChartOptionsChanged"
      @chart-destroyed="onChartDestroyed"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "Month", width: 150, chartDataType: "category" },
      { field: "Sunshine (hours)", chartDataType: "series" },
      { field: "Rainfall (mm)", chartDataType: "series" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
    });
    const popupParent = ref<HTMLElement | null>(document.body);
    const rowData = ref<any[]>(null);

    function onChartCreated(event: ChartCreatedEvent) {
      console.log("Created chart with ID " + event.chartId, event);
    }
    function onChartRangeSelectionChanged(
      event: ChartRangeSelectionChangedEvent,
    ) {
      console.log(
        "Changed range selection of chart with ID " + event.chartId,
        event,
      );
    }
    function onChartOptionsChanged(event: ChartOptionsChangedEvent) {
      console.log("Changed options of chart with ID " + event.chartId, event);
    }
    function onChartDestroyed(event: ChartDestroyedEvent) {
      console.log("Destroyed chart with ID " + event.chartId, event);
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/weather-se-england.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      popupParent,
      rowData,
      onGridReady,
      onChartCreated,
      onChartRangeSelectionChanged,
      onChartOptionsChanged,
      onChartDestroyed,
    };
  },
});

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

[Live example: Events](https://www.ag-grid.com/examples/integrated-charts-events/events/vue3)

## Event Driven Chart Updates

The following example updates the chart when `ChartRangeSelectionChanged` events are raised. Note that charts can be updated using the following Grid API method:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `updateChart` | `Function` |  |  | Used to programmatically update a chart. Module: [`IntegratedChartsModule`](https://www.ag-grid.com/vue-data-grid/modules/). |

Try changing the chart cell range in the grid and notice the subtitle is updated with chart range info.

#### Event Driven Chart Updates

```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 {
  AgChartThemeOverrides,
  CellSelectionOptions,
  ChartCreatedEvent,
  ChartOptionsChangedEvent,
  ChartRangeSelectionChangedEvent,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  CreateRangeChartParams,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

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

function updateTitle(api: GridApi, chartId: string) {
  const cellRange = api.getCellRanges()![1];
  if (!cellRange) return;
  const columnCount = cellRange.columns.length;
  const rowCount =
    cellRange.endRow!.rowIndex - cellRange.startRow!.rowIndex + 1;
  const subtitle = `Using series data from ${columnCount} column(s) and ${rowCount} row(s)`;
  api!.updateChart({
    type: "rangeChartUpdate",
    chartId: chartId,
    chartThemeOverrides: {
      common: {
        subtitle: { text: subtitle },
      },
    },
  });
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="wrapper">
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        class="my-grid"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :cellSelection="true"
        :popupParent="popupParent"
        :enableCharts="true"
        :chartThemeOverrides="chartThemeOverrides"
        :rowData="rowData"
        @first-data-rendered="onFirstDataRendered"
        @chart-created="onChartCreated"
        @chart-range-selection-changed="onChartRangeSelectionChanged"
        @chart-options-changed="onChartOptionsChanged"></ag-grid-vue>
        <div id="myChart" class="my-chart"></div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "Month", width: 150, chartDataType: "category" },
      { field: "Sunshine (hours)", chartDataType: "series" },
      { field: "Rainfall (mm)", chartDataType: "series" },
    ]);
    const defaultColDef = ref<ColDef>({ flex: 1 });
    const popupParent = ref<HTMLElement | null>(document.body);
    const chartThemeOverrides = ref<AgChartThemeOverrides>({
      common: {
        title: { enabled: true, text: "Monthly Weather" },
        subtitle: { enabled: true },
        legend: { enabled: true },
      },
    });
    const rowData = ref<any[]>(null);

    function onFirstDataRendered(params: FirstDataRenderedEvent) {
      const createRangeChartParams: CreateRangeChartParams = {
        cellRange: {
          rowStartIndex: 0,
          rowEndIndex: 3,
          columns: ["Month", "Sunshine (hours)"],
        },
        chartType: "stackedColumn",
        chartContainer: document.querySelector("#myChart") as any,
      };
      params.api.createRangeChart(createRangeChartParams);
    }
    function onChartCreated(event: ChartCreatedEvent) {
      console.log("Created chart with ID " + event.chartId);
      updateTitle(gridApi.value!, event.chartId);
    }
    function onChartRangeSelectionChanged(
      event: ChartRangeSelectionChangedEvent,
    ) {
      console.log("Changed range selection of chart with ID " + event.chartId);
      updateTitle(gridApi.value!, event.chartId);
    }
    function onChartOptionsChanged(event: ChartOptionsChangedEvent) {
      console.log("Changed options of chart with ID " + event.chartId);
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/weather-se-england.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

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

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

[Live example: Event Driven Chart Updates](https://www.ag-grid.com/examples/integrated-charts-events/event-driven-chart-updates/vue3)

## Standalone Chart Events

It is possible to subscribe to the [AG Charts Events](https://www.ag-grid.com/charts/react/events/) using the theme based configuration via the `chartThemeOverrides` grid option:

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

this.chartThemeOverrides = {
common: {
  legend: {
    listeners: {
      legendItemClick: (e) => console.log('legendItemClick', e)
    }
  },
  listeners: {
    seriesNodeClick: (e) => console.log('seriesNodeClick', e)
  }
}
;
```

> **Note**
>
> Note that the `chartThemeOverrides` grid option maps to [AG Charts Theme Overrides](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides).

The example below demonstrates Standalone Charts Events subscription:

- Click on the bars in the series and observe that the `seriesNodeClick` listener emits a console message.
- Click on a legend item and observe that the `legendItemClick` listener emits a console message.

#### Subscribing to Standalone Charts Events

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartLegendClickEvent, AgNodeClickEvent } from "ag-charts-community";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  AgChartThemeOverrides,
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  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%;"
        class="my-grid"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :cellSelection="true"
        :popupParent="popupParent"
        :enableCharts="true"
        :chartThemeOverrides="chartThemeOverrides"
        :rowData="rowData"
        @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        <div id="myChart" class="my-chart"></div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "Month", chartDataType: "category", width: 150 },
      { field: "Sunshine (hours)", chartDataType: "series" },
      { field: "Rainfall (mm)", chartDataType: "series" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
    });
    const popupParent = ref<HTMLElement | null>(document.body);
    const chartThemeOverrides = ref<AgChartThemeOverrides>({
      common: {
        legend: {
          listeners: {
            legendItemClick: (e: AgChartLegendClickEvent) =>
              console.log("legendItemClick", e),
          },
        },
        listeners: {
          seriesNodeClick: (e: AgNodeClickEvent<any, any>) =>
            console.log("seriesNodeClick", e),
        },
      },
    });
    const rowData = ref<any[]>(null);

    function onFirstDataRendered(params: FirstDataRenderedEvent) {
      params.api.createRangeChart({
        chartContainer: document.querySelector("#myChart") as HTMLElement,
        cellRange: { columns: ["Month", "Sunshine (hours)", "Rainfall (mm)"] },
        chartType: "groupedColumn",
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/weather-se-england.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

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

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

[Live example: Subscribing to Standalone Charts Events](https://www.ag-grid.com/examples/integrated-charts-events/standalone-events/vue3)