---
product: "AG Grid"
title: "Application Created Charts"
description: "This section introduces Integrated Charts that are created programmatically within an application."
enterprise: true
framework: javascript
version: "36.2.0"
related:
    - title: "Overview"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/integrated-charts/"
    - title: "Install Integrated Charts"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/integrated-charts-installation/"
    - title: "User Created Charts"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/integrated-charts-user-created/"
    - title: "Chart Types"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/integrated-charts-chart-types/"
    - title: "Chart Menu"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/integrated-charts-menu/"
    - title: "Chart Tool Panels"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/integrated-charts-chart-tool-panels/"
    - title: "Chart Container"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/integrated-charts-container/"
    - title: "Customisation"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/integrated-charts-customisation/"
    - title: "Chart Events"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/integrated-charts-events/"
    - title: "Time Series"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/integrated-charts-time-series/"
    - title: "Save / Restore Charts"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/integrated-charts-api-save-restore-charts/"
    - title: "Chart Image Export"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/integrated-charts-api-downloading-image/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Application Created Charts

This section introduces Integrated Charts that are created programmatically within an application.

#### Application Created Charts

```ts
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellStyleModule,
  ChartToolbarMenuItemOptions,
  ChartType,
  ClientSideRowModelApiModule,
  ClientSideRowModelModule,
  ColDef,
  ColumnApiModule,
  GetRowIdParams,
  GridApi,
  GridOptions,
  HighlightChangesModule,
  ModuleRegistry,
  NumberEditorModule,
  NumberFilterModule,
  TextEditorModule,
  TextFilterModule,
  ValueFormatterParams,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { IntegratedChartsModule, RowGroupingModule } from "ag-grid-enterprise";

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

ModuleRegistry.registerModules([
  ColumnApiModule,
  ClientSideRowModelApiModule,
  TextEditorModule,
  TextFilterModule,
  NumberEditorModule,
  CellStyleModule,
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  RowGroupingModule,
  HighlightChangesModule,
  NumberFilterModule,
]);

declare let __basePath: string;

// Types
interface WorkerMessage {
  type: string;
  records?: any[];
}

// Global variables
let chartRef: any;
let gridApi: GridApi;
let worker: Worker;

// Column Definitions
function getColumnDefs(): ColDef[] {
  return [
    { field: "product", chartDataType: "category", minWidth: 110 },
    { field: "book", chartDataType: "category", minWidth: 100 },
    { field: "current", type: "measure" },
    { field: "previous", type: "measure" },
    { headerName: "PL 1", field: "pl1", type: "measure" },
    { headerName: "PL 2", field: "pl2", type: "measure" },
    { headerName: "Gain-DX", field: "gainDx", type: "measure" },
    { headerName: "SX / PX", field: "sxPx", type: "measure" },

    { field: "trade", type: "measure" },
    { field: "submitterID", type: "measure" },
    { field: "submitterDealID", type: "measure" },

    { field: "portfolio" },
    { field: "dealType" },
    { headerName: "Bid", field: "bidFlag" },
  ];
}

// Grid Options
const gridOptions: GridOptions = {
  columnDefs: getColumnDefs(),
  defaultColDef: {
    editable: true,
    flex: 1,
    minWidth: 140,
    filter: true,
  },
  columnTypes: {
    measure: {
      chartDataType: "series",
      cellClass: "number",
      valueFormatter: numberCellFormatter,
      cellRenderer: "agAnimateShowChangeCellRenderer",
    },
  },
  enableCharts: true,
  suppressAggFuncInHeader: true,
  getRowId: (params: GetRowIdParams) => String(params.data.trade),
  getChartToolbarItems: (): ChartToolbarMenuItemOptions[] => [],
  onFirstDataRendered,
};

// Initial Chart Creation
function onFirstDataRendered(params: any) {
  chartRef = params.api.createRangeChart({
    chartContainer: document.querySelector("#myChart") as any,
    cellRange: {
      columns: [
        "product",
        "current",
        "previous",
        "pl1",
        "pl2",
        "gainDx",
        "sxPx",
      ],
    },
    suppressChartRanges: true,
    chartType: "groupedColumn",
    aggFunc: "sum",
    chartThemeOverrides: {
      common: {
        animation: {
          enabled: false,
        },
      },
    },
  });
}

function updateChart(chartType: ChartType) {
  gridApi!.updateChart({
    type: "rangeChartUpdate",
    chartId: chartRef.chartId,
    chartType,
  });
}

function numberCellFormatter(params: ValueFormatterParams) {
  return Math.floor(params.value)
    .toString()
    .replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
}

function startWorker(): void {
  worker = new Worker(`${__basePath || "."}/dataUpdateWorker.js`);
  worker.addEventListener("message", handleWorkerMessage);
  worker.postMessage("start");
}

function handleWorkerMessage(e: any): void {
  if (e.data.type === "setRowData") {
    gridApi!.setGridOption("rowData", e.data.records);
  }
  if (e.data.type === "updateData") {
    gridApi!.applyTransactionAsync({ update: e.data.records });
  }
}

// create the grid, then start streaming updates from the web worker
const eGridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(eGridDiv, gridOptions);

startWorker();

// Worker Commands
function onStartLoad(): void {
  worker.postMessage("start");
}

function onStopMessages(): void {
  worker.postMessage("stop");
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).updateChart = updateChart;
  (<any>window).onStartLoad = onStartLoad;
  (<any>window).onStopMessages = onStopMessages;
}
```

[Live example: Application Created Charts](https://www.ag-grid.com/archive/36.2.0/examples/integrated-charts-application-created/application-created-charts/typescript/)

The dummy financial application above shows some of the grid's integrated charting capabilities. Note the following:

- **Pre-Defined Chart**: A pre-defined chart is shown in a separate chart container below the grid.
- **Dynamic Charts**: Buttons positioned above the grid dynamically create different chart types.
- **High Performance**: 100 rows are randomly updated 10 times a second (1,000 updates per second). Try updating the example via Plunker with higher update frequencies and more data.

> **Note**
>
> Charts created through the Grid API do not require the `enableCharts` grid option. That option governs the user-initiated path only — whether the grid offers users the `chartRange` and `pivotChart` [Context Menu](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/context-menu/) items by default.

To learn how to create charts in your applications see the following sections for details:

- [Range Chart API](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/integrated-charts-api-range-chart/) - create Range Charts using the Grid API
- [Pivot Chart API](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/integrated-charts-api-pivot-chart/) - create Pivot Charts using the Grid API
- [Cross Filter Chart API](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/integrated-charts-api-cross-filter-chart/) - create cross-filter charts where element clicks auto-filter grid and charts