amcharts5

amCharts 5

Build any chart with the amCharts 5 JavaScript charting library.

Docs: https://www.amcharts.com/docs/v5/

Critical rules — apply to ALL chart types

1. Check demos first (if you can browse the web) — Before building a chart, search or browse https://www.amcharts.com/demos/ for a demo that matches the user's request. Demo source code is the most reliable starting point — adapt it rather than writing from scratch. Skip this step if you have no web access.
2. Read the docs (if you can browse the web) — For unfamiliar features or configuration, check https://www.amcharts.com/docs/v5/ for guides and tutorials. The docs explain concepts, patterns, and options that the class reference alone does not. Skip if you have no web access.
3. Always use amCharts 5 — never v3 or v4. The APIs are completely different.
4. Use .new() factory — never new ClassName(). Every object is created via ClassName.new(root, { settings }).
5. Root is always the first argument to .new() (except Root itself, which takes a div ID).
6. Set data last — once data is set, objects are created. Configuration applied after may not take effect.
7. Colors use am5.color() — e.g. am5.color(0xff0000), am5.color("#ff0000"), or am5.color("rgb(255,0,0)"). Never raw hex strings.
8. Percent values use am5.percent() — e.g. am5.percent(50), not 50 or "50%".
9. Every axis needs a renderer — am5xy.AxisRendererX.new(root, {}) or AxisRendererY.
10. CategoryAxis must receive data — call xAxis.data.setAll(data) in addition to series data. Forgetting this is the #1 bug.
11. DateAxis values must be timestamps — use new Date().getTime(), not Date objects.
12. Disposal is mandatory in SPAs — in React, Vue, Angular, Svelte or React Native use amCharts' framework package, which creates and disposes the root for you (see "Frameworks"); without one, call root.dispose() on component unmount. Not chart.dispose().
13. Style through amCharts, not CSS — charts draw on canvas by default, so CSS cannot reach chart internals. Even with the optional SVG renderer (5.21.0) the shapes carry no per-element classes or ids, are rewritten as the chart redraws, and exports ignore page CSS. Use amCharts settings/templates/themes instead.
14. Dark backgrounds require Dark theme — If the user requests or the page clearly has a dark background, always add am5themes_Dark.new(root) to root.setThemes() alongside Animated. Without it, labels, grid, and tooltips will be invisible. If the background is not clearly dark, default to white/light and do NOT add the Dark theme unless asked.
15. Use default amCharts colors — Do NOT invent custom color palettes unless the user explicitly asks for specific colors. amCharts assigns colors automatically from its built-in ColorSet. If you need a color programmatically, use chart.get("colors").getIndex(index) or chart.get("colors").next(). For pie/percent charts, use series.get("colors") instead.