@amcharts/amcharts5-mcp 1.6.0 → 1.7.0

package/extended/charts/hierarchy/tree.md

@@ -1,7 +1,7 @@
 ---
 title: "Tree"
 source: "https://www.amcharts.com/docs/v5/charts/hierarchy/tree/"
-scraped: "2026-03-15"
+scraped: "2026-10-08"
 ---
 
 This tutorial focuses on the configuration of a tree diagram.
@@ -30,8 +30,10 @@ var series = root.container.children.push(
   })
 );
 
+
 `orientation: "vertical"` (default)
 
+
 `orientation: "horizontal"`
 
 
@@ -152,11 +154,48 @@ series.outerCircles.template.setAll({
   radius: 20
 });
 
+
 `radius: 15` (default)
 
+
 `radius: 20`
 
 
+### Fitting visible nodes
+
+By default, Tree will reserve space for all nodes, even if they are invisible.
+
+If we'd like to free up the space of the nodes that are hidden, we can set `fitNodes` to `true`:
+
+let series = root.container.children.push(
+  am5hierarchy.Tree.new(root, {
+    valueField: "value",
+    categoryField: "name",
+    childDataField: "children",
+    orientation: "horizontal",
+    fitNodes: true
+  })
+);
+
+var series = root.container.children.push(
+  am5hierarchy.Tree.new(root, {
+    valueField: "value",
+    categoryField: "name",
+    childDataField: "children",
+    orientation: "horizontal",
+    fitNodes: true
+  })
+);
+
+
+Fully expanded
+
+
+`fitNodes: false` (default)
+
+
+`fitNodes: true`
+
 ### Disabling dragging
 
 Nodes in the tree are draggable. We can disable it by setting `draggable` to `false`:
@@ -318,6 +357,41 @@ series.nodes.template.setup = function(target) {
 
 IMPORTANT The `template.setup` needs to be set **before** any data is set on the the series. More info [here](https://www.amcharts.com/docs/v5/concepts/settings/list-templates/#Setup_handler).
 
+## Layout
+
+By default, Tree will divide the space and arrange the nodes in perfect columns.
+
+While that works for smaller structures, having more complicated ones might not use the available space efficiently.
+
+Here's when clustered mode comes in play. To enable it, simply set `clustered: false` in your Tree settings:
+
+var series = zoomableContainer.contents.children.push(am5hierarchy.Tree.new(root, {
+  singleBranchOnly: false,
+  downDepth: 1,
+  initialDepth: 10,
+  valueField: "value",
+  categoryField: "name",
+  childDataField: "children",
+  clustered: true
+}));
+
+let series = zoomableContainer.contents.children.push(am5hierarchy.Tree.new(root, {
+  singleBranchOnly: false,
+  downDepth: 1,
+  initialDepth: 10,
+  valueField: "value",
+  categoryField: "name",
+  childDataField: "children",
+  clustered: true
+}));
+
+
+`clustered: false` (default)
+
+
+`clustered: true`
+
+
 ## Links
 
 ### Link appearance

package/extended/charts/hierarchy/voronoi-treemap.md

@@ -1,7 +1,7 @@
 ---
 title: "Voronoi Treemap"
 source: "https://www.amcharts.com/docs/v5/charts/hierarchy/voronoi-treemap/"
-scraped: "2026-03-15"
+scraped: "2026-10-08"
 ---
 
 This tutorial provides information on how to create Weighted Voronoi Treemaps.
@@ -14,14 +14,14 @@ Voronoi treemaps are a method of visualizing hierarchical data using Voronoi dia
 
 Voronoi treemap can either take rectangular or polygon shape.
 
-It's controlled by setting `type`, with two possible values: `"rectangle"`, and `"polygon"` (default).
+It's controlled by setting `shapeType`, with two possible values: `"rectangle"`, and `"polygon"` (default).
 
 let series = root.container.children.push(
   am5hierarchy.VoronoiTreemap.new(root, {
     valueField: "value",
     categoryField: "name",
     childDataField: "children",
-    type: "rectangle"
+    shapeType: "rectangle"
   })
 );
 
@@ -30,7 +30,7 @@ var series = root.container.children.push(
     valueField: "value",
     categoryField: "name",
     childDataField: "children",
-    type: "rectangle"
+    shapeType: "rectangle"
   })
 );
 
@@ -44,14 +44,17 @@ Example
 
 ### Corner count
 
-For the `"polygon"` type, we can also control the shape by setting `cornerCount` setting.
+For the `"polygon"` shape type, we can also control the shape by setting `cornerCount` setting.
 
 The bigger the value, the more corners, the rounder the shape, with `120` (default) resulting in a perfect circle.
 
+
 `cornerCount: 120 (default)`
 
+
 `cornerCount: 10`
 
+
 `cornerCount: 3`
 
 ## Nodes

