Registry / web-framework / ag-charts-core

ag-charts-core

library13.2.1jsnpmunverified

ag-charts-core is a high-performance, fully-featured, and highly customizable canvas-based charting library for JavaScript and TypeScript applications. It provides advanced charting capabilities with a strong focus on performance, delivering smooth interactions and rendering. A key differentiator is its "no third-party dependencies" philosophy, making it a lightweight and self-contained solution compared to many alternatives. The library is currently at version 13.2.1 and maintains an active release cadence with frequent patch and minor updates, and significant API changes occurring with major versions, such as 13.0.0. It serves as the foundational charting engine for the broader AG Charts ecosystem, offering direct integrations and comprehensive examples for popular frameworks including React, Angular, and Vue.

web-framework data

npm install ag-charts-core

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · AG-CHARTS-CORE

ag-charts-core

web-frameworkjavascriptv13.2.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

AgCharts

✓ import { AgCharts } from 'ag-charts-core';

✗ const AgCharts = require('ag-charts-core');

Primarily designed for ESM environments; CommonJS `require` is not recommended due to module structure and TypeScript support.

AgChartOptions

✓ import { AgChartOptions } from 'ag-charts-core';

Essential TypeScript interface for defining chart configurations. Strongly recommended for type safety.

AgChartTheme

✓ import { AgChartTheme } from 'ag-charts-core';

Used for advanced custom theming of charts to maintain consistent styling across applications.

Initializes and renders a simple column and line chart displaying annual company spending and profit data using `AgCharts.create`.

import { AgCharts } from 'ag-charts-core'; interface DataItem { year: number; spending: number; profit: number; } const data: DataItem[] = [ { year: 2020, spending: 1200, profit: 800 }, { year: 2021, spending: 1500, profit: 950 }, { year: 2022, spending: 1300, profit: 850 }, { year: 2023, spending: 1700, profit: 1100 } ]; function createPerformanceChart() { const chartOptions = { container: document.getElementById('myChart') as HTMLElement, data: data, title: { text: 'Annual Company Performance', }, subtitle: { text: 'Spending vs. Profit Analysis', }, series: [ { type: 'column', xKey: 'year', yKey: 'spending', yName: 'Spending', fill: '#5BC0DE', stroke: '#428BCA' }, { type: 'line', xKey: 'year', yKey: 'profit', yName: 'Profit', stroke: '#F0AD4E', marker: { enabled: true, fill: '#F0AD4E' } } ], axes: [ { type: 'category', position: 'bottom', title: { text: 'Year' } }, { type: 'number', position: 'left', title: { text: 'Amount ($)' } } ] }; AgCharts.create(chartOptions); } // Simulate DOMContentLoaded for demonstration purposes in a non-browser environment. // In a browser, ensure this runs after the DOM is fully loaded. if (typeof document !== 'undefined') { document.addEventListener('DOMContentLoaded', () => { let container = document.getElementById('myChart'); if (!container) { container = document.createElement('div'); container.id = 'myChart'; container.style.width = '700px'; container.style.height = '400px'; document.body.appendChild(container); } createPerformanceChart(); }); }

Debug

Known issues

breakingThe `AgCharts.create` function signature changed in v13.0.0. It now expects a single options object containing all configuration, including the `container` element, instead of `(container, options)` as two separate arguments.

fix

Refactor calls from `AgCharts.create(myContainer, myOptions)` to `AgCharts.create({ container: myContainer, ...myOptions })`.

affects: >=13.0.0

breakingProperties `series.fillOpacity` and `series.strokeOpacity` were deprecated in v13.0.0. Opacity should now be set directly within the `fill` or `stroke` color strings (e.g., `'#ff000080'`) or by using an `rgba()` function.

fix

Remove `fillOpacity` and `strokeOpacity` properties. Adjust `fill` and `stroke` color values to include alpha transparency, e.g., `'rgba(255, 0, 0, 0.5)'`.

affects: >=13.0.0

gotchaThe `container` element passed to `AgCharts.create` (within the options object) must be a valid HTML element that exists in the DOM when the chart is created. If the element is not found or is `null`, chart rendering will fail silently or throw an error.

fix

Ensure the chart container element is present in the DOM before calling `AgCharts.create`. Use `document.getElementById()` or similar methods after `DOMContentLoaded` or a React/Angular lifecycle hook.

affects: >=1.0.0

breakingMany internal chart properties and their structures were refactored in v13.0.0. Relying on direct access to internal, undocumented properties may lead to breaking changes during minor or patch updates.

fix

Adhere strictly to the documented API for chart configuration and interaction. Avoid accessing private or internal properties unless explicitly advised by AG Charts documentation.

affects: >=13.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of null (reading 'appendChild')

The `container` element provided in the chart options does not exist or is `null` when `AgCharts.create` is called.

fix

Verify that `document.getElementById('your-container-id')` returns a valid HTML element. Ensure the DOM is fully loaded before chart initialization.

AgCharts.create(container, options) is no longer supported. Please use AgCharts.create({ container, ...options }).

Attempting to use the legacy two-argument signature for `AgCharts.create` after upgrading to version 13.0.0 or later.

fix

Update `AgCharts.create` calls to use the single options object format: `AgCharts.create({ container: myContainerElement, data: myData, ...otherOptions })`.

Property 'fillOpacity' does not exist on type 'AgLineSeriesOptions'.

Using deprecated `fillOpacity` or `strokeOpacity` properties directly on series options after upgrading to v13.0.0+. These properties were removed in favor of setting opacity directly in the color string.

fix

Remove `fillOpacity` and `strokeOpacity`. Integrate opacity into the `fill` and `stroke` color values, e.g., `'rgba(255,0,0,0.5)'` or `'#FF000080'`.

Upgrade

Version history

13.2.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

55 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/ag-grid/ag-charts ↗

packagehttps://www.npmjs.com/package/ag-charts-core ↗

homepagehttps://agcharts.com ↗