{"id":10483,"library":"ag-charts-types","title":"AG Charts TypeScript Types","description":"AG Charts is a high-performance, canvas-based charting library for JavaScript and TypeScript, offering extensive customizability and no third-party dependencies for its core functionality. It integrates seamlessly with popular frameworks like React, Angular, and Vue. The `ag-charts-types` package, currently at stable version 13.2.1, provides comprehensive TypeScript type definitions, enabling type-safe development for AG Charts applications. The library maintains a frequent release cadence, delivering continuous improvements and new features across minor and patch versions, with significant breaking changes typically reserved for major version bumps. Its key differentiators include exceptional rendering performance, a highly flexible API for detailed customization, and a robust feature set suitable for enterprise data visualization.","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-types","lang":"bash","label":"npm"},{"cmd":"yarn add ag-charts-types","lang":"bash","label":"yarn"},{"cmd":"pnpm add ag-charts-types","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This package provides TypeScript types for the core AG Charts library; the functionality is in ag-charts-community.","package":"ag-charts-community","optional":false}],"imports":[{"note":"AgCharts is typically imported as a namespace to access static methods like `create` and `update`.","wrong":"import { AgCharts } from 'ag-charts-community';","symbol":"AgCharts","correct":"import * as AgCharts from 'ag-charts-community';"},{"note":"While `ag-charts-types` provides the definitions, the actual type is re-exported from `ag-charts-community` for direct use. It is also available as a type-only import if preferred.","wrong":"import type { AgChartOptions } from 'ag-charts-types';","symbol":"AgChartOptions","correct":"import { AgChartOptions } from 'ag-charts-community';"},{"note":"Specific chart options like this are also re-exported from the main community package. Use this for type-checking Cartesian charts.","wrong":"import { AgCartesianChartOptions } from 'ag-charts-types';","symbol":"AgCartesianChartOptions","correct":"import { AgCartesianChartOptions } from 'ag-charts-community';"},{"note":"Specific series options are available as types for detailed configuration. Use 'import type' for clarity and better tree-shaking.","symbol":"AgLineSeriesOptions","correct":"import type { AgLineSeriesOptions } from 'ag-charts-community';"}],"quickstart":{"code":"import * as AgCharts from 'ag-charts-community';\nimport { AgChartOptions } from 'ag-charts-community';\n\nconst data = [\n  { year: '2020', sales: 1500, profit: 800 },\n  { year: '2021', sales: 1800, profit: 950 },\n  { year: '2022', sales: 2200, profit: 1100 },\n  { year: '2023', sales: 2500, profit: 1300 },\n];\n\nconst options: AgChartOptions = {\n  container: document.getElementById('myChart') ?? undefined,\n  data: data,\n  title: {\n    text: 'Sales and Profit by Year',\n  },\n  subtitle: {\n    text: 'Example using AG Charts',\n  },\n  series: [\n    {\n      type: 'line',\n      xKey: 'year',\n      yKey: 'sales',\n      yName: 'Sales',\n      stroke: '#007bff',\n      marker: {\n        enabled: true,\n      },\n    },\n    {\n      type: 'line',\n      xKey: 'year',\n      yKey: 'profit',\n      yName: 'Profit',\n      stroke: '#28a745',\n      marker: {\n        enabled: true,\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// Ensure the container exists in your HTML: <div id=\"myChart\" style=\"height: 400px; width: 600px;\"></div>\nAgCharts.create(options);\n","lang":"typescript","description":"This quickstart demonstrates how to create a basic line chart using AG Charts, displaying sales and profit data over several years with custom styling and axes configuration."},"warnings":[{"fix":"Ensure `container` is a `HTMLElement | undefined`. Review the v13 changelog for specific property renames and adapt your chart options accordingly, e.g., `container: document.getElementById('myChart') ?? undefined`.","message":"In AG Charts v13.0.0, the `container` option for `AgCharts.create` and `AgCharts.update` no longer accepts a string ID. You must provide an actual DOM element. Several styling properties were also renamed or moved (e.g., `axis.label.padding` to `axis.label.spacing`, `tooltip.position.xOffset` to `tooltip.position.x`).","severity":"breaking","affected_versions":">=13.0.0"},{"fix":"Replace `const chart = AgCharts.create(options);` with `AgCharts.create(options); const chart = AgCharts.getChart(options.container);`.","message":"AG Charts v12.0.0 changed `AgCharts.create` and `AgCharts.update` to return `void` instead of the chart instance. If you need a reference to the chart instance, use `AgCharts.getChart(element)`.","severity":"breaking","affected_versions":">=12.0.0 <13.0.0"},{"fix":"Update all series configurations using `type: 'bar'` to `type: 'column'`.","message":"The series type `bar` was renamed to `column` in AG Charts v12.0.0. Using `type: 'bar'` will no longer render a column chart.","severity":"breaking","affected_versions":">=12.0.0"},{"fix":"Always ensure your `data` array is an array of objects, and that the `xKey`, `yKey`, and other series-specific keys precisely match property names within your data objects. Utilize TypeScript types like `AgChartOptions` to catch data type mismatches at compile-time.","message":"AG Charts typically expects its data array to be an `Array<any>` or a more specific type. Incorrect data structures or missing keys can lead to charts not rendering or displaying unexpected behavior, often silently.","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":"Change `container: 'myChartId'` to `container: document.getElementById('myChartId') ?? undefined`.","cause":"Attempting to pass a string ID for the chart container, which is no longer supported in recent versions of AG Charts.","error":"Argument of type 'string' is not assignable to parameter of type 'HTMLElement | undefined'."},{"fix":"Change `import { AgCharts } from 'ag-charts-community';` to `import * as AgCharts from 'ag-charts-community';`.","cause":"Incorrect import of `AgCharts` as a named export instead of a namespace import.","error":"Property 'create' does not exist on type 'typeof import(\"ag-charts-community\")'. Did you mean 'AgCharts.create'?"},{"fix":"Update `type: 'bar'` to `type: 'column'` in your series options.","cause":"Using the deprecated `bar` series type after v12.0.0.","error":"Type '{ type: \"bar\"; xKey: string; yKey: string; }' is not assignable to type 'AgSeriesOptions'.\n  Types of property 'type' are incompatible.\n    Type '\"bar\"' is not assignable to type '\"line\" | \"area\" | \"column\" | ...'."}],"ecosystem":"npm"}