{"id":10480,"library":"ag-charts-community","title":"AG Charts Community Edition","description":"AG Charts is a high-performance, canvas-based JavaScript charting library designed for enterprise applications, offering a comprehensive suite of chart types including line, bar, area, scatter, pie, and many more. It's built without external third-party dependencies for its core functionality, emphasizing performance and customization. The library supports modern web development with full TypeScript types and dedicated framework wrappers for React, Angular, and Vue. Currently, the stable version is 13.2.1, with a rapid release cadence that includes frequent patch and minor updates, and periodic major version releases introducing significant enhancements and breaking changes. Key differentiators include its superior rendering performance, deep customization capabilities via a flexible options API, and a robust feature set suitable for complex data visualizations.","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-community","lang":"bash","label":"npm"},{"cmd":"yarn add ag-charts-community","lang":"bash","label":"yarn"},{"cmd":"pnpm add ag-charts-community","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The primary API surface is exposed as a namespace `agCharts` containing the `AgCharts` object. Attempting to destructure `AgCharts` directly is incorrect.","wrong":"import { AgCharts } from 'ag-charts-community';","symbol":"AgCharts","correct":"import * as agCharts from 'ag-charts-community';"},{"note":"Type definitions like `AgChartOptions` should be imported using `import type` for clarity and better tree-shaking, especially in TypeScript projects.","wrong":"import { AgChartOptions } from 'ag-charts-community';","symbol":"AgChartOptions","correct":"import type { AgChartOptions } from 'ag-charts-community';"},{"note":"`create` is a static method on the `AgCharts` object, not a top-level named export. It is used to initialize a new chart instance.","wrong":"import { create } from 'ag-charts-community';","symbol":"create","correct":"import { AgCharts } from 'ag-charts-community'; AgCharts.create({...});"}],"quickstart":{"code":"import * as agCharts from 'ag-charts-community';\n\nconst options: agCharts.AgChartOptions = {\n    container: document.getElementById('myChart'),\n    data: [\n        { month: 'Jan', avgTemp: 2, rainfall: 40 },\n        { month: 'Feb', avgTemp: 2.3, rainfall: 45 },\n        { month: 'Mar', avgTemp: 4.8, rainfall: 50 },\n        { month: 'Apr', avgTemp: 7.6, rainfall: 55 },\n        { month: 'May', avgTemp: 10.7, rainfall: 60 },\n        { month: 'Jun', avgTemp: 13.9, rainfall: 65 },\n        { month: 'Jul', avgTemp: 16.2, rainfall: 70 },\n        { month: 'Aug', avgTemp: 15.9, rainfall: 75 },\n        { month: 'Sep', avgTemp: 13.3, rainfall: 80 },\n        { month: 'Oct', avgTemp: 9.3, rainfall: 70 },\n        { month: 'Nov', avgTemp: 5.7, rainfall: 60 },\n        { month: 'Dec', avgTemp: 3.1, rainfall: 50 }\n    ],\n    series: [\n        {\n            type: 'line',\n            xKey: 'month',\n            yKey: 'avgTemp',\n            yName: 'Avg Temperature (°C)'\n        },\n        {\n            type: 'bar',\n            xKey: 'month',\n            yKey: 'rainfall',\n            yName: 'Rainfall (mm)'\n        }\n    ],\n    axes: [\n        {\n            type: 'category',\n            position: 'bottom',\n            title: { text: 'Month' }\n        },\n        {\n            type: 'number',\n            position: 'left',\n            keys: ['avgTemp'],\n            title: { text: 'Temperature (°C)' }\n        },\n        {\n            type: 'number',\n            position: 'right',\n            keys: ['rainfall'],\n            title: { text: 'Rainfall (mm)' },\n            grid: { enabled: false }\n        }\n    ],\n    title: {\n        text: 'Monthly Weather Data'\n    },\n    subtitle: {\n        text: 'London, 2023'\n    }\n};\n\n// Ensure a container element exists for the chart\nif (!document.getElementById('myChart')) {\n    const chartDiv = document.createElement('div');\n    chartDiv.id = 'myChart';\n    chartDiv.style.height = '400px';\n    chartDiv.style.width = '600px';\n    document.body.appendChild(chartDiv);\n}\n\nagCharts.AgCharts.create(options);","lang":"typescript","description":"This quickstart initializes a combined line and bar chart displaying monthly weather data (temperature and rainfall) using `ag-charts-community`. It demonstrates basic chart configuration with data, series, axes, and titles, and dynamically creates a DOM container if one doesn't exist."},"warnings":[{"fix":"Review your chart configuration options against the v13 documentation and update paths/names accordingly. For example, `series[].marker` options might have been moved.","message":"Many chart options have been renamed or moved within the options structure. Refer to the official migration guide for a complete list of changes.","severity":"breaking","affected_versions":">=13.0.0"},{"fix":"If you need to change the fundamental chart configuration, you must recreate the chart instance using `AgCharts.create`. For data and property updates, use `AgCharts.update` with a new options object that maintains the original structure.","message":"The chart's initial configuration can no longer be updated via `AgCharts.update`. This function is now strictly for updating data or specific mutable properties, not for re-configuring the entire chart definition.","severity":"breaking","affected_versions":">=13.0.0"},{"fix":"Remove the `highlight-data-points` option from your chart configurations. Explore alternative interaction options available in v13, or implement custom highlighting logic if necessary.","message":"The `highlight-data-points` chart interaction option has been removed, changing how data points are visually emphasized on hover or selection.","severity":"breaking","affected_versions":">=13.0.0"},{"fix":"Ensure that your `agCharts.miniMap.navigator` configuration explicitly includes both `label` and `value` properties to avoid runtime errors.","message":"For the mini-map navigator, the `label` and `value` fields within `agCharts.miniMap.navigator` are now mandatory fields.","severity":"breaking","affected_versions":">=13.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure the container element exists in your HTML and is available in the DOM before calling `agCharts.AgCharts.create()`. For example, call it within a `DOMContentLoaded` event listener or a React `useEffect` hook.","cause":"The HTML element specified in `container` option either does not exist or has not been rendered to the DOM when `AgCharts.create` is called.","error":"Cannot read properties of null (reading 'appendChild')"},{"fix":"Double-check your chart options against the official AG Charts documentation for your specific version. Pay close attention to property casing and structure, especially after major version upgrades (e.g., to v13).","cause":"You are using an unrecognized or misspelled chart configuration property, or a property that has been removed/renamed in a newer version.","error":"TS2345: Argument of type '{...}' is not assignable to parameter of type 'AgChartOptions'. Object literal may only specify known properties, and 'unknownProperty' does not exist in type 'AgChartOptions'."},{"fix":"Ensure you are using `import * as agCharts from 'ag-charts-community';` and then calling `agCharts.AgCharts.create(...)`. Avoid `import { AgCharts } from 'ag-charts-community';` as it is not the correct export pattern for the main API object.","cause":"The `AgCharts` object is not correctly imported or is undefined, often due to incorrect CommonJS `require` or ES module `import` syntax.","error":"TypeError: Cannot read properties of undefined (reading 'create')"}],"ecosystem":"npm"}