package/extended/charts/hierarchy.md

@@ -1,7 +1,7 @@
 ---
 title: "Hierarchy charts"
 source: "https://www.amcharts.com/docs/v5/charts/hierarchy/"
-scraped: "2026-03-15"
+scraped: "2026-10-08"
 ---
 
 Hierarchy charts (Treemap, Sunburst, Force-directed tree, etc.) are used to display multi-level data, in a branching parent-child tree.
@@ -314,6 +314,45 @@ IMPORTANT It's a good practice to make sure that setting data happens as late i
 
 MORE INFO There are more ways to set, update, add, or load data. For more information please refer to our dedicated "[Data](https://www.amcharts.com/docs/v5/concepts/data/)" tutorial.
 
+### Flat data
+
+Hierarchy charts can handle "flat data" — data items in a single array that define their parent-child relations via IDs rather than `children`.
+
+There are two elements to using flat data:
+
+1.  `parentIdField` needs to be specified, so that Hierarchy knows which field to use in looking up for a parent ID.
+2.  Instead of `series.data.setAll()`, we need to use `series.setFlatData()`.
+
+let tree = root.container.children.push(am5hierarchy.Tree.new(root, {
+  valueField: "value",
+  categoryField: "name",
+  childDataField: "children",
+  idField: "id",
+  parentIdField: "parentId"
+}));
+
+tree.setFlatData(\[
+  { id: "root", name: "Root", value: 100 },
+  { id: "a",    name: "A",    value: 50,  parentId: "root" },
+  { id: "a1",   name: "A1",   value: 20,  parentId: "a" },
+  { id: "b",    name: "B",    value: 30,  parentId: "root" }
+\]);
+
+var tree = root.container.children.push(am5hierarchy.Tree.new(root, {
+  valueField: "value",
+  categoryField: "name",
+  childDataField: "children",
+  idField: "id",
+  parentIdField: "parentId"
+}));
+
+tree.setFlatData(\[
+  { id: "root", name: "Root", value: 100 },
+  { id: "a",    name: "A",    value: 50,  parentId: "root" },
+  { id: "a1",   name: "A1",   value: 20,  parentId: "a" },
+  { id: "b",    name: "B",    value: 30,  parentId: "root" }
+\]);
+
 ## Pre-selected branch
 
 In order for our chart to function properly, we need to tell series which node is currently selected.
@@ -406,15 +445,19 @@ var series = root.container.children.push(
   })
 );
 
+
 `topDepth: 0`  
 `initialDepth: 1`
 
+
 `topDepth: 0`  
 `initialDepth: 2`
 
+
 `topDepth: 0`  
 `initialDepth: 3`
 
+
 `topDepth: 1`  
 `initialDepth: 1`
 

package/extended/charts/map-chart/map-line-series.md

@@ -1,7 +1,7 @@
 ---
 title: "Map line series"
 source: "https://www.amcharts.com/docs/v5/charts/map-chart/map-line-series/"
-scraped: "2026-03-15"
+scraped: "2026-10-08"
 ---
 
 Map line series are used to plot projected lines on the map.
@@ -77,10 +77,84 @@ var lineSeries = chart.series.push(
   })
 );
 
+
 `lineType: "curved"` (default)
 
+
 `lineType: "straight"`
 
