{"id":15506,"library":"ag-charts-core","title":"AG Charts Core Library","description":"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.","status":"active","version":"13.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/ag-grid/ag-charts","tags":["javascript","chart","charts","data","angular","angular-component","react","react-component","reactjs","typescript"],"install":[{"cmd":"npm install ag-charts-core","lang":"bash","label":"npm"},{"cmd":"yarn add ag-charts-core","lang":"bash","label":"yarn"},{"cmd":"pnpm add ag-charts-core","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Primarily designed for ESM environments; CommonJS `require` is not recommended due to module structure and TypeScript support.","wrong":"const AgCharts = require('ag-charts-core');","symbol":"AgCharts","correct":"import { AgCharts } from 'ag-charts-core';"},{"note":"Essential TypeScript interface for defining chart configurations. Strongly recommended for type safety.","symbol":"AgChartOptions","correct":"import { AgChartOptions } from 'ag-charts-core';"},{"note":"Used for advanced custom theming of charts to maintain consistent styling across applications.","symbol":"AgChartTheme","correct":"import { AgChartTheme } from 'ag-charts-core';"}],"quickstart":{"code":"import { AgCharts } from 'ag-charts-core';\n\ninterface DataItem {\n  year: number;\n  spending: number;\n  profit: number;\n}\n\nconst data: DataItem[] = [\n  { year: 2020, spending: 1200, profit: 800 },\n  { year: 2021, spending: 1500, profit: 950 },\n  { year: 2022, spending: 1300, profit: 850 },\n  { year: 2023, spending: 1700, profit: 1100 }\n];\n\nfunction createPerformanceChart() {\n  const chartOptions = {\n    container: document.getElementById('myChart') as HTMLElement,\n    data: data,\n    title: {\n      text: 'Annual Company Performance',\n    },\n    subtitle: {\n      text: 'Spending vs. Profit Analysis',\n    },\n    series: [\n      {\n        type: 'column',\n        xKey: 'year',\n        yKey: 'spending',\n        yName: 'Spending',\n        fill: '#5BC0DE',\n        stroke: '#428BCA'\n      },\n      {\n        type: 'line',\n        xKey: 'year',\n        yKey: 'profit',\n        yName: 'Profit',\n        stroke: '#F0AD4E',\n        marker: {\n          enabled: true,\n          fill: '#F0AD4E'\n        }\n      }\n    ],\n    axes: [\n      {\n        type: 'category',\n        position: 'bottom',\n        title: {\n          text: 'Year'\n        }\n      },\n      {\n        type: 'number',\n        position: 'left',\n        title: {\n          text: 'Amount ($)'\n        }\n      }\n    ]\n  };\n\n  AgCharts.create(chartOptions);\n}\n\n// Simulate DOMContentLoaded for demonstration purposes in a non-browser environment.\n// In a browser, ensure this runs after the DOM is fully loaded.\nif (typeof document !== 'undefined') {\n  document.addEventListener('DOMContentLoaded', () => {\n    let container = document.getElementById('myChart');\n    if (!container) {\n      container = document.createElement('div');\n      container.id = 'myChart';\n      container.style.width = '700px';\n      container.style.height = '400px';\n      document.body.appendChild(container);\n    }\n    createPerformanceChart();\n  });\n}","lang":"typescript","description":"Initializes and renders a simple column and line chart displaying annual company spending and profit data using `AgCharts.create`."},"warnings":[{"fix":"Refactor calls from `AgCharts.create(myContainer, myOptions)` to `AgCharts.create({ container: myContainer, ...myOptions })`.","message":"The `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.","severity":"breaking","affected_versions":">=13.0.0"},{"fix":"Remove `fillOpacity` and `strokeOpacity` properties. Adjust `fill` and `stroke` color values to include alpha transparency, e.g., `'rgba(255, 0, 0, 0.5)'`.","message":"Properties `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.","severity":"breaking","affected_versions":">=13.0.0"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"Many 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.","severity":"breaking","affected_versions":">=13.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Verify that `document.getElementById('your-container-id')` returns a valid HTML element. Ensure the DOM is fully loaded before chart initialization.","cause":"The `container` element provided in the chart options does not exist or is `null` when `AgCharts.create` is called.","error":"TypeError: Cannot read properties of null (reading 'appendChild')"},{"fix":"Update `AgCharts.create` calls to use the single options object format: `AgCharts.create({ container: myContainerElement, data: myData, ...otherOptions })`.","cause":"Attempting to use the legacy two-argument signature for `AgCharts.create` after upgrading to version 13.0.0 or later.","error":"AgCharts.create(container, options) is no longer supported. Please use AgCharts.create({ container, ...options })."},{"fix":"Remove `fillOpacity` and `strokeOpacity`. Integrate opacity into the `fill` and `stroke` color values, e.g., `'rgba(255,0,0,0.5)'` or `'#FF000080'`.","cause":"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.","error":"Property 'fillOpacity' does not exist on type 'AgLineSeriesOptions'."}],"ecosystem":"npm"}