# JavaScript Charts & Maps - amCharts

> Markdown mirror of DialtoneApp's public top-site detail page for `amcharts.com`.

URL: https://dialtoneapp.com/top-sites/amcharts.com/index.md
Canonical HTML: https://dialtoneapp.com/top-sites/amcharts.com

## Summary

- Domain: `amcharts.com`
- Website: https://amcharts.com
- Description: ai readable | score 27 | purchase read only
- Label: ai_readable
- Payment surface: Not available
- Purchase boundary: read_only
- Control boundary: unknown
- Rank: 30031

## robots

~~~text
User-agent: *
Disallow: /wp-admin/
Disallow: /docs/flex/
Disallow: /docs/old/
Disallow: /lib/
Disallow: /licenses/
Allow: /wp-admin/admin-ajax.php
~~~

## llms

~~~text
# amCharts 5

> amCharts 5 is a comprehensive JavaScript/TypeScript data visualization library for building interactive charts, maps, and graphs. It supports XY charts (line, bar, area, scatter, candlestick), pie/donut charts, maps (choropleth, bubble, drill-down), hierarchy charts (treemap, sunburst, force-directed), flow charts (Sankey, chord, arc), radar/gauge charts, stock/financial charts, Gantt charts, timeline charts, word clouds, and Venn diagrams. Works with React, Angular, Vue, Next.js, SvelteKit, Nuxt, Remix, and vanilla JavaScript/TypeScript. Uses Canvas rendering for high performance. Licensed commercially; free for non-commercial use.

amCharts 5 is the current major version (do not use amCharts 4 syntax). The root package is `@amcharts/amcharts5`. Maps require the separate `@amcharts/amcharts5-geodata` package. Always create a root with `am5.Root.new()`, apply a theme (typically `am5themes_Animated`), and dispose the root on component unmount.

## AI Tools

