Quick Start

Create Your First Chart

This guide will walk you through creating a working line chart with amCharts 5. By the end, you’ll have a fully interactive chart with animations.

Set up your HTML

Create an HTML file with a container div for your chart:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My First amCharts 5 Chart</title>
  <style>
    body {
      margin: 0;
      padding: 20px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    #chartdiv {
      width: 100%;
      height: 500px;
    }
  </style>
</head>
<body>
  <div id="chartdiv"></div>
  <script type="module" src="./index.js"></script>
</body>
</html>

The chartdiv element will be the container for your chart. You can customize its size with CSS.

Import amCharts 5 modules

In your JavaScript/TypeScript file, import the required modules:

index.js

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

We’re importing three modules: the core library, XY chart components, and the Animated theme for smooth transitions.

Create the Root element

Every amCharts 5 visualization starts with a Root element:

// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
const root = am5.Root.new("chartdiv");

The Root manages the chart’s rendering, themes, and lifecycle. It connects to the DOM element with ID chartdiv.

Apply a theme

Set themes to control the visual appearance and animations:

// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
  am5themes_Animated.new(root)
]);

The Animated theme adds smooth animations to your chart. You can combine multiple themes or create custom ones.

Create an XY Chart

Create the chart instance and add it to the root container:

// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
const chart = root.container.children.push(am5xy.XYChart.new(root, {
  panX: false,
  panY: false,
  wheelX: "panX",
  wheelY: "zoomX"
}));

This creates an XY chart with mouse wheel zoom enabled on the X axis.

Add axes

Create X and Y axes for your data:

// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
const xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
  maxDeviation: 0.5,
  baseInterval: {
    timeUnit: "day",
    count: 1
  },
  renderer: am5xy.AxisRendererX.new(root, {
    minorGridEnabled: true
  }),
  tooltip: am5.Tooltip.new(root, {})
}));

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

We’re using a DateAxis for time-based data on the X axis and a ValueAxis for numeric data on the Y axis.

Create a series

Add a line series to visualize your data:

// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
const series = chart.series.push(am5xy.LineSeries.new(root, {
  name: "Series",
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "value",
  valueXField: "date",
  tooltip: am5.Tooltip.new(root, {
    labelText: "{valueX}: {valueY}"
  })
}));

The series defines how data is displayed. Here, valueYField and valueXField map to properties in your data objects.

Add data

Generate sample data and set it on the series:

// Generate random data
let date = new Date();
date.setHours(0, 0, 0, 0);
let value = 100;

function generateData() {
  value = Math.round((Math.random() * 10 - 5) + value);
  am5.time.add(date, "day", 1);
  return {
    date: date.getTime(),
    value: value
  };
}

function generateDatas(count) {
  const data = [];
  for (let i = 0; i < count; ++i) {
    data.push(generateData());
  }
  return data;
}

// Set data
const data = generateDatas(50);
series.data.setAll(data);

Replace this with your own data. Each object should have properties matching the valueXField and valueYField configured in the series.

Trigger animations

Make the chart animate on load:

// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/#Forcing_appearance_animation
series.appear(1000);
chart.appear(1000, 100);

This triggers the initial animation, making the chart smoothly appear on screen.

Complete Code Example

Here’s the complete working code:

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

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

// Set themes
root.setThemes([
  am5themes_Animated.new(root)
]);

// Specify date fields for tooltip formatting
root.dateFormatter.setAll({
  dateFields: ["valueX"]
});

// Create chart
const chart = root.container.children.push(am5xy.XYChart.new(root, {
  panX: false,
  panY: false,
  wheelX: "panX",
  wheelY: "zoomX"
}));

// Add cursor
const cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
  behavior: "zoomX"
}));
cursor.lineY.set("visible", false);

// Generate random data
let date = new Date();
date.setHours(0, 0, 0, 0);
let value = 100;

function generateData() {
  value = Math.round((Math.random() * 10 - 5) + value);
  am5.time.add(date, "day", 1);
  return {
    date: date.getTime(),
    value: value
  };
}

function generateDatas(count) {
  const data = [];
  for (let i = 0; i < count; ++i) {
    data.push(generateData());
  }
  return data;
}

// Create axes
const xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
  maxDeviation: 0.5,
  baseInterval: {
    timeUnit: "day",
    count: 1
  },
  renderer: am5xy.AxisRendererX.new(root, {
    minorGridEnabled: true,
    pan: "zoom"
  }),
  tooltip: am5.Tooltip.new(root, {})
}));

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

// Add series
const series = chart.series.push(am5xy.LineSeries.new(root, {
  name: "Series",
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "value",
  valueXField: "date",
  tooltip: am5.Tooltip.new(root, {
    labelText: "{valueX}: {valueY}"
  })
}));

// Add scrollbar
chart.set("scrollbarX", am5.Scrollbar.new(root, {
  orientation: "horizontal"
}));

// Set data
const data = generateDatas(50);
series.data.setAll(data);

// Make stuff animate on load
series.appear(1000);
chart.appear(1000, 100);

Understanding the Code

Let’s break down the key concepts:

Root Element

The Root is the foundation of every amCharts 5 chart. It:

Connects to a DOM element
Manages themes and rendering
Handles chart lifecycle and disposal
Provides shared resources like formatters and colors

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

Chart Instance

The chart container organizes axes, series, and other visual elements:

const chart = root.container.children.push(
  am5xy.XYChart.new(root, {
    panX: false,  // Disable horizontal panning
    panY: false,  // Disable vertical panning
    wheelX: "panX",  // Mouse wheel scrolls horizontally
    wheelY: "zoomX"  // Mouse wheel zooms on X axis
  })
);

Axes

Axes define the coordinate system and scale for your data:

DateAxis: For time-based data
ValueAxis: For numeric data
CategoryAxis: For categorical data

const xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
  baseInterval: { timeUnit: "day", count: 1 }
}));

Series

Series visualize your data. Each series type renders data differently:

LineSeries: Connects data points with lines
ColumnSeries: Displays vertical bars
PieSeries: Shows proportional slices

const series = chart.series.push(am5xy.LineSeries.new(root, {
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "value",  // Maps to data.value
  valueXField: "date"    // Maps to data.date
}));

Data Format

Data is an array of objects with properties matching your field configurations:

const data = [
  { date: 1609459200000, value: 100 },
  { date: 1609545600000, value: 105 },
  { date: 1609632000000, value: 98 }
];

series.data.setAll(data);

Next Steps

Core Concepts

Learn about Root, Sprites, Containers, and more

XY Charts

Explore different series types and axes

Customization

Customize colors, themes, and appearance

Data Loading

Load data from JSON, CSV, and APIs

Try modifying the code examples above to experiment with different chart types, colors, and configurations!

Getting Started

Core Concepts

Chart Types

XY Charts

Map Charts

Stock Charts

Customization

Data

Plugins

Advanced

Create Your First Chart

Complete Code Example

Understanding the Code

Next Steps

Core Concepts

XY Charts

Customization

Data Loading

Build docs developers (and LLMs) love

Getting Started

Core Concepts

Chart Types

XY Charts

Map Charts

Stock Charts

Customization

Data

Plugins

Advanced

​Create Your First Chart

​Complete Code Example

​Understanding the Code

​Next Steps

Core Concepts

XY Charts

Customization

Data Loading

Build docs developers (and LLMs) love

Create Your First Chart

Complete Code Example

Understanding the Code

Next Steps