@amcharts/amcharts5-mcp 1.4.0 → 1.6.0

package/extended/examples/flow/vertical-sankey-diagram.md

@@ -2,7 +2,7 @@
 title: "Vertical Sankey Diagram"
 source: "https://www.amcharts.com/demos/vertical-sankey-diagram/"
 category: "flow"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Sankey diagram is a perfect chart to show the flow and relation between stages of a process. Horizontal orientation is more common for Sankey diagrams but with amCharts you can create vertical diagrams just as easily.
@@ -24,7 +24,9 @@ root.setThemes([am5themes_Animated.new(root)]);
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/flow-charts/
-var series = root.container.children.push(
+var chart = root.container.children.push(am5.SerialChartContainer.new(root, {}));
+
+var series = chart.series.push(
   am5flow.Sankey.new(root, {
     orientation: "vertical",
     sourceIdField: "from",
@@ -66,8 +68,7 @@ series.nodes.data.setAll([
     id: "Cash in the U.S.",
     fill: am5.color(0x00aea0),
     labelSettings: {
-      text: "CASH IN THE U.S.
-[bold]$460 BILLION",
+      text: "CASH IN THE U.S.\n[bold]$460 BILLION",
       forceHidden: false,
       centerY: am5.p100
     }
@@ -77,8 +78,7 @@ series.nodes.data.setAll([
     fill: am5.color(0x000000),
     labelSettings: {
       text:
-        "[#5ea9e1 fontSize:1.5em]CASH OVERSEAS
-[bold #5ea9e1 fontSize:1.5em]$1,31 TRILLION",
+        "[#5ea9e1 fontSize:1.5em]CASH OVERSEAS\n[bold #5ea9e1 fontSize:1.5em]$1,31 TRILLION",
       fill: am5.color(0xffffff),
       forceHidden: false,
       centerY: am5.p100
@@ -128,11 +128,7 @@ series.data.setAll([
     value: 1768,
     labelSettings: {
       text:
-        "[fontSize:1.5em]2016 BREAKDOWN OF
-THE U.S.CORPORATE CASH PILE
- 
-[/]NON-FINANCIAL COMPANIES 
- [bold]$1,768 Trillion[/]",
+        "[fontSize:1.5em]2016 BREAKDOWN OF\nTHE U.S.CORPORATE CASH PILE\n \n[/]NON-FINANCIAL COMPANIES \n [bold]$1,768 Trillion[/]",
       rotation: 0
     }
   },
@@ -141,15 +137,13 @@ THE U.S.CORPORATE CASH PILE
     from: "Total non financial companies",
     to: "Non-tech companies",
     value: 907,
-    labelSettings: { text: "NON-TECH COMPANIES
- [bold]$907 Billion[/]" }
+    labelSettings: { text: "NON-TECH COMPANIES\n [bold]$907 Billion[/]" }
   },
   {
     from: "Total non financial companies",
     to: "Tech companies",
     value: 861,
-    labelSettings: { text: "TECH COMPANIES
- [bold]861 Billion[/]" }
+    labelSettings: { text: "TECH COMPANIES\n [bold]861 Billion[/]" }
   },
 
   { from: "Non-tech companies", to: "Cash in the U.S.", value: 324 },
@@ -159,15 +153,13 @@ THE U.S.CORPORATE CASH PILE
     from: "Tech companies",
     to: "Rest of tech",
     value: 274,
-    labelSettings: { text: "REST OF TECH
-[bold]$274 Billion[/]" }
+    labelSettings: { text: "REST OF TECH\n[bold]$274 Billion[/]" }
   },
   {
     from: "Tech companies",
     to: "Top 5 tech companies",
     value: 587,
-    labelSettings: { text: "TOP 5 TECH COMPANIES
-[bold]$587 Billion[/]" }
+    labelSettings: { text: "TOP 5 TECH COMPANIES\n[bold]$587 Billion[/]" }
   },
 
   { from: "Rest of tech", to: "Cash in the U.S.", value: 74 },

package/extended/examples/funnel-pyramid/funnel-chart-with-rounded-corners.md

@@ -2,7 +2,7 @@
 title: "Funnel chart with rounded corners"
 source: "https://www.amcharts.com/demos/funnel-chart-with-rounded-corners/"
 category: "funnel-pyramid"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 ## JavaScript

package/extended/examples/funnel-pyramid/funnel-chart.md

@@ -2,7 +2,7 @@
 title: "Funnel Chart"
 source: "https://www.amcharts.com/demos/funnel-chart/"
 category: "funnel-pyramid"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Funnel Chart is used to display how the data is filtered down through the steps of some process or processes. Each step represents a portion of the total going through it. The top (head) of each step represents the incoming value and the bottom (neck) the output value after some sort of filtering.

package/extended/examples/funnel-pyramid/funnel-with-gradient-fill.md

@@ -2,7 +2,7 @@
 title: "Funnel with Gradient Fill"
 source: "https://www.amcharts.com/demos/funnel-with-gradient-fill/"
 category: "funnel-pyramid"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Gradients can enhance the visual appeal of chart and even create a faux 3D feel when needed. amCharts has the helpers to create advanced gradients.

package/extended/examples/funnel-pyramid/horizontal-funnel.md

@@ -2,7 +2,7 @@
 title: "Horizontal Funnel"
 source: "https://www.amcharts.com/demos/horizontal-funnel/"
 category: "funnel-pyramid"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Normally, Funnel charts are depicted vertically as a representation of actual physical funnels. Having said that, there's no reason why funnels can't be horizontal when a situation calls for it. It's very easy to achieve this with amCharts 5.

package/extended/examples/funnel-pyramid/horizontal-pictorial-chart.md

@@ -2,7 +2,7 @@
 title: "Horizontal Pictorial Chart"
 source: "https://www.amcharts.com/demos/horizontal-pictorial-chart/"
 category: "funnel-pyramid"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Pictorial charts use meaningful subject-related images to frame the values of the whole divided into segments comprising that whole. By default they are vertical but can be horizontal just as well.

package/extended/examples/funnel-pyramid/pictorial-chart.md

@@ -2,7 +2,7 @@
 title: "Pictorial Chart"
 source: "https://www.amcharts.com/demos/pictorial-chart/"
 category: "funnel-pyramid"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Sometimes you might want the picture you want to use for pictorial chart not to be filled completely from bottom to the top, like this one. Our PictorialStackedSeries has startLocation and endLocation properties which help to adjust start/end locations of the fills. Try to drag the slider to do it yourself.

package/extended/examples/funnel-pyramid/pictorial-fraction-chart.md

@@ -2,7 +2,7 @@
 title: "Pictorial Fraction Chart"
 source: "https://www.amcharts.com/demos/pictorial-fraction-chart/"
 category: "funnel-pyramid"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Pictorial fraction chart is a great way to visualize fractions of a whole using an image depicting that whole as a visual aid. For example, you can visually demonstrate the ingredients of a product using the product's image as a container.

package/extended/examples/funnel-pyramid/pictorial-stacked-chart.md

@@ -2,7 +2,7 @@
 title: "Pictorial Stacked Chart"
 source: "https://www.amcharts.com/demos/pictorial-stacked-chart/"
 category: "funnel-pyramid"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Pictorial Stacked Chart is a spiced up variation on a regular stacked bar or column chart. It uses a meaningful subject-related image to frame the values of the whole divided into segments comprising that whole.

package/extended/examples/funnel-pyramid/pyramid-chart.md

@@ -2,7 +2,7 @@
 title: "Pyramid Chart"
 source: "https://www.amcharts.com/demos/pyramid-chart/"
 category: "funnel-pyramid"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Pyramid Chart represents a single data series with values displayed as parts of a whole in a triangular shape. Due to its shape, it is often used to display hierarchically related data items. Conceptually, Pyramid chart is the inverse version of a Funnel chart.

package/extended/examples/gantt/editable-multilevel-gantt-chart.md

@@ -2,7 +2,7 @@
 title: "Editable Multilevel Gantt Chart"
 source: "https://www.amcharts.com/demos/editable-multilevel-gantt-chart/"
 category: "gantt"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Experience the power of an interactive, editable multilevel Gantt chart designed for modern project management. Add, edit, and reorder tasks effortlessly with intuitive drag-and-drop controls. Expand or collapse task hierarchies to keep complex projects organized and easy to navigate. Update progress, set dependencies, and adjust schedules in real time for seamless collaboration.

package/extended/examples/gantt/gantt-chart-dates.md

@@ -2,7 +2,7 @@
 title: "Editable Gantt Chart"
 source: "https://www.amcharts.com/demos/gantt-chart-dates/"
 category: "gantt"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Our Gantt chart is not just a static display of information — it’s a fully interactive editor. You can create new tasks, rearrange their order, and organize them into categories and subcategories. Build dependencies by drawing links between tasks, or add timeline markers simply by clicking on the X-axis.

package/extended/examples/gantt/gantt-chart-in-read-only-mode.md

@@ -2,7 +2,7 @@
 title: "Gantt chart in read-only mode"
 source: "https://www.amcharts.com/demos/gantt-chart-in-read-only-mode/"
 category: "gantt"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 This is a Gantt chart in read-only mode, where all interactions are disabled except for zooming and hovering over the columns. To enable editing, click the pencil icon in the top-right corner. Once editing is enabled, you can add or remove categories, move columns, and perform all the usual editing actions.

package/extended/examples/gantt/gantt-chart-playground.md

@@ -2,7 +2,7 @@
 title: "Gantt Chart Playground"
 source: "https://www.amcharts.com/demos/gantt-chart-playground/"
 category: "gantt"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Welcome to your interactive Gantt chart!
@@ -54,6 +54,9 @@ function saveGanttMarkedDates() {
 }
 
 var markedDates = [];
+var categoryData = [];
+var seriesData = [];
+
 const gantt_data = loadGanttData();
 
 if (gantt_data.categoryData) {
@@ -83,12 +86,10 @@ gantt.events.onDebounced("valueschanged", (ev) => {
 }, 500);
 
 gantt.events.on("datemarked", (ev) => {
-  console.log("Date marked: " + ev.date + " (" + new Date(ev.date) + ") in " + ev.dataItem.get(name));
   saveGanttMarkedDates();
 });
 
 gantt.events.on("dateunmarked", (ev) => {
-  console.log("Date unmarked: " + ev.date + " (" + new Date(ev.date) + ") in " + ev.dataItem.get(name));
   saveGanttMarkedDates();
 });
 

package/extended/examples/gantt/gantt-chart.md

@@ -2,7 +2,7 @@
 title: "Gantt Chart"
 source: "https://www.amcharts.com/demos/gantt-chart/"
 category: "gantt"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Built on the amCharts 5 engine, this Gantt chart library delivers powerful project-management capabilities right in your web app. It offers features such as:

package/extended/examples/gantt/gantt-with-hundreds-of-items.md

@@ -2,7 +2,7 @@
 title: "Gantt with hundreds of items"
 source: "https://www.amcharts.com/demos/gantt-with-hundreds-of-items/"
 category: "gantt"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Our Gantt chart is designed to handle hundreds of tasks efficiently. With a single click on the “Fit to View” button (top-right), the timeline automatically zooms so that all tasks in the current scope are visible at once. You can drag and drop tasks to rearrange them, toggle progress by clicking on the progress indicator, and add markers by clicking directly on the top axis. Tasks with hierarchies can be easily collapsed or expanded to reduce clutter and focus on the right level of detail.

package/extended/examples/gauges/angular-gauge-with-two-axes.md

@@ -2,7 +2,7 @@
 title: "Angular Gauge with Two Axes"
 source: "https://www.amcharts.com/demos/angular-gauge-with-two-axes/"
 category: "gauges"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Like most amCharts charts you can have multiple axes in Gauge charts as well. This also enables multiple independent clock hands pointing to values on different scales.

package/extended/examples/gauges/angular-gauge.md

@@ -2,7 +2,7 @@
 title: "Angular Gauge"
 source: "https://www.amcharts.com/demos/angular-gauge/"
 category: "gauges"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Angular Gauges (also known as Speedometer Chart) are most commonly used to mimic the real-life gauges to display values like volume, temperature, speed, etc.

package/extended/examples/gauges/animated-gauge.md

@@ -2,7 +2,7 @@
 title: "Animated Gauge"
 source: "https://www.amcharts.com/demos/animated-gauge/"
 category: "gauges"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Gauge charts are most useful for displaying live data. This demo shows such a chart in action.

package/extended/examples/gauges/clock-with-two-faces.md

@@ -2,7 +2,7 @@
 title: "Clock with Two Faces"
 source: "https://www.amcharts.com/demos/clock-with-two-faces/"
 category: "gauges"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 amCharts Radar Chart can be used for tasks beyond your common data visualization. In this case, we create a functioning clock with separate faces for hours/minutes and seconds.

package/extended/examples/gauges/clock.md

@@ -2,7 +2,7 @@
 title: "Clock"
 source: "https://www.amcharts.com/demos/clock/"
 category: "gauges"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 This demo showcases a creative use of the amCharts Gauge/Radar chart. amCharts core Charts package includes all the elements you need to create a functioning clock.

package/extended/examples/gauges/compass-chart.md

@@ -2,7 +2,7 @@
 title: "Compass Chart"
 source: "https://www.amcharts.com/demos/compass-chart/"
 category: "gauges"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 This multi-arrow RadarChart uses built-in animation routines to dynamically change start and end angles of the whole chart to imitate rotating of a compass dial.

package/extended/examples/gauges/gauge-with-bands.md

@@ -2,7 +2,7 @@
 title: "Gauge with Bands"
 source: "https://www.amcharts.com/demos/gauge-with-bands/"
 category: "gauges"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Gauge charts are great for representing where the value falls in a range. They are especially useful in a live data scenarios like in this demo. We can also add bands on the gauge to make the value even more readable at a glance.

package/extended/examples/gauges/gauge-with-gradient-fill.md

@@ -2,7 +2,7 @@
 title: "Gauge with Gradient Fill"
 source: "https://www.amcharts.com/demos/gauge-with-gradient-fill/"
 category: "gauges"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 It is very common for physical gauges to have a scale from safe to dangerous values, for example. This scale is usually accompanied with a gradient color band going from green to red. You can easily achieve the same with amCharts Gauge Chart.

package/extended/examples/gauges/multi-part-gauge.md

@@ -2,7 +2,7 @@
 title: "Multi-Part Gauge"
 source: "https://www.amcharts.com/demos/multi-part-gauge/"
 category: "gauges"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 You can use amCharts Gauge Chart to display multiple discreet values in one gauge. One way to do that is using multiple axes overlapping in a common space. The other is to have the parts occupy separate sections of the gauge.

package/extended/examples/gauges/solid-gauge.md

@@ -2,7 +2,7 @@
 title: "Solid Gauge"
 source: "https://www.amcharts.com/demos/solid-gauge/"
 category: "gauges"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Solid Gauge Chart is similar to the Angular Gauge Chart and is most commonly used to mimic real-world gauges. The main difference from the Angular Gauge Chart is that the values are displayed by a filled portion of a gauge scale rather than a hand of a mechanical-like gauge.

package/extended/examples/gauges/yes-and-no-gauge.md

@@ -2,7 +2,7 @@
 title: "Yes and No Gauge"
 source: "https://www.amcharts.com/demos/yes-and-no-gauge/"
 category: "gauges"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 This demo shows a binary yes/no gauge implemented with amCharts Gauge chart.

package/extended/examples/hierarchy/collapsible-force-directed-tree.md

@@ -2,7 +2,7 @@
 title: "Collapsible Force-Directed Tree"
 source: "https://www.amcharts.com/demos/collapsible-force-directed-tree/"
 category: "hierarchy"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Force Directed Tree is a special kind of chart used to display of multi-item data related in hierarchical, linear or mixed way, as a series of linked bubbles.
@@ -496,7 +496,7 @@ var data = {
 };
 
 // Create wrapper container
-var container = root.container.children.push(am5.Container.new(root, {
+var chart = root.container.children.push(am5.SerialChartContainer.new(root, {
   width: am5.percent(100),
   height: am5.percent(100),
   layout: root.verticalLayout
@@ -504,7 +504,7 @@ var container = root.container.children.push(am5.Container.new(root, {
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
-var series = container.children.push(am5hierarchy.ForceDirected.new(root, {
+var series = chart.series.push(am5hierarchy.ForceDirected.new(root, {
   singleBranchOnly: false,
   downDepth: 2,
   topDepth: 1,

package/extended/examples/hierarchy/drill-down-sunburst-chart.md

@@ -2,10 +2,10 @@
 title: "Drill-Down Sunburst Chart"
 source: "https://www.amcharts.com/demos/drill-down-sunburst-chart/"
 category: "hierarchy"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
-Sunburst Chart or Diagram represents hierarchical relational data in a circular chart. It looks similar to nested donut charts, however, the hierarchical nature of the Sunburst means that each level represents detalization of the previous one. In other words, children slices on each level comprise the whole of the parent slice. 
+Sunburst Chart or Diagram represents hierarchical relational data in a circular chart. It looks similar to nested donut charts, however, the hierarchical nature of the Sunburst means that each level represents detalization of the previous one. In other words, children slices on each level comprise the whole of the parent slice.
 The amCharts Sunburst chart supports drilling down right out of the box with no additional configuration needed. Clicking on any value with children will drill the chart down to this value in the center and its children on the outside.
 Key implementation details
 Sunburst chart is part of the hierarchy module of the amCharts Charts package. To create a Sunburst chart we add a Container to the page and then push a new Sunburst object into it. Then we just configure categoryField, valueField, and childDataField on the Sunburst.
@@ -28,7 +28,7 @@ root.setThemes([
 
 
 // Create wrapper container
-var container = root.container.children.push(am5.Container.new(root, {
+var chart = root.container.children.push(am5.SerialChartContainer.new(root, {
   width: am5.percent(100),
   height: am5.percent(100),
   layout: root.verticalLayout
@@ -37,7 +37,7 @@ var container = root.container.children.push(am5.Container.new(root, {
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
-var series = container.children.push(am5hierarchy.Sunburst.new(root, {
+var series = chart.series.push(am5hierarchy.Sunburst.new(root, {
   singleBranchOnly: true,
   downDepth: 10,
   initialDepth: 10,

package/extended/examples/hierarchy/drill-down-treemap.md

@@ -2,7 +2,7 @@
 title: "Drill-Down Treemap"
 source: "https://www.amcharts.com/demos/drill-down-treemap/"
 category: "hierarchy"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Drill-Down Treemap is a great way to cleanly display high-level information without losing the ability to analyze the underlying details. Try clicking on one of the squares to see the sales of different models of that brand. You can also compare this demo to the multi-level treemap demo where the same data is displayed in full detail from the get-go.
@@ -45,8 +45,8 @@ root.setThemes([
 ]);
 
 // Create wrapper container
-var container = root.container.children.push(
-  am5.Container.new(root, {
+var chart = root.container.children.push(
+  am5.SerialChartContainer.new(root, {
     width: am5.percent(100),
     height: am5.percent(100),
     layout: root.verticalLayout
@@ -55,7 +55,7 @@ var container = root.container.children.push(
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
-var series = container.children.push(
+var series = chart.series.push(
   am5hierarchy.Treemap.new(root, {
     sort: "descending",
     singleBranchOnly: false,
@@ -73,7 +73,7 @@ series.nodes.template.setPrivate("trustBounds", true);
 series.get("colors").set("step", 1);
 
 
-container.children.moveValue(
+chart.children.moveValue(
   am5hierarchy.BreadcrumbBar.new(root, {
     series: series
   }), 0

package/extended/examples/hierarchy/dynamic-data-updates-on-treemap.md

@@ -2,7 +2,7 @@
 title: "Dynamic Data Updates on Treemap"
 source: "https://www.amcharts.com/demos/dynamic-data-updates-on-treemap/"
 category: "hierarchy"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Updating data in real-time is one of the key use-cases for interactive dynamic data visualizations. Animating to the new values leads the viewer's attention and makes those updates much more readable. amCharts has all the tools to make this process completely seamless.
@@ -33,8 +33,8 @@ root.setThemes([
 
 
 // Create wrapper container
-var container = root.container.children.push(
-  am5.Container.new(root, {
+var chart = root.container.children.push(
+  am5.SerialChartContainer.new(root, {
     width: am5.percent(100),
     height: am5.percent(100),
     layout: root.verticalLayout
@@ -43,7 +43,7 @@ var container = root.container.children.push(
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
-var series = container.children.push(
+var series = chart.series.push(
   am5hierarchy.Treemap.new(root, {
     singleBranchOnly: false,
     sort: "descending",

package/extended/examples/hierarchy/force-directed-adding-links.md

@@ -2,7 +2,7 @@
 title: "Force-Directed Adding Links"
 source: "https://www.amcharts.com/demos/force-directed-adding-links/"
 category: "hierarchy"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Not only can you use amCharts 5 to create amazing force-directed network visuals but you can also use the library as a UI to let users set those links in an engaging visual manner. Try clicking on a node and then click other nodes to link with it.
@@ -36,8 +36,8 @@ for (var i = 0; i < 15; i++) {
 }
 
 // Create wrapper container
-var container = root.container.children.push(
-  am5.Container.new(root, {
+var chart = root.container.children.push(
+  am5.SerialChartContainer.new(root, {
     width: am5.percent(100),
     height: am5.percent(100),
     layout: root.verticalLayout
@@ -46,7 +46,7 @@ var container = root.container.children.push(
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
-var series = container.children.push(
+var series = chart.series.push(
   am5hierarchy.ForceDirected.new(root, {
     singleBranchOnly: false,
     downDepth: 2,

package/extended/examples/hierarchy/force-directed-network.md

@@ -2,7 +2,7 @@
 title: "Force-Directed Network"
 source: "https://www.amcharts.com/demos/force-directed-network/"
 category: "hierarchy"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Force Directed Tree is a special kind of chart used to display of multi-item data related in hierarchical, linear or mixed way, as a series of linked bubbles.
@@ -115,8 +115,8 @@ var data = {
 };
 
 // Create wrapper container
-var container = root.container.children.push(
-  am5.Container.new(root, {
+var chart = root.container.children.push(
+  am5.SerialChartContainer.new(root, {
     width: am5.percent(100),
     height: am5.percent(100),
     layout: root.verticalLayout
@@ -125,7 +125,7 @@ var container = root.container.children.push(
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
-var series = container.children.push(
+var series = chart.series.push(
   am5hierarchy.ForceDirected.new(root, {
     singleBranchOnly: false,
     downDepth: 1,

package/extended/examples/hierarchy/force-directed-tree-with-animated-bullets.md

@@ -2,7 +2,7 @@
 title: "Force-Directed Tree with Animated Bullets"
 source: "https://www.amcharts.com/demos/force-directed-tree-with-animated-bullets/"
 category: "hierarchy"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 A force-directed chart is a visual tool used to depict networks by simulating physical forces on nodes (entities) and edges (connections) between them. Nodes repel each other while edges act like springs, pulling connected nodes closer. This simulation arranges the nodes in a layout that intuitively displays clusters and connections, simplifying the understanding of complex relationships.
@@ -25,22 +25,23 @@ root.setThemes([
 ]);
 
 
-var zoomableContainer = root.container.children.push(
-  am5.ZoomableContainer.new(root, {
+var chart = root.container.children.push(
+  am5.SerialChartContainer.new(root, {
     width: am5.p100,
-    height: am5.p100,
-    wheelable: true,
-    pinchZoom: true
+    height: am5.p100
   })
 );
 
-var zoomTools = zoomableContainer.children.push(am5.ZoomTools.new(root, {
-  target: zoomableContainer
-}));
+chart.zoomableContainer.setAll({
+  wheelable: true,
+  pinchZoom: true
+});
+
+var zoomTools = chart.set("zoomTools", am5.ZoomTools.new(root, {}));
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
-var series = zoomableContainer.contents.children.push(am5hierarchy.ForceDirected.new(root, {
+var series = chart.series.push(am5hierarchy.ForceDirected.new(root, {
   singleBranchOnly: false,
   downDepth: 1,
   initialDepth: 10,

package/extended/examples/hierarchy/force-directed-tree.md

@@ -2,7 +2,7 @@
 title: "Force-Directed Tree"
 source: "https://www.amcharts.com/demos/force-directed-tree/"
 category: "hierarchy"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Force Directed Tree is a special kind of chart used to display of multi-item data related in hierarchical, linear or mixed way, as a series of linked bubbles.
@@ -25,7 +25,7 @@ root.setThemes([
 
 
 // Create wrapper container
-var container = root.container.children.push(am5.Container.new(root, {
+var chart = root.container.children.push(am5.SerialChartContainer.new(root, {
   width: am5.percent(100),
   height: am5.percent(100),
   layout: root.verticalLayout
@@ -34,7 +34,7 @@ var container = root.container.children.push(am5.Container.new(root, {
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
-var series = container.children.push(am5hierarchy.ForceDirected.new(root, {
+var series = chart.series.push(am5hierarchy.ForceDirected.new(root, {
   singleBranchOnly: false,
   downDepth: 1,
   initialDepth: 2,