amCharts + AI – amCharts 5 Documentation

amCharts 5 works well with all major AI models — Claude, ChatGPT and beyond. This page covers how to get the most out of that combination.

Getting started

Use a browser-based chat interface

The simplest option — no setup needed. Just open the model's website, type your prompt, and paste the returned code into your project.

Service	Vendor
Claude	Anthropic
ChatGPT	OpenAI
Gemini	Google
Mistral	Mistral
Meta AI	Meta

Use an AI extension in your IDE

If you prefer staying in your code editor, most major IDEs have AI integration built in or available as an extension.

IDE	Docs
VS Code	Docs
JetBrains	Docs
ZED	Docs
Cursor	Docs
Windsurf	Docs

Choose an AI model

For best results, let's make sure we choose a latest models tweaked for code generation.

Below are a few examples, that we found work exceptionally well with amCharts 5.

Model / Variant	Primary Use	Vendor / Developer	Service / Platform
GPT-5.2-Codex	Coding-specialized generation & refactoring	OpenAI	OpenAI API, ChatGPT product, Microsoft Copilot (en.wikipedia.org)
Claude Opus 4.5 / Opus 4.6	High-quality coding + long-horizon tasks	Anthropic	Claude API / Claude web apps (en.wikipedia.org)

You may consider the following less capably models, too.

Model / Variant	Primary Use	Vendor / Developer	Service / Platform
GPT-5.2	General multimodal with strong coding	OpenAI	OpenAI API, ChatGPT (en.wikipedia.org)
Claude Sonnet 4.5 / Sonnet 4.6	Cost-efficient strong code understanding	Anthropic	Claude API / Claude web apps (en.wikipedia.org)
Claude Haiku 4.5	Lightweight coder & real-time assistance	Anthropic	Claude API / Claude web apps (GitHub Docs)
Gemini 3 Pro	Large context code + multimodal tasks	Google DeepMind / Google	Google Cloud AI, API surfaces (en.wikipedia.org)
Gemini 3 Flash	Fast coding & tool workflows	Google	Google Cloud Gemini (GitHub Docs)
GPT-5.1-Codex / Codex variants	Legacy but still supported coding models	OpenAI	GitHub Copilot & API (GitHub Docs)
Raptor mini (GPT-5 mini tuned)	Smaller, efficient coding	Fine-tuned OpenAI	Copilot preview models (GitHub Docs)

Instruct AI to use amCharts

To avoid code confusion, let's instruct our AI agent of choice to use amCharts:

From now on, use amCharts 5 library to build all charts.

Shaping prompts

When forming a task for the AI, let's make sure to include the following information:

Point	Comment
Chart type	Be clear what type of chart we want, e.g. "pie", "donut", "time-based candlesticks", "line"
Components	Whether we want certain components included, e.g. "legend", "horizontal scrollbar"
Data	If we have the data, we can provide as an attachment/context for the AI; alternatively we can describe the approximate nature of the data and let the AI fill in with dummy values
Framework	Do we need the code to use specific framework, e.g. "React", "Angular"?
Target syntax	Are we generating code for "TypeScript" or "Vanilla JavaScript"?
Return type	Specify whether we want just code for the chart or a full-fledged HTML
Prefer simple code	Explicitly ask to honor defaults and not apply any configuration options you did not ask for

Sample prompts

A simple pie chart

Generate the code for a Donut chart with three slices:
* Apples: 10
* Pears: 7
* Cherries: 3
Add a legend to the right of the pie.
Make sure each slice has a tick and a label, arranged in columns.
Return only code for charts.
Keep most of the stuff at defaults, avoid applying custom colors or other values that I didn't ask for.
TypeScript please.

The result code:

import * as am5 from "@amcharts/amcharts5";
import * as am5percent from "@amcharts/amcharts5/percent";
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(
  am5percent.PieChart.new(root, {
    innerRadius: am5.percent(50),
    layout: root.horizontalLayout,
  })
);

const series = chart.series.push(
  am5percent.PieSeries.new(root, {
    valueField: "value",
    categoryField: "category",
    alignLabels: true,
  })
);

series.labels.template.setAll({
  textType: "radial",
  centerX: am5.percent(100),
  text: "{category}",
});

series.ticks.template.setAll({
  forceHidden: false,
});

series.data.setAll([
  { category: "Apples", value: 10 },
  { category: "Pears", value: 7 },
  { category: "Cherries", value: 3 },
]);

const legend = chart.children.push(
  am5.Legend.new(root, {
    centerY: am5.percent(50),
    y: am5.percent(50),
    layout: root.verticalLayout,
  })
);

legend.data.setAll(series.dataItems);

series.appear(1000, 100);
chart.appear(1000, 100);