AG Charts Enterprise

13.2.1 verified Sun Apr 19 auth: no javascript

AG Charts Enterprise is a high-performance, canvas-based charting library for advanced data visualization in JavaScript and TypeScript applications. Currently at version 13.2.1, the library maintains an active development pace with frequent minor and patch releases. It offers extensive customization capabilities and native component wrappers for popular frameworks like React, Angular, and Vue. A key differentiator is its commitment to zero third-party dependencies, which helps ensure a lean bundle size and minimizes potential conflicts. It is specifically designed for enterprise-grade applications requiring robust, fully-featured, and highly performant charting solutions for complex datasets and interactive dashboards.

Common errors

error AG Charts: no license key ↓

cause The application is using the `ag-charts-enterprise` package, but a valid license key has not been provided or correctly set.

fix

Ensure you have a valid AG Charts Enterprise license key. Implement LicenseManager.setLicenseKey('YOUR_LICENSE_KEY') at the root of your application before any chart components are rendered.

error Property 'create' does not exist on type 'typeof import("/node_modules/ag-charts-enterprise/dist/ag-charts-enterprise")'. Did you mean 'AgCharts.create'? ↓

cause When importing `ag-charts-enterprise` as `* as AgCharts`, TypeScript correctly infers that `create` is a static method on the `AgCharts` object, but users might mistakenly try to access it directly as if `AgCharts` was the function itself, or misunderstand the default vs. named export pattern.

fix

Ensure you are calling AgCharts.create() after importing the module as import * as AgCharts from 'ag-charts-enterprise';. If you only need create, you could technically import { create } from 'ag-charts-enterprise';, but * as AgCharts is the recommended pattern.

error Error: `container` is required for `create` method. ↓

cause The `container` property was not provided in the chart options object, or the specified DOM element does not exist when `AgCharts.create()` is called.

fix

Verify that your options object includes a container property set to a valid DOM element or an ID string (e.g., 'myChart'). Ensure the DOM element exists in the document before AgCharts.create() is invoked.

Warnings

breaking Version 13.0.0 introduced significant API changes, particularly a complete rework of the configuration API. Charts are now created and updated using a declarative JSON configuration object that mirrors the chart's structure, replacing many older imperative methods and property names. ↓

fix Review the official AG Charts v13 migration guide. All chart configurations should be updated to the new declarative JSON structure. Pay close attention to series types, axis configurations, and event handlers, as their properties and methods have likely changed.

gotcha AG Charts Enterprise requires a valid license key for commercial use. Running the enterprise version without a license will typically result in a watermark or other license-related notifications appearing on your charts. While it might function for development, deployment without a license is a violation of terms. ↓

fix Obtain a valid AG Charts Enterprise license key from ag-Grid. Register your license key in your application as per the official documentation, typically by calling `LicenseManager.setLicenseKey()` at application startup.

gotcha While AG Charts boasts high performance, rendering extremely large datasets (tens or hundreds of thousands of data points or more, especially with complex series types or many interactive features) can still impact browser performance and responsiveness. ↓

fix Implement data virtualization, aggregation, or sampling techniques for very large datasets. Consider server-side data processing and only send aggregated or filtered data to the client. Optimize chart configurations by disabling unnecessary animations or interactions for maximum performance.

gotcha AG Charts leverages a canvas-based rendering engine. While performant, this means that individual chart elements are not directly accessible via the DOM in the same way SVG or HTML-based charting libraries are. Accessibility (A11y) features are provided by the library but require explicit configuration. ↓

fix Thoroughly review the AG Charts accessibility documentation. Ensure `ariaLabel` properties are set for charts and individual series where appropriate. Implement keyboard navigation and screen reader support as guided by the library's A11y features.

Install

npm install ag-charts-enterprise

yarn add ag-charts-enterprise

pnpm add ag-charts-enterprise

Imports

AgCharts
wrong
```
const AgCharts = require('ag-charts-enterprise');
```
correct
```
import * as AgCharts from 'ag-charts-enterprise';
```
The library primarily uses named exports and is designed for ESM. Direct CommonJS `require` might lead to unexpected bundling issues or require specific transpilation.
AgChartsReact
wrong
```
import AgChartsReact from 'ag-charts-react';
```
correct
```
import { AgChartsReact } from 'ag-charts-react';
```
Framework-specific wrappers (like for React, Angular, Vue) are typically imported from separate sub-packages. Ensure you install `ag-charts-react` for React integration.
AgChartOptions
wrong
```
import { AgChartOptions } from 'ag-charts-enterprise';
```
correct
```
import type { AgChartOptions } from 'ag-charts-enterprise';
```
When importing only type definitions in TypeScript, use `import type` to ensure they are stripped from the compiled JavaScript output, preventing potential runtime errors or unnecessary imports.

Quickstart

Demonstrates how to create a basic pie chart using the `AgCharts.create` method with a declarative options object, showing operating system market share.

import * as AgCharts from 'ag-charts-enterprise';

document.addEventListener('DOMContentLoaded', () => {
  const data = [
    { os: 'Windows', share: 75.9 },
    { os: 'macOS', share: 15.8 },
    { os: 'Linux', share: 2.1 },
    { os: 'Other', share: 6.2 }
  ];

  const options = {
    container: document.getElementById('myChart'),
    data: data,
    series: [{
      type: 'pie',
      angleKey: 'share',
      legendItemKey: 'os',
      sectorLabelKey: 'share',
      sectorLabel: {
        formatter: ({ datum, sectorLabelKey }) => `${datum[sectorLabelKey]}%`
      }
    }],
    title: {
      text: 'OS Market Share (2024)'
    },
    subtitle: {
      text: 'Worldwide Desktop Operating Systems'
    }
  };

  AgCharts.create(options);
});

// In your HTML: <div id="myChart" style="height: 400px; width: 600px;"></div>