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.
npm install ag-charts-communityVerified import paths — ran on the pinned version, not inferred.
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.
Review your chart configuration options against the v13 documentation and update paths/names accordingly. For example, `series[].marker` options might have been moved.
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.
Remove the `highlight-data-points` option from your chart configurations. Explore alternative interaction options available in v13, or implement custom highlighting logic if necessary.
Ensure that your `agCharts.miniMap.navigator` configuration explicitly includes both `label` and `value` properties to avoid runtime errors.
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.
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).
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.No dependency data recorded yet.