AG Charts Enterprise

Common errors

• 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.

• 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: `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 npm
• yarn add ag-charts-enterprise yarn
• pnpm add ag-charts-enterprise pnpm

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>