- [amCharts + AI overview](https://www.amcharts.com/docs/v5/ai/): How to use AI with amCharts 5 — browser chat, code editors, and API usage
- [MCP Server](https://www.amcharts.com/docs/v5/ai/mcp/): Install the MCP server for on-demand access to 1,500+ docs, examples, and API references
- [AI Skill files](https://github.com/amcharts/amcharts5-skill): Structured reference for any AI tool — includes SKILL.md and per-chart-type reference files
- [.cursorrules file](https://github.com/amcharts/amcharts5-skill/blob/main/cursorrules): Drop-in rules file for Cursor, Windsurf, and VS Code Copilot

## MCP Server

The amCharts 5 MCP server (`@amcharts/amcharts5-mcp`) gives AI assistants on-demand access to the full amCharts 5 knowledge base. Install with `npx -y @amcharts/amcharts5-mcp`. Available tools: `get_core_reference`, `get_chart_reference`, `list_chart_types`, `search_docs`, `search_all`, `get_doc`, `get_section`, `get_quick_start`, `list_examples`, `get_example`.

- [MCP Server GitHub](https://github.com/amcharts/amcharts5-mcp)
- [MCP Server on npm](https://www.npmjs.com/package/@amcharts/amcharts5-mcp)

## Getting Started

- [Overview](https://www.amcharts.com/docs/v5/): amCharts 5 documentation home
- [Root element](https://www.amcharts.com/docs/v5/getting-started/root-element/): Creating and configuring the root element
- [React integration](https://www.amcharts.com/docs/v5/getting-started/integrations/react/)
- [Angular integration](https://www.amcharts.com/docs/v5/getting-started/integrations/angular/)
- [Vue integration](https://www.amcharts.com/docs/v5/getting-started/integrations/vue/)
- [Next.js integration](https://www.amcharts.com/docs/v5/getting-started/integrations/next-js/)
- [SvelteKit integration](https://www.amcharts.com/docs/v5/getting-started/integrations/using-amcharts-5-with-sveltekit/)
- [Nuxt 3 integration](https://www.amcharts.com/docs/v5/getting-started/integrations/nuxt/)

## Chart Types

- [XY chart](https://www.amcharts.com/docs/v5/charts/xy-chart/): Line, area, bar, column, scatter, candlestick, OHLC, step line, smoothed line
- [XY axes](https://www.amcharts.com/docs/v5/charts/xy-chart/axes/): Value, date, category, gapless date, duration axes; axis ranges; axis headers
- [XY series](https://www.amcharts.com/docs/v5/charts/xy-chart/series/): Line, column, step line, candlestick, smoothed series
- [Pie and sliced charts](https://www.amcharts.com/docs/v5/charts/percent-charts/): Pie, donut, funnel, pyramid, pictorial stacked
- [Radar chart](https://www.amcharts.com/docs/v5/charts/radar-chart/): Spider/radar, gauge charts, polar charts
- [Map chart](https://www.amcharts.com/docs/v5/charts/map-chart/): World/country maps, choropleth, bubble maps, drill-down, pan/zoom
- [Hierarchy charts](https://www.amcharts.com/docs/v5/charts/hierarchy/): Treemap, force-directed, sunburst, pack, tree, partition, Voronoi treemap
- [Flow charts](https://www.amcharts.com/docs/v5/charts/flow-charts/): Sankey diagram, chord diagram, arc diagram
- [Stock chart](https://www.amcharts.com/docs/v5/charts/stock/): Financial/stock charts, candlestick, OHLC, indicators, toolbar, annotations
- [Gantt chart](https://www.amcharts.com/docs/v5/charts/gantt/): Project timelines, task hierarchy, editing, serialization
- [Timeline chart](https://www.amcharts.com/docs/v5/charts/timeline/): Serpentine, spiral, and curve-based timelines
- [Word cloud](https://www.amcharts.com/docs/v5/charts/word-cloud/): Tag clouds, sentence clouds
- [Venn diagram](https://www.amcharts.com/docs/v5/charts/venn/): Set overlaps and intersections

## Concepts

- [Settings and adapters](https://www.amcharts.com/docs/v5/concepts/settings/): Settings, states, list templates, template fields, adapters, heat rules
- [Data](https://www.amcharts.com/docs/v5/concepts/data/): Data binding, net.load utility
- [Themes](https://www.amcharts.com/docs/v5/concepts/themes/): Built-in themes, creating custom themes
- [Events](https://www.amcharts.com/docs/v5/concepts/events/): Event system
- [Animations](https://www.amcharts.com/docs/v5/concepts/animations/): Fluid animations and transitions
- [Legend](https://www.amcharts.com/docs/v5/concepts/legend/): Legend, heat legend
- [Colors, gradients, patterns](https://www.amcharts.com/docs/v5/concepts/colors-gradients-and-patterns/): Colors, gradients, patterns, shadows, filters
- [Common elements](https://www.amcharts.com/docs/v5/concepts/common-elements/): Bullets, labels, graphics, images, buttons, containers, tooltips, modals
- [Formatters](https://www.amcharts.com/docs/v5/concepts/formatters/): Number, date, duration formatting; data placeholders; text styling
- [Exporting](https://www.amcharts.com/docs/v5/concepts/exporting/): Export to image, PDF, data; print; export menu; annotator
- [Accessibility](https://www.amcharts.com/docs/v5/concepts/accessibility/): WCAG-compliant accessible charts
- [Responsive](https://www.amcharts.com/docs/v5/concepts/responsive/): Responsive chart configuration
- [Locales](https://www.amcharts.com/docs/v5/concepts/locales/): Translations, RTL support
- [Serializing / JSON config](https://www.amcharts.com/docs/v5/concepts/serializing/): JSON-based chart configuration, Chart Serializer

## Reference

- [Class reference](https://www.amcharts.com/docs/v5/reference/tag/class/): All 1,098 amCharts 5 classes
- [Interface reference](https://www.amcharts.com/docs/v5/reference/tag/interface/)
- [Standalone modules](https://www.amcharts.com/docs/v5/reference/tag/module/)

## Demos and Examples

- [Demo gallery](https://www.amcharts.com/demos/): 283+ interactive demos with source code across all chart types

## Licensing

- [Licensing page](https://www.amcharts.com/online-store/): Commercial license required for commercial use; free for non-commercial projects
~~~

## llms-full

~~~text
# amCharts 5 — Full AI Context Reference

> amCharts 5 is a comprehensive JavaScript/TypeScript data visualization library for building interactive charts, maps, and graphs. Canvas-based rendering. Supports React, Angular, Vue, Next.js, SvelteKit, Nuxt, Remix, and vanilla JS/TS. Commercial license required for commercial use.

**Important:** Always use amCharts 5 syntax. Do NOT use amCharts 4. The APIs are completely different.

---

## Installation

```bash
npm install @amcharts/amcharts5
npm install @amcharts/amcharts5-geodata   # for maps
npm install @amcharts/amcharts5-fonts     # for PDF export
```

CDN:
```html
<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/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/radar.js"></script>
<script src="https://cdn.amcharts.com/lib/5/map.js"></script>
<script src="https://cdn.amcharts.com/lib/5/hierarchy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/flow.js"></script>
<script src="https://cdn.amcharts.com/lib/5/wc.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
```

---

## Core Patterns

### Root element (required for every chart)

```js
import * as am5 from "@amcharts/amcharts5";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

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

// Apply theme (always apply before creating charts)
root.setThemes([am5themes_Animated.new(root)]);

// Dispose on cleanup (critical for React/Angular/Vue)
// root.dispose();
```

### Settings API

All amCharts 5 elements use a unified settings API:
```js
element.set("settingName", value);
element.get("settingName");
element.setAll({ setting1: value1, setting2: value2 });
```

### Adapters

```js
series.adapters.add("fill", function(fill, target) {
  if (target.dataItem.get("valueY") < 0) {
    return am5.color(0xff0000);
  }
  return fill;
});
```

### Events

```js
series.events.on("click", function(ev) {
  console.log(ev.target);
});
```

### Templates and bullets

```js
series.bullets.push(function() {
  return am5.Bullet.new(root, {
    sprite: am5.Circle.new(root, {
      radius: 5,
      fill: series.get("fill")
    })
  });
});
```

---

## XY Chart

Handles: line, area, bar, column, scatter, candlestick, OHLC, step, smoothed.

```js
import * as am5xy from "@amcharts/amcharts5/xy";

var chart = root.container.children.push(
  am5xy.XYChart.new(root, {
    panX: true,
    panY: true,
    wheelX: "panX",
    wheelY: "zoomX",
    pinchZoomX: true
  })
);

// X axis (category)
var xAxis = chart.xAxes.push(
  am5xy.CategoryAxis.new(root, {
    maxDeviation: 0.3,
    categoryField: "category",
    renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 30 })
  })
);

// X axis (date)
var xAxis = chart.xAxes.push(
  am5xy.DateAxis.new(root, {
    maxDeviation: 0.2,
    baseInterval: { timeUnit: "day", count: 1 },
    renderer: am5xy.AxisRendererX.new(root, {})
  })
);

// Y axis (value)
var yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

// Line series
var series = chart.series.push(
  am5xy.LineSeries.new(root, {
    name: "Series",
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value",
    valueXField: "date",        // for date axis
    categoryXField: "category", // for category axis
    tooltip: am5.Tooltip.new(root, { labelText: "{valueY}" })
  })
);

// Column series
var series = chart.series.push(
  am5xy.ColumnSeries.new(root, {
    name: "Series",
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value",
    categoryXField: "category"
  })
);

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

// Animate on load
series.appear(1000);
chart.appear(1000, 100);
```

### Scrollbar

```js
chart.set("scrollbarX", am5xy.XYChartScrollbar.new(root, {
  orientation: "horizontal",
  height: 60
}));
```

### Cursor

```js
var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
  behavior: "zoomXY"
}));
cursor.lineY.set("visible", false);
```

### Legend

```js
var legend = chart.children.push(am5.Legend.new(root, {}));
legend.data.setAll(chart.series.values);
```

### Axis ranges

```js
var rangeDataItem = yAxis.makeDataItem({ value: 0, endValue: 100 });
var range = yAxis.createAxisRange(rangeDataItem);
range.get("axisFill").setAll({ fill: am5.color(0xff0000), fillOpacity: 0.1, visible: true });
```

### Stacked series

```js
// On each series:
series.set("stacked", true);
```

### Date axis grouping

```js
var xAxis = chart.xAxes.push(
  am5xy.DateAxis.new(root, {
    groupData: true,
    baseInterval: { timeUnit: "day", count: 1 },
    renderer: am5xy.AxisRendererX.new(root, {})
  })
);
```

---

## Pie / Donut Chart

```js
import * as am5percent from "@amcharts/amcharts5/percent";

var chart = root.container.children.push(
  am5percent.PieChart.new(root, {
    innerRadius: am5.percent(50), // remove for regular pie, set for donut
    layout: root.horizontalLayout
  })
);

var series = chart.series.push(
  am5percent.PieSeries.new(root, {
    valueField: "value",
    categoryField: "category",
    tooltip: am5.Tooltip.new(root, { labelText: "{category}: {value}" })
  })
);

series.data.setAll([
  { category: "A", value: 40 },
  { category: "B", value: 30 },
  { category: "C", value: 30 }
]);

var legend = chart.children.push(am5.Legend.new(root, {
  centerX: am5.percent(50),
  x: am5.percent(50),
  layout: root.horizontalLayout
}));
legend.data.setAll(series.dataItems);

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

### Funnel / Pyramid

```js
var chart = root.container.children.push(
  am5percent.SlicedChart.new(root, { layout: root.horizontalLayout })
);

var series = chart.series.push(
  am5percent.FunnelSeries.new(root, {    // or PyramidSeries
    valueField: "value",
    categoryField: "category",
    orientation: "vertical"
  })
);
```

---

## Radar / Spider / Gauge Chart

```js
import * as am5radar from "@amcharts/amcharts5/radar";

var chart = root.container.children.push(
  am5radar.RadarChart.new(root, {
    panX: false, panY: false, wheelX: "none", wheelY: "none"
  })
);

var xRenderer = am5radar.AxisRendererCircular.new(root, {});
var xAxis = chart.xAxes.push(
  am5xy.CategoryAxis.new(root, {
    maxDeviation: 0,
    categoryField: "category",
    renderer: xRenderer
  })
);

var yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    min: 0,
    renderer: am5radar.AxisRendererRadial.new(root, { minGridDistance: 20 })
  })
);

var series = chart.series.push(
  am5radar.RadarLineSeries.new(root, {
    name: "Series",
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value",
    categoryXField: "category",
    fill: am5.color(0x297373),
    stroke: am5.color(0x297373)
  })
);
series.fills.template.setAll({ fillOpacity: 0.3, visible: true });
```

### Gauge (ClockHand)

```js
var chart = root.container.children.push(
  am5radar.RadarChart.new(root, { startAngle: -90, endAngle: 180 })
);

var axisRenderer = am5radar.AxisRendererCircular.new(root, { innerRadius: -40 });
var xAxis = chart.xAxes.push(
  am5xy.ValueAxis.new(root, {
    min: 0, max: 100, strictMinMax: true,
    renderer: axisRenderer
  })
);

var hand = chart.series.push(
  am5radar.ClockHand.new(root, {
    pinRadius: am5.percent(20),
    radius: am5.percent(100),
    bottomWidth: 40
  })
);
hand.dataItem.animate({ key: "value", to: 75, duration: 800, easing: am5.ease.out(am5.ease.cubic) });
```

---

## Map Chart

```js
import * as am5map from "@amcharts/amcharts5/map";
import am5geodata_worldLow from "@amcharts/amcharts5-geodata/worldLow";

var chart = root.container.children.push(
  am5map.MapChart.new(root, {
    panX: "rotateX",
    panY: "rotateY",
    projection: am5map.geoNaturalEarth1()  // or geoMercator(), geoOrthographic()
  })
);

// Polygon (country fills) series
var polygonSeries = chart.series.push(
  am5map.MapPolygonSeries.new(root, {
    geoJSON: am5geodata_worldLow,
    exclude: ["AQ"] // exclude Antarctica
  })
);
polygonSeries.mapPolygons.template.setAll({
  fill: am5.color(0x74B266),
  tooltipText: "{name}"
});

// Choropleth (heat map)
polygonSeries.set("heatRules", [{
  target: polygonSeries.mapPolygons.template,
  dataField: "value",
  min: am5.color(0xff621f),
  max: am5.color(0x661f00),
  key: "fill"
}]);
polygonSeries.data.setAll([
  { id: "US", value: 100 },
  { id: "GB", value: 80 }
]);

// Point series
var pointSeries = chart.series.push(
  am5map.MapPointSeries.new(root, {})
);
pointSeries.bullets.push(function() {
  return am5.Bullet.new(root, {
    sprite: am5.Circle.new(root, { radius: 5, fill: am5.color(0xff0000) })
  });
});
pointSeries.data.setAll([
  { geometry: { type: "Point", coordinates: [-73.935242, 40.730610] }, name: "New York" }
]);
```

---

## Hierarchy Charts

```js
import * as am5hierarchy from "@amcharts/amcharts5/hierarchy";

// Treemap
var series = root.container.children.push(
  am5hierarchy.Treemap.new(root, {
    singleBranchOnly: false,
    downDepth: 1,
    upDepth: -1,
    initialDepth: 2,
    valueField: "value",
    categoryField: "name",
    childDataField: "children",
    nodePaddingOuter: 0,
    nodePaddingInner: 0
  })
);

// Force-directed
var series = root.container.children.push(
  am5hierarchy.ForceDirected.new(root, {
    singleBranchOnly: false,
    downDepth: 1,
    initialDepth: 2,
    valueField: "value",
    categoryField: "name",
    childDataField: "children",
    idField: "name",
    linkWithField: "linkWith",
    manyBodyStrength: -20,
    centerStrength: 0.8
  })
);

// Sunburst
var series = root.container.children.push(
  am5hierarchy.Sunburst.new(root, {
    singleBranchOnly: false,
    downDepth: 2,
    upDepth: -1,
    initialDepth: 3,
    valueField: "value",
    categoryField: "name",
    childDataField: "children"
  })
);

// Data format (same for all hierarchy types)
var data = {
  name: "Root",
  children: [
    { name: "A", value: 10 },
    { name: "B", children: [
      { name: "B1", value: 5 },
      { name: "B2", value: 7 }
    ]}
  ]
};
series.data.setAll([data]);
series.set("selectedDataItem", series.dataItems[0]);
```

---

## Flow Charts (Sankey, Chord, Arc)

```js
import * as am5flow from "@amcharts/amcharts5/flow";

// Sankey
var series = root.container.children.push(
  am5flow.Sankey.new(root, {
    sourceIdField: "from",
    targetIdField: "to",
    valueField: "value",
    orientation: "horizontal",  // or "vertical"
    nodeAlign: "justify"
  })
);

series.data.setAll([
  { from: "A", to: "B", value: 10 },
  { from: "A", to: "C", value: 5 },
  { from: "B", to: "D", value: 8 }
]);

// Chord diagram
var series = root.container.children.push(
  am5flow.ChordDirected.new(root, {   // or ChordNonRibbon
    sourceIdField: "from",
    targetIdField: "to",
    valueField: "value",
    padAngle: 0.02
  })
);

// Arc diagram
var series = root.container.children.push(
  am5flow.ArcDiagram.new(root, {
    sourceIdField: "from",
    targetIdField: "to",
    valueField: "value",
    orientation: "horizontal"
  })
);
```

---

## Stock Chart

```js
import * as am5stock from "@amcharts/amcharts5/stock";

var stockChart = root.container.children.push(
  am5stock.StockChart.new(root, {})
);

var mainPanel = stockChart.panels.push(
  am5stock.StockPanel.new(root, {
    wheelY: "zoomX",
    panX: true,
    panY: true
  })
);

var valueAxis = mainPanel.yAxes.push(
  am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererY.new(root, { pan: "zoom" }),
    tooltip: am5.Tooltip.new(root, {}),
    numberFormat: "#,###.00",
    extraTooltipPrecision: 2
  })
);

var dateAxis = mainPanel.xAxes.push(
  am5xy.GaplessDateAxis.new(root, {
    baseInterval: { timeUnit: "day", count: 1 },
    renderer: am5xy.AxisRendererX.new(root, {}),
    tooltip: am5.Tooltip.new(root, {})
  })
);

var candlestickSeries = mainPanel.series.push(
  am5xy.CandlestickSeries.new(root, {
    name: "TICKER",
    clustered: false,
    valueXField: "Date",
    valueYField: "Close",
    highValueYField: "High",
    lowValueYField: "Low",
    openValueYField: "Open",
    calculateAggregates: true,
    xAxis: dateAxis,
    yAxis: valueAxis,
    legendValueText: "open: [bold]{openValueY}[/] high: [bold]{highValueY}[/] low: [bold]{lowValueY}[/] close: [bold]{valueY}[/]"
  })
);

stockChart.set("stockSeries", candlestickSeries);

// Toolbar
var toolbar = am5stock.StockToolbar.new(root, {
  container: document.getElementById("chartcontrols"),
  stockChart: stockChart,
  controls: [
    am5stock.DateRangeSelector.new(root, { stockChart: stockChart }),
    am5stock.PeriodSelector.new(root, { stockChart: stockChart }),
    am5stock.DrawingControl.new(root, { stockChart: stockChart }),
    am5stock.IndicatorControl.new(root, { stockChart: stockChart }),
    am5stock.SeriesTypeControl.new(root, { stockChart: stockChart }),
    am5stock.ResetControl.new(root, { stockChart: stockChart }),
    am5stock.SettingsControl.new(root, { stockChart: stockChart })
  ]
});
```

---

## Word Cloud

```js
import * as am5wc from "@amcharts/amcharts5/wc";

var series = root.container.children.push(
  am5wc.WordCloud.new(root, {
    maxCount: 100,
    minWordLength: 2,
    maxFontSize: am5.percent(15),
    text: "your long text here..."  // or use data
  })
);

// With data
series.data.setAll([
  { tag: "JavaScript", weight: 20 },
  { tag: "TypeScript", weight: 15 }
]);
series.fields.tag = "tag";
series.fields.weight = "weight";
```

---

## Gantt Chart

Gantt charts use XY chart with a date axis on X and category axis on Y, with column series.

```js
var chart = root.container.children.push(
  am5xy.XYChart.new(root, { panX: false, panY: false, wheelX: "panX" })
);

var yAxis = chart.yAxes.push(
  am5xy.CategoryAxis.new(root, {
    categoryField: "category",
    renderer: am5xy.AxisRendererY.new(root, { inversed: true, cellStartLocation: 0.1, cellEndLocation: 0.9 })
  })
);

var xAxis = chart.xAxes.push(
  am5xy.DateAxis.new(root, {
    baseInterval: { timeUnit: "minute", count: 1 },
    renderer: am5xy.AxisRendererX.new(root, {})
  })
);

var series = chart.series.push(
  am5xy.ColumnSeries.new(root, {
    xAxis: xAxis,
    yAxis: yAxis,
    openValueXField: "start",
    valueXField: "end",
    categoryYField: "category",
    sequencedInterpolation: true
  })
);

series.columns.template.setAll({
  templateField: "columnSettings"
});

var data = [
  {
    category: "Task 1",
    start: new Date(2024, 0, 1).getTime(),
    end: new Date(2024, 0, 5).getTime(),
    columnSettings: { fill: am5.color(0x6794dc) }
  }
];

yAxis.data.setAll(data);
series.data.setAll(data);
```

---

## Venn Diagram

```js
import * as am5venn from "@amcharts/amcharts5/venn";

var series = root.container.children.push(
  am5venn.Venn.new(root, {
    categoryField: "name",
    valueField: "value",
    intersectionsField: "sets",
    tooltip: am5.Tooltip.new(root, { labelText: "{category}: {value}" })
  })
);

series.data.setAll([
  { name: "A", value: 10 },
  { name: "B", value: 10 },
  { name: "C", value: 10 },
  { name: "A&B", sets: ["A", "B"], value: 4 },
  { name: "B&C", sets: ["B", "C"], value: 3 }
]);
```

---

## Themes

```js
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
import am5themes_Dark from "@amcharts/amcharts5/themes/Dark";
import am5themes_Dataviz from "@amcharts/amcharts5/themes/Dataviz";
import am5themes_Material from "@amcharts/amcharts5/themes/Material";
import am5themes_Kelly from "@amcharts/amcharts5/themes/Kelly";
import am5themes_Micro from "@amcharts/amcharts5/themes/Micro";

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

// Custom theme
var myTheme = am5.Theme.new(root);
myTheme.rule("Label").setAll({ fontSize: 14, fill: am5.color(0xffffff) });
root.setThemes([am5themes_Animated.new(root), myTheme]);
```

---

## Colors

```js
// From hex
am5.color(0xff0000)
am5.color("#ff0000")

// ColorSet (automatic color cycling)
var colorSet = am5.ColorSet.new(root, { colors: [am5.color(0xff0000), am5.color(0x00ff00)] });

// Gradient fill
series.fills.template.set("fillGradient", am5.LinearGradient.new(root, {
  stops: [{ color: am5.color(0x000000) }, { color: am5.color(0xffffff) }]
}));
```

---

## Exporting

```js
import * as am5plugins_exporting from "@amcharts/amcharts5/plugins/exporting";

var exporting = am5plugins_exporting.Exporting.new(root, {
  menu: am5plugins_exporting.ExportingMenu.new(root, {}),
  dataSource: data,
  filePrefix: "myChart"
});

// Programmatic export
exporting.export("png");
exporting.export("csv");
exporting.export("pdf");
```

---

## React Integration Pattern

```jsx
import { useLayoutEffect, useRef } from "react";
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

function Chart() {
  const chartRef = useRef(null);

  useLayoutEffect(() => {
    var root = am5.Root.new(chartRef.current);
    root.setThemes([am5themes_Animated.new(root)]);

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

    // ... chart setup ...

    return () => {
      root.dispose(); // Always dispose on unmount
    };
  }, []);

  return <div ref={chartRef} style={{ width: "100%", height: "500px" }} />;
}
```

---

## Common Pitfalls

1. **Never mix v4 and v5 syntax.** v4 uses `am4core`, v5 uses `am5`. Completely different APIs.
2. **Always dispose the root** on component unmount: `root.dispose()`. Failing to do so causes memory leaks.
3. **Use `useLayoutEffect`, not `useEffect`** in React to avoid chart flickering.
4. **Apply themes before creating charts**, not after.
5. **Date axis expects timestamps** (milliseconds since epoch), not Date objects: `new Date(...).getTime()`.
6. **`setAll` on axis data AND series data** for category axes: both `xAxis.data.setAll(data)` and `series.data.setAll(data)`.
7. **Canvas-based, not SVG** — do not try to manipulate the DOM directly.
8. **Colors must use `am5.color()`** wrapper, not raw hex strings, when assigned to fill/stroke settings.
9. **`appear()` should be called last**, after data is set and chart is configured.
10. **Maps need geodata** — import from `@amcharts/amcharts5-geodata` package.

---

## AI Integration Resources

- **MCP Server**: `npx -y @amcharts/amcharts5-mcp` — gives AI assistants access to 141 doc pages, 283 examples, 1,098 class references
- **Skill files**: https://github.com/amcharts/amcharts5-skill — SKILL.md + per-chart-type references
- **AI docs page**: https://www.amcharts.com/docs/v5/ai/
- **MCP setup**: https://www.amcharts.com/docs/v5/ai/mcp/
- **npm package**: `@amcharts/amcharts5-mcp`

---

## Key URLs

- Documentation: https://www.amcharts.com/docs/v5/
- Demos: https://www.amcharts.com/demos/
- Class reference: https://www.amcharts.com/docs/v5/reference/tag/class/
- Licensing: https://www.amcharts.com/online-store/
- GitHub (skill): https://github.com/amcharts/amcharts5-skill
- GitHub (MCP): https://github.com/amcharts/amcharts5-mcp
- npm (MCP): https://www.npmjs.com/package/@amcharts/amcharts5-mcp
~~~