{"id":10482,"library":"ag-charts-enterprise","title":"AG Charts Enterprise","description":"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.","status":"active","version":"13.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/ag-grid/ag-charts","tags":["javascript","chart","charts","graph","graphs","data","react","react-component","react-charts","typescript"],"install":[{"cmd":"npm install ag-charts-enterprise","lang":"bash","label":"npm"},{"cmd":"yarn add ag-charts-enterprise","lang":"bash","label":"yarn"},{"cmd":"pnpm add ag-charts-enterprise","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The library primarily uses named exports and is designed for ESM. Direct CommonJS `require` might lead to unexpected bundling issues or require specific transpilation.","wrong":"const AgCharts = require('ag-charts-enterprise');","symbol":"AgCharts","correct":"import * as AgCharts from 'ag-charts-enterprise';"},{"note":"Framework-specific wrappers (like for React, Angular, Vue) are typically imported from separate sub-packages. Ensure you install `ag-charts-react` for React integration.","wrong":"import AgChartsReact from 'ag-charts-react';","symbol":"AgChartsReact","correct":"import { AgChartsReact } from 'ag-charts-react';"},{"note":"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.","wrong":"import { AgChartOptions } from 'ag-charts-enterprise';","symbol":"AgChartOptions","correct":"import type { AgChartOptions } from 'ag-charts-enterprise';"}],"quickstart":{"code":"import * as AgCharts from 'ag-charts-enterprise';\n\ndocument.addEventListener('DOMContentLoaded', () => {\n  const data = [\n    { os: 'Windows', share: 75.9 },\n    { os: 'macOS', share: 15.8 },\n    { os: 'Linux', share: 2.1 },\n    { os: 'Other', share: 6.2 }\n  ];\n\n  const options = {\n    container: document.getElementById('myChart'),\n    data: data,\n    series: [{\n      type: 'pie',\n      angleKey: 'share',\n      legendItemKey: 'os',\n      sectorLabelKey: 'share',\n      sectorLabel: {\n        formatter: ({ datum, sectorLabelKey }) => `${datum[sectorLabelKey]}%`\n      }\n    }],\n    title: {\n      text: 'OS Market Share (2024)'\n    },\n    subtitle: {\n      text: 'Worldwide Desktop Operating Systems'\n    }\n  };\n\n  AgCharts.create(options);\n});\n\n// In your HTML: <div id=\"myChart\" style=\"height: 400px; width: 600px;\"></div>","lang":"typescript","description":"Demonstrates how to create a basic pie chart using the `AgCharts.create` method with a declarative options object, showing operating system market share."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=13.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The application is using the `ag-charts-enterprise` package, but a valid license key has not been provided or correctly set.","error":"AG Charts: no license key"},{"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.","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.","error":"Property 'create' does not exist on type 'typeof import(\"/node_modules/ag-charts-enterprise/dist/ag-charts-enterprise\")'. Did you mean 'AgCharts.create'?"},{"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.","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.","error":"Error: `container` is required for `create` method."}],"ecosystem":"npm"}