Skip to main content

​
Installation Methods

amCharts 5 can be installed via npm, yarn, pnpm, or included directly from a CDN.
1

Install the package

Choose your preferred package manager to install amCharts 5:
npm install @amcharts/amcharts5
The core package includes all chart types except maps and stock charts, which are available as separate modules.
2

Install additional modules (optional)

Install additional modules for specific chart types:
npm install @amcharts/amcharts5-geodata
Required for map charts and geographical visualizations.
3

Import into your project

Import amCharts 5 modules in your JavaScript or TypeScript files:
import * as am5 from "@amcharts/amcharts5";
Import only the modules you need to keep your bundle size small.

​
CDN Installation

For quick prototyping or simple projects, you can include amCharts 5 directly from a CDN: 
<!DOCTYPE html>
<html>
<head>
  <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>
</head>
<body>
  <div id="chartdiv" style="width: 100%; height: 500px;"></div>
  
  <script>
    // Create root
    const root = am5.Root.new("chartdiv");
    
    // Set themes
    root.setThemes([
      am5themes_Animated.new(root)
    ]);
    
    // Create chart
    const chart = root.container.children.push(
      am5xy.XYChart.new(root, {})
    );
  </script>
</body>
</html>
CDN links are best for prototyping. For production applications, use npm/yarn installation for better performance and version control.

​
TypeScript Configuration

amCharts 5 is written in TypeScript and includes full type definitions out of the box.
1

TypeScript is ready to use

No additional configuration needed! Type definitions are included with the package.
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";

// Full type inference and autocomplete
const root = am5.Root.new("chartdiv");
const chart = root.container.children.push(
  am5xy.XYChart.new(root, {
    panX: false,
    panY: false
  })
);
2

Configure your tsconfig.json

Ensure your TypeScript configuration allows module resolution:
tsconfig.json
{
  "compilerOptions": {
    "target": "ES2015",
    "module": "ES2015",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}
3

Use type-safe configurations

Leverage TypeScript interfaces for type-safe chart configuration:
import { IXYChartSettings } from "@amcharts/amcharts5/xy";

const chartSettings: IXYChartSettings = {
  panX: false,
  panY: false,
  wheelX: "panX",
  wheelY: "zoomX",
  layout: root.verticalLayout
};

const chart = am5xy.XYChart.new(root, chartSettings);
amCharts 5 requires TypeScript 4.3 or higher for full type support.

​
Import Path Reference

Here are the most common import paths you’ll use: 
// Core classes and utilities
import * as am5 from "@amcharts/amcharts5";

// Root, Theme, Color, Legend, Tooltip, etc.
const root = am5.Root.new("chartdiv");
const color = am5.color(0x3cabff);
const percent = am5.percent(50);

​
Next Steps

Now that you have amCharts 5 installed, you’re ready to create your first chart:

Quick Start

Create your first chart in minutes

Core Concepts

Learn about Root, Sprites, and Containers

XY Charts

Build line, column, and area charts

API Reference

Explore the complete API documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us