amCharts 5

JavaScript and TypeScript charts and maps for the web: line, column, area and candlestick charts, pies and funnels, geographic maps, stock charts, Gantt charts, treemaps and other hierarchies, Sankey and chord diagrams, radars and gauges, timelines, word clouds and Venn diagrams.

Each picture links to its example's code.

Demos | Documentation | Class reference | Changelog | Download

Install

With npm, for a project that uses a bundler:

npm install @amcharts/amcharts5

The type definitions come with it, and need TypeScript 5.0 or later.

With script tags, from the CDN or from the files in the zip download:

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

Maps need map files (geodata), which are a separate package: npm, GitHub, zip.

A first chart

The page needs an element with a height:

<div id="chartdiv" style="width: 100%; height: 500px;"></div>

import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

const root = am5.Root.new("chartdiv");

root.setThemes([
  am5themes_Animated.new(root)
]);

const chart = root.container.children.push(am5xy.XYChart.new(root, {}));

const xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
  categoryField: "country",
  renderer: am5xy.AxisRendererX.new(root, {})
}));

const yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererY.new(root, {})
}));

const series = chart.series.push(am5xy.ColumnSeries.new(root, {
  xAxis: xAxis,
  yAxis: yAxis,
  categoryXField: "country",
  valueYField: "visits"
}));

const data = [
  { country: "France", visits: 1114 },
  { country: "Germany", visits: 1322 },
  { country: "Spain", visits: 711 },
  { country: "Italy", visits: 984 }
];

xAxis.data.setAll(data);
series.data.setAll(data);

With script tags the code is the same without the three import lines: each file makes its module a global of the same name (am5, am5xy, am5themes_Animated).

React, Vue, Angular and Svelte

Each has a package. It creates the chart with the component and disposes it with it, works with server rendering (Next.js, Nuxt, SvelteKit, Angular SSR) because it loads the library in the browser only, and takes a chart written in code or a JSON config:

For React Native, @amcharts/amcharts5-react-native draws the chart in a WebView, from a JSON config (<AmChart config={config} />) or from chart code given as a string (<AmChart code={code} data={data} />).

Each package's README has a full example. Without a package, create the chart when the component is mounted and call root.dispose() when it is removed; there are guides for React, Angular, Vue, Next.js and others.

Chart types

Stock, Gantt, radar and timeline charts are built on XY charts: with script tags, load xy.js before them. Gantt also needs plugins/colorPicker.js.

Also in the library:

• Maps: globes and flat maps, satellite images with day and night, pixel maps, and map files for the world, continents, countries and their regions.
• Stock charts: over 30 indicators, drawing tools, comparing stocks and period selectors.
• Export: PNG, JPG, SVG, PDF, CSV, XLSX, JSON and HTML, and printing.
• 30 themes, among them dark, colorblind-friendly and responsive ones.
• Accessibility: keyboard navigation and screen reader support.

Examples

About 80 examples come with the library, one small chart each.

• In the zip download, open examples/index.html: a gallery where every example runs above its source.
• In the npm package they are sources: examples/<name>/index.ts, indexed in examples/README.md and examples/examples.json.
• More, and bigger ones, are in the demos on the website.

Charts from JSON, and SVG

A chart can be described as a JSON config and built with JsonParser, and a running chart can be saved as one. Most examples come with their config.

The <am5-chart> element builds a chart from a config with no chart code at all, which suits plain pages, frameworks and tools that only take HTML:

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/plugins/json.js"></script>
<script src="https://cdn.amcharts.com/lib/5/element.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

<am5-chart themes="Animated" style="height: 400px" src="chart.json"></am5-chart>

The config comes from src, from a config attribute, or from the config property. With script tags, load plugins/json.js before element.js, and the file of every chart type the config uses; with npm, import "@amcharts/amcharts5/element"; defines the element, the chart types load by themselves, and themes are given as classes: element.themes = [am5themes_Animated]. A theme with settings is a pair, [am5themes_Adaptive, { baseColor: "#4150a0" }] (in the attribute, JSON: themes='["Animated", ["Adaptive", { "baseColor": "#4150a0" }]]'). A config names its geodata and locale ("geoJSON": "am5geodata_worldLow"), which are globals with script tags; with npm, give them in resources: element.resources = { am5geodata_worldLow }. Once the chart is built, element.root and element.chart hold it; element.whenReady() returns a promise of it, and the element dispatches ready (or error).

Charts are drawn on canvas. To draw one as SVG instead, create its root with am5.Root.new("chartdiv", { renderer: am5.SVGRenderer }).

Using amCharts with AI coding agents

The library carries what an agent needs, so that it works from these files and not from what it remembers:

• AGENTS.md: the rules that are most often broken, and where to look.
• docs/: a reference for every chart type.
• examples/: working code to start from.

To make an agent use them, add this to your project's AGENTS.md or CLAUDE.md:

## amCharts 5

This project uses amCharts 5 (`@amcharts/amcharts5`). Its API is not the
amCharts 4 API, and it may be newer than what you remember.

Before writing chart code, read `node_modules/@amcharts/amcharts5/AGENTS.md`
and follow it.

With the script files, point it at the AGENTS.md in the amCharts folder instead.

amCharts also runs a hosted MCP server with the docs, the API reference, 290+ working examples and the map files, at https://mcp.amcharts.com/mcp. No account or key is needed:

• Claude: add amCharts 5 from the Connectors Directory.
• Claude Code: claude mcp add --transport http amcharts5 https://mcp.amcharts.com/mcp.
• Cursor, VS Code, Windsurf and other MCP clients: add the URL above, or run it locally with npx -y @amcharts/amcharts5-mcp.

There is also a skill for coding agents, amCharts 5 is on Context7, and there is more about amCharts and AI.

License

If you have a commercial amCharts 5 license, this software is covered by your license, which supersedes any other license bundled with this package.

If you don't have a commercial license, the use of this software is covered by a freeware license. See the included LICENSE file. The license is also available online.

In short: the free license allows use in any project, commercial ones included, as long as the amCharts logo stays on the charts and the LICENSE file stays with the files. It does not allow selling the library or distributing it on its own. The LICENSE file has the exact terms, and commercial licenses cover what it does not.

Support

Found a bug, or have a question? Open an issue on GitHub: the amCharts team monitors them.

Guaranteed support comes with the amPlus subscription. If you have a license or subscription, you can contact us directly. If you don't, here are a few more options.

Anything else: [email protected].

More

• amCharts 5 changelog, also in this package as CHANGELOG.md
• Documentation changelog
• Creating translations
• Source code on GitHub