+### Altitude
+
+Lines can be raised above the ground, so they arc like a flight path or a trajectory. The `altitude` setting of a line sets how high, in metres, each leg of the line (from one point to the next) rises in its middle. Each leg lands on its points at both ends.
+
+lineSeries.mapLines.template.setAll({
+  altitude: 800000
+});
+
+lineSeries.mapLines.template.setAll({
+  altitude: 800000
+});
+
+For scale: `400000` is about the height of the International Space Station. On a globe, lines rise away from its surface. On flat maps they rise up the screen.
+
+Once `altitude` is set (even to `0`), the ends of each leg are placed at the height of the points they connect: the [altitude](https://www.amcharts.com/docs/v5/charts/map-chart/map-point-series/#Altitude) of points in `pointsToConnect`, or the third value of the coordinates in `geometry` (in metres, as in GeoJSON). Lines without `altitude` stay on the ground, whatever their coordinates hold.
+
+To give each line its own height, set it via data using [template fields](https://www.amcharts.com/docs/v5/concepts/settings/template-fields/):
+
+lineSeries.mapLines.template.set("templateField", "lineSettings");
+
+lineSeries.data.setAll(\[{
+  geometry: {
+    type: "LineString",
+    coordinates: \[
+      \[ -73.778137, 40.641312 \],
+      \[ -0.454296, 51.470020 \]
+    \]
+  },
+  lineSettings: {
+    altitude: 500000
+  }
+}, {
+  geometry: {
+    type: "LineString",
+    coordinates: \[
+      \[ -0.454296, 51.470020 \],
+      \[ 116.597504, 40.072498 \]
+    \]
+  },
+  lineSettings: {
+    altitude: 1200000
+  }
+}\]);
+
+lineSeries.mapLines.template.set("templateField", "lineSettings");
+
+lineSeries.data.setAll(\[{
+  geometry: {
+    type: "LineString",
+    coordinates: \[
+      \[ -73.778137, 40.641312 \],
+      \[ -0.454296, 51.470020 \]
+    \]
+  },
+  lineSettings: {
+    altitude: 500000
+  }
+}, {
+  geometry: {
+    type: "LineString",
+    coordinates: \[
+      \[ -0.454296, 51.470020 \],
+      \[ 116.597504, 40.072498 \]
+    \]
+  },
+  lineSettings: {
+    altitude: 1200000
+  }
+}\]);
+
+NOTE`altitude` is available since version 5.21.0. It has no effect on lines with `lineType: "straight"`.
+
 ## Data
 
 There is a number of ways to add data to series. Let's explore them.
@@ -367,6 +441,8 @@ If set to `true`, point bullet will be automatically rotated to the angle of the
 
 If set, this will be added to the angle calculated by `autoRotate`. Can be used to reverse the direction.
 
+If the line has an [altitude](#Altitude), the point rides along the arc at the line's height.
+
 The below example uses above code, albeit with the slightly more sophisticated image as a point bullet:
 
 ### Points on a line via data (5.20.6)
@@ -440,7 +516,7 @@ NOTE This matters when the chart is [serialized](https://www.amcharts.com/docs/v
 
 #### Animating a point along a line (5.20.8)
 
-To make a point travel along its line, give the bullet's sprite an [`animations`](https://www.amcharts.com/docs/v5/concepts/animations/) entry with `target: "dataItem"` that animates `positionOnLine`. Unlike a `dataItem.animate()` call in code, this is part of the config, so it survives serialization.
+To make a point travel along its line, give the bullet's sprite an [`animations`](https://www.amcharts.com/docs/v5/concepts/animations/) entry with `target: "dataItem"` that animates `positionOnLine`. Unlike a `dataItem.animate()` call in code, this is part of the config, so it survives serialization. (Since 5.21.0 `ChartSerializer` also writes a never-ending `dataItem.animate()` loop with a named easing as such an entry on the series' bullet - see "[Chart serializer](https://www.amcharts.com/docs/v5/concepts/serializing/chart-serializer/)" - but declaring it is the more direct way.)
 
 ```javascript
 var planeSeries = chart.series.push(

package/extended/charts/map-chart/map-pan-zoom.md

@@ -1,7 +1,7 @@
 ---
 title: "Panning and zooming the map"
 source: "https://www.amcharts.com/docs/v5/charts/map-chart/map-pan-zoom/"
-scraped: "2026-03-15"
+scraped: "2026-10-08"
 ---
 
 This tutorial looks at all the ways we can configure map panning and zooming.
@@ -105,7 +105,37 @@ chart.zoomToGeoPoint({ longitude: 10, latitude: 52 }, 3.5);
 
 ### Zooming to clicked object
 
-We can also add a `click` event to map polygons to zoom in on them automatically, by using map polygon series' method `zoomToDataItem()`:
+To zoom the map to a polygon when it is clicked, set polygon series' `clickZoom` setting to `true`:
+
+let polygonSeries = chart.series.push(
+  am5map.MapPolygonSeries.new(root, {
+    geoJSON: am5geodata\_worldLow,
+    clickZoom: true
+  })
+);
+
+var polygonSeries = chart.series.push(
+  am5map.MapPolygonSeries.new(root, {
+    geoJSON: am5geodata\_worldLow,
+    clickZoom: true
+  })
+);
+
+Clicking the same polygon again, or the map's background, zooms back to the [home position](#Initial_position_and_zoom). On a rotating map, such as a globe, the map also turns to bring the polygon to the center.
+
+The polygon zoomed to is set as active, so we can highlight it with an "active" [state](https://www.amcharts.com/docs/v5/concepts/settings/states/):
+
+polygonSeries.mapPolygons.template.states.create("active", {
+  fill: am5.color(0x297373)
+});
+
+polygonSeries.mapPolygons.template.states.create("active", {
+  fill: am5.color(0x297373)
+});
+
+NOTE`clickZoom` is available since version 5.21.0.
+
+For custom behavior, we can instead add a `click` event to map polygons, and zoom in on them by using map polygon series' method `zoomToDataItem()`:
 
 polygonSeries.mapPolygons.template.events.on("click", function(ev) {
   polygonSeries.zoomToDataItem(ev.target.dataItem);
@@ -366,6 +396,86 @@ var chart = root.container.children.push(
   })
 );
 
+## Double-click zoom
+
+Double-clicking will zoom in the map centered on the pointer's position.
+
+Double-clicking while holding SHIFT key down, will zoom out.
+
+To disable this behavior, set Map chart's setting `doubleClickZoom: false`.
+
+let chart = root.container.children.push(
+  am5map.MapChart.new(root, {
+    panX: "rotateX",
+    doubleClickZoom: false
+  })
+);
+
+var chart = root.container.children.push(
+  am5map.MapChart.new(root, {
+    panX: "rotateX",
+    doubleClickZoom: false
+  })
+);
+
+## Box-selection zoom
+
+To enable zooming by selecting a box on the map, use `boxZoom` setting (default: `"none"`).
+
+The following `boxZoom` values are available:
+
+Value
+
+Comment
+
+`"none"`
+
+Box-zoom is disabled (default).
+
+`"drag"`
+
+Select by pushing down on the map area and dragging.  
+  
+To use this option, `panX` and `panY` should be set to `"none"`.
+
+`"shift"`
+
+Box-select will be active when SHIFT key is down.
+
+`"ctrl"`
+
+Box-select will be active when CTRL key is down.
+
+`"alt"`
+
+Box-select will be active when ALT key is down.
+
+let chart = root.container.children.push(
+  am5map.MapChart.new(root, {
+    panX: "rotateX",
+    boxZoom: "shift"
+  })
+);
+
+var chart = root.container.children.push(
+  am5map.MapChart.new(root, {
+    panX: "rotateX",
+    boxZoom: "shift"
+  })
+);
+
+To configure the box rectangle, use Map chart's `boxZoomSelection` property which is an instance of `Rectangle`:
+
+chart.boxZoomSelection.setAll({
+  fill: am5.color(0xff0000),
+  fillOpacity: 0.2
+});
+
+chart.boxZoomSelection.setAll({
+  fill: am5.color(0xff0000),
+  fillOpacity: 0.2
+});
+
 ## Panning outside viewport
 
 Chart will restrict how far outside its viewport map can be dragged out.
@@ -392,10 +502,13 @@ var chart = root.container.children.push(
   })
 );
 
+
 `maxPanout: 0.4` (default)
 
+
 `maxPanout: 1`
 
+
 `maxPanout: 0`
 
 NOTE `maxPanOut` is not relevant if pan settings are set to rotate the map, rather than move it.
@@ -408,37 +521,27 @@ Map chart has two options for setting its initial/default position and zoom leve
 
 We can use those to set those to center around some latitude/longitude coordinates and zoom in automatically on start.
 
-The following will position and zoom in the map to focus on Europe:
+To have the map go to this home position once it loads, set `autoHome: true`. The following will position and zoom in the map to focus on Europe:
 
 let chart = root.container.children.push(
   am5map.MapChart.new(root, {
     homeZoomLevel: 3.5,
-    homeGeoPoint: { longitude: 10, latitude: 52 }
+    homeGeoPoint: { longitude: 10, latitude: 52 },
+    autoHome: true
   })
 );
 
-// We need at least one PolygonSeries created before map can zoom
-// ...
-
-polygonSeries.events.on("datavalidated", function() {
-  chart.goHome();
-});
-
 var chart = root.container.children.push(
   am5map.MapChart.new(root, {
     homeZoomLevel: 3.5,
-    homeGeoPoint: { longitude: 10, latitude: 52 }
+    homeGeoPoint: { longitude: 10, latitude: 52 },
+    autoHome: true
   })
 );
 
-// We need at least one PolygonSeries created before map can zoom
-// ...
+The move is animated if the chart has an animation duration set, e.g. by the Animated theme, and instant otherwise. Since it needs no code, it also works in [JSON configs](https://www.amcharts.com/docs/v5/concepts/serializing/).
 
-polygonSeries.events.on("datavalidated", function() {
-  chart.goHome();
-});
-
-NOTE Note the `goHome()` call in the code snippet above. It is required to make the chart respect `homeZoomLevel` and `homeGeoPoint` settings on first load. Please also note, that it needs to be called only when `MapPolygonSeries` has its data loaded, so that map has its bounds.
+NOTE`autoHome` is available since version 5.21.0. In earlier versions, call `chart.goHome()` in polygon series' `datavalidated` event instead.
 
 ### Initial rotation
 
@@ -472,7 +575,9 @@ chart.goHome();
 
 #### Via background click
 
-We can add `click` event to the chart's background and invoke `goHome()` method in it to zoom out the chart when user clicks on background (water):
+If polygon series has [`clickZoom`](#Zooming_to_clicked_object) enabled, clicking the background already zooms the map out.
+
+Otherwise, we can add `click` event to the chart's background and invoke `goHome()` method in it to zoom out the chart when user clicks on background (water):
 
 chart.chartContainer.get("background").events.on("click", function() {
   chart.goHome();