@amcharts/amcharts5-mcp 1.4.0 → 1.6.0

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

@@ -2,7 +2,7 @@
 title: "Animated Sankey Diagram"
 source: "https://www.amcharts.com/demos/animated-sankey-diagram/"
 category: "flow"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Besides being visually stunning, animations in data visualizations can help direct viewer's attention and communicate the key information.
@@ -23,253 +23,251 @@ var root = am5.Root.new("chartdiv");
 // Set themes
 // https://www.amcharts.com/docs/v5/concepts/themes/
 root.setThemes([
-  am5themes_Animated.new(root)
+	am5themes_Animated.new(root)
 ]);
 
+
+var serialChartContainer = root.container.children.push(
+	am5.SerialChartContainer.new(root, {
+		width: am5.percent(100),
+		height: am5.percent(100)
+	})
+);
+
 // Create series
 // https://www.amcharts.com/docs/v5/charts/flow-charts/
-var series = root.container.children.push(
-  am5flow.Sankey.new(root, {
-    orientation: "horizontal",
-    sourceIdField: "from",
-    targetIdField: "to",
-    valueField: "value"
-  })
+var series = serialChartContainer.series.push(
+	am5flow.Sankey.new(root, {
+		orientation: "horizontal",
+		sourceIdField: "from",
+		targetIdField: "to",
+		valueField: "value"
+	})
 );
 
 series.nodes.nodes.template.setAll({
-  toggleKey:"none",
-  cursorOverStyle:"default"
+	toggleKey: "none",
+	cursorOverStyle: "default"
 })
 
 series.nodes.rectangles.template.setAll({
-  fillOpacity: 0,
-  strokeOpacity: 0
+	fillOpacity: 0,
+	strokeOpacity: 0
 });
 
 series.links.template.setAll({
-  tooltipText: null,
-  templateField: "linkSettings",
-  fillOpacity: 1,
-  strokeOpacity: 1,
-  interactive: true
+	tooltipText: null,
+	templateField: "linkSettings",
+	fillOpacity: 1,
+	strokeOpacity: 1,
+	interactive: true
 });
 series.links.template.states.create("hover", {
-  fillOpacity: 1
+	fillOpacity: 1
 });
 series.nodes.labels.template.setAll({
-  forceHidden: true,
-  templateField: "labelSettings"
+	forceHidden: true,
+	templateField: "labelSettings"
 });
 
 series.nodes.data.setAll([
-  { id: "Source", fill: am5.color(0x3ba626) },
-  { id: "Total non financial companies", fill: am5.color(0x3ba626) },
-  { id: "Non-tech companies", fill: am5.color(0x3ba626) },
-  { id: "Tech companies", fill: am5.color(0x3ba626) },
-  {
-    id: "Cash in the U.S.",
-    fill: am5.color(0x26a660),
-    labelSettings: {
-      rotation: -90,
-      textAlign: "center",
-      text: "CASH IN THE U.S.
-[bold]$460 BILLION",
-      forceHidden: false,
-      centerY: am5.p100
-    }
-  },
-  {
-    id: "Cash Overseas",
-    fill: am5.color(0x000000),
-    labelSettings: {
-      rotation: -90,
-      textAlign: "center",
-      text:
-        "[#3ba626 fontSize:1.5em]CASH OVERSEAS
-[bold #3ba626 fontSize:1.5em]$1,31 TRILLION",
-      fill: am5.color(0xffffff),
-      forceHidden: false,
-      centerY: am5.p100
-    }
-  },
-  { id: "Rest of tech", fill: am5.color(0x3ba626) },
-  { id: "Top 5 tech companies", fill: am5.color(0x3ba626) },
-  { id: "Joytechs", fill: am5.color(0x3ba626) },
-  { id: "Fireex", fill: am5.color(0x3ba626) },
-  { id: "Globalworld", fill: am5.color(0x3ba626) },
-  { id: "Betagate", fill: am5.color(0x3ba626) },
-  { id: "Apexi", fill: am5.color(0x3ba626) }
+	{ id: "Source", fill: am5.color(0x3ba626) },
+	{ id: "Total non financial companies", fill: am5.color(0x3ba626) },
+	{ id: "Non-tech companies", fill: am5.color(0x3ba626) },
+	{ id: "Tech companies", fill: am5.color(0x3ba626) },
+	{
+		id: "Cash in the U.S.",
+		fill: am5.color(0x26a660),
+		labelSettings: {
+			rotation: -90,
+			textAlign: "center",
+			text: "CASH IN THE U.S.\n[bold]$460 BILLION",
+			forceHidden: false,
+			centerY: am5.p100
+		}
+	},
+	{
+		id: "Cash Overseas",
+		fill: am5.color(0x000000),
+		labelSettings: {
+			rotation: -90,
+			textAlign: "center",
+			text:
+				"[#3ba626 fontSize:1.5em]CASH OVERSEAS\n[bold #3ba626 fontSize:1.5em]$1,31 TRILLION",
+			fill: am5.color(0xffffff),
+			forceHidden: false,
+			centerY: am5.p100
+		}
+	},
+	{ id: "Rest of tech", fill: am5.color(0x3ba626) },
+	{ id: "Top 5 tech companies", fill: am5.color(0x3ba626) },
+	{ id: "Joytechs", fill: am5.color(0x3ba626) },
+	{ id: "Fireex", fill: am5.color(0x3ba626) },
+	{ id: "Globalworld", fill: am5.color(0x3ba626) },
+	{ id: "Betagate", fill: am5.color(0x3ba626) },
+	{ id: "Apexi", fill: am5.color(0x3ba626) }
 ]);
 
 series.bullets.push(function () {
-  return am5.Bullet.new(root, {
-    locationX: 0.5,
-    sprite: am5.Label.new(root, {
-      templateField: "labelSettings",
-      textAlign: "center",
-      centerY: am5.p50,
-      paddingTop: 0,
-      paddingBottom: 0
-    })
-  });
+	return am5.Bullet.new(root, {
+		locationX: 0.5,
+		sprite: am5.Label.new(root, {
+			templateField: "labelSettings",
+			textAlign: "center",
+			centerY: am5.p50,
+			paddingTop: 0,
+			paddingBottom: 0
+		})
+	});
 });
 
 series.bullets.push(function () {
-  return am5.Bullet.new(root, {
-    locationX: 1,
-    sprite: am5.Label.new(root, {
-      templateField: "labelSettings2",
-      centerY: am5.p50,
-      paddingTop: 0,
-      paddingBottom: 0
-    })
-  });
+	return am5.Bullet.new(root, {
+		locationX: 1,
+		sprite: am5.Label.new(root, {
+			templateField: "labelSettings2",
+			centerY: am5.p50,
+			paddingTop: 0,
+			paddingBottom: 0
+		})
+	});
 });
 
 series.bullets.push(function (root, series, dataItem) {
-  var label = am5.Label.new(root, {
-    text: "${value}B",
-    populateText: true,
-    centerX: am5.p50,
-    fill: am5.color(0xffffff),
-    opacity: 0.2,
-    fontSize: dataItem.get("value") / 10
-  });
-  var bullet = am5.Bullet.new(root, {
-    locationX: 0,
-    sprite: label,
-    autoRotate: true
-  });
+	var label = am5.Label.new(root, {
+		text: "${value}B",
+		populateText: true,
+		centerX: am5.p50,
+		fill: am5.color(0xffffff),
+		opacity: 0.2,
+		fontSize: dataItem.get("value") / 10
+	});
+	var bullet = am5.Bullet.new(root, {
+		locationX: 0,
+		sprite: label,
+		autoRotate: true
+	});
 
-  label.adapters.add("opacity", function (opacity) {
-    return 0.5 - Math.abs(0.5 - bullet.get("locationX"));
-  });
+	label.adapters.add("opacity", function (opacity) {
+		return 0.5 - Math.abs(0.5 - bullet.get("locationX"));
+	});
 
-  bullet.animate({
-    key: "locationX",
-    from: 0,
-    to: 1,
-    duration: Math.random() * 10000 + 2000,
-    loops: Infinity
-  });
-  bullet.on("locationX", function () {
-    label.set("opacity", label.get("opacity"));
-  });
+	bullet.animate({
+		key: "locationX",
+		from: 0,
+		to: 1,
+		duration: Math.random() * 10000 + 2000,
+		loops: Infinity
+	});
+	bullet.on("locationX", function () {
+		label.set("opacity", label.get("opacity"));
+	});
 
-  return bullet;
+	return bullet;
 });
 
 // Set data
 // https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
 series.data.setAll([
-  {
-    from: "Source",
-    to: "Total non financial companies",
-    value: 1768,
-    labelSettings: {
-      text:
-        "[fontSize:1.5em]2016 BREAKDOWN OF
-THE U.S.CORPORATE CASH PILE
- 
-[/]NON-FINANCIAL COMPANIES 
- [bold]$1,768 TRILLION[/]",
-      rotation: 0
-    }
-  },
+	{
+		from: "Source",
+		to: "Total non financial companies",
+		value: 1768,
+		labelSettings: {
+			text:
+				"[fontSize:1.5em]2016 BREAKDOWN OF\nTHE U.S.CORPORATE CASH PILE\n \n[/]NON-FINANCIAL COMPANIES \n [bold]$1,768 TRILLION[/]",
+			rotation: 0
+		}
+	},
 
-  {
-    from: "Total non financial companies",
-    to: "Non-tech companies",
-    value: 907,
-    labelSettings: { text: "NON-TECH COMPANIES
- [bold]$907 BILLION[/]" }
-  },
-  {
-    from: "Total non financial companies",
-    to: "Tech companies",
-    value: 861,
-    labelSettings: { text: "TECH COMPANIES
- [bold]861 BILLION[/]" }
-  },
+	{
+		from: "Total non financial companies",
+		to: "Non-tech companies",
+		value: 907,
+		labelSettings: { text: "NON-TECH COMPANIES\n [bold]$907 BILLION[/]" }
+	},
+	{
+		from: "Total non financial companies",
+		to: "Tech companies",
+		value: 861,
+		labelSettings: { text: "TECH COMPANIES\n [bold]861 BILLION[/]" }
+	},
 
-  { from: "Non-tech companies", to: "Cash in the U.S.", value: 324 },
-  { from: "Non-tech companies", to: "Cash Overseas", value: 584 },
+	{ from: "Non-tech companies", to: "Cash in the U.S.", value: 324 },
+	{ from: "Non-tech companies", to: "Cash Overseas", value: 584 },
 
-  {
-    from: "Tech companies",
-    to: "Rest of tech",
-    value: 274,
-    labelSettings: { text: "REST OF TECH
-[bold]$274 BILLION[/]" }
-  },
-  {
-    from: "Tech companies",
-    to: "Top 5 tech companies",
-    value: 587,
-    labelSettings: { text: "TOP 5 TECH COMPANIES
-[bold]$587 BILLION[/]" }
-  },
+	{
+		from: "Tech companies",
+		to: "Rest of tech",
+		value: 274,
+		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\n[bold]$587 BILLION[/]" }
+	},
 
-  { from: "Rest of tech", to: "Cash in the U.S.", value: 74 },
-  { from: "Rest of tech", to: "Cash Overseas", value: 200 },
+	{ from: "Rest of tech", to: "Cash in the U.S.", value: 74 },
+	{ from: "Rest of tech", to: "Cash Overseas", value: 200 },
 
-  {
-    from: "Top 5 tech companies",
-    to: "Joytechs",
-    value: 67,
-    labelSettings2: {
-      dx: 60,
-      centerX: am5.p100,
-      text: "JOYTECHS [bold]$67[/]B"
-    }
-  },
-  { from: "Joytechs", to: "Cash in the U.S.", value: 10 },
-  { from: "Joytechs", to: "Cash Overseas", value: 57 },
+	{
+		from: "Top 5 tech companies",
+		to: "Joytechs",
+		value: 67,
+		labelSettings2: {
+			dx: 60,
+			centerX: am5.p100,
+			text: "JOYTECHS [bold]$67[/]B"
+		}
+	},
+	{ from: "Joytechs", to: "Cash in the U.S.", value: 10 },
+	{ from: "Joytechs", to: "Cash Overseas", value: 57 },
 
-  {
-    from: "Top 5 tech companies",
-    to: "Fireex",
-    value: 68,
-    labelSettings2: { dx: 60, centerX: am5.p100, text: "FIREEX [bold]$68[/]B" }
-  },
-  { from: "Fireex", to: "Cash in the U.S.", value: 8 },
-  { from: "Fireex", to: "Cash Overseas", value: 60 },
+	{
+		from: "Top 5 tech companies",
+		to: "Fireex",
+		value: 68,
+		labelSettings2: { dx: 60, centerX: am5.p100, text: "FIREEX [bold]$68[/]B" }
+	},
+	{ from: "Fireex", to: "Cash in the U.S.", value: 8 },
+	{ from: "Fireex", to: "Cash Overseas", value: 60 },
 
-  {
-    from: "Top 5 tech companies",
-    to: "Globalworld",
-    value: 85,
-    labelSettings2: {
-      dx: 60,
-      centerX: am5.p100,
-      text: "GLOBALWORLD [bold]$85[/]B"
-    }
-  },
-  { from: "Globalworld", to: "Cash in the U.S.", value: 10 },
-  { from: "Globalworld", to: "Cash Overseas", value: 75 },
+	{
+		from: "Top 5 tech companies",
+		to: "Globalworld",
+		value: 85,
+		labelSettings2: {
+			dx: 60,
+			centerX: am5.p100,
+			text: "GLOBALWORLD [bold]$85[/]B"
+		}
+	},
+	{ from: "Globalworld", to: "Cash in the U.S.", value: 10 },
+	{ from: "Globalworld", to: "Cash Overseas", value: 75 },
 
-  {
-    from: "Top 5 tech companies",
-    to: "Betagate",
-    value: 115,
-    labelSettings2: {
-      dx: 60,
-      centerX: am5.p100,
-      text: "BETAGATE [bold]$115[/]B"
-    }
-  },
-  { from: "Betagate", to: "Cash in the U.S.", value: 10 },
-  { from: "Betagate", to: "Cash Overseas", value: 105 },
+	{
+		from: "Top 5 tech companies",
+		to: "Betagate",
+		value: 115,
+		labelSettings2: {
+			dx: 60,
+			centerX: am5.p100,
+			text: "BETAGATE [bold]$115[/]B"
+		}
+	},
+	{ from: "Betagate", to: "Cash in the U.S.", value: 10 },
+	{ from: "Betagate", to: "Cash Overseas", value: 105 },
 
-  {
-    from: "Top 5 tech companies",
-    to: "Apexi",
-    value: 253,
-    labelSettings2: { dx: 60, centerX: am5.p100, text: "APEXI [bold]$253[/]B" }
-  },
-  { from: "Apexi", to: "Cash in the U.S.", value: 23 },
-  { from: "Apexi", to: "Cash Overseas", value: 230 }
+	{
+		from: "Top 5 tech companies",
+		to: "Apexi",
+		value: 253,
+		labelSettings2: { dx: 60, centerX: am5.p100, text: "APEXI [bold]$253[/]B" }
+	},
+	{ from: "Apexi", to: "Cash in the U.S.", value: 23 },
+	{ from: "Apexi", to: "Cash Overseas", value: 230 }
 ]);
 
 // Make stuff animate on load

package/extended/examples/flow/chord-diagram-with-animated-bullets.md

@@ -2,7 +2,7 @@
 title: "Chord Diagram with Animated Bullets"
 source: "https://www.amcharts.com/demos/chord-diagram-with-animated-bullets/"
 category: "flow"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Animations help direct viewer's attention and, in the case of the directed chord diagram, emphasize the direction of the data flow.
@@ -26,7 +26,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.ChordDirected.new(root, {
     sourceIdField: "from",
     targetIdField: "to",

package/extended/examples/flow/chord-diagram.md

@@ -2,11 +2,11 @@
 title: "Chord Diagram"
 source: "https://www.amcharts.com/demos/chord-diagram/"
 category: "flow"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
-Chord Diagrams (also known as Radial network diagram, Chord layout, Dependency wheel) help us visualize relationships between data arranged beautifully in a circle. You can use Chord Diagrams to visualize data ranging from relationships between Lost characters to Uber rides between neighborhoods in a city to complex scientific subjects that are even hard to pronounce.
-amCharts 5 includes powerful tools to create your own interactive Chord diagrams and other Flow charts.
+Chord Diagrams (also known as Radial network diagram, Chord layout, Dependency wheel) help us visualize relationships between data arranged beautifully in a circle. You can use Chord Diagrams to visualize data ranging from relationships between Lost characters to Uber rides between neighborhoods in a city to complex scientific subjects that are even hard to pronounce.
+amCharts 5 includes powerful tools to create your own interactive Chord diagrams and other Flow charts.
 [Flow chart docs](https://www.amcharts.com/docs/v5/charts/flow-charts/)
 
 ## JavaScript
@@ -26,7 +26,9 @@ root.setThemes([
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/flow-charts/
-var series = root.container.children.push(am5flow.Chord.new(root, {
+var chart = root.container.children.push(am5.SerialChartContainer.new(root, {}));
+
+var series = chart.series.push(am5flow.Chord.new(root, {
   sourceIdField: "source",
   targetIdField: "target",
   valueField: "value"

package/extended/examples/flow/horizontal-arc-diagram.md

@@ -2,7 +2,7 @@
 title: "Horizontal Arc Diagram"
 source: "https://www.amcharts.com/demos/horizontal-arc-diagram/"
 category: "flow"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 An arc diagram is a data visualization technique that represents relationships between entities. It consists of a series of arcs or lines connecting the entities. Arc diagrams are often used to visualize social networks, genealogical relationships, or connections between elements in a complex system. By displaying the connections in a visually intuitive way, arc diagrams help uncover patterns and insights within the data, facilitating analysis and understanding.
@@ -26,7 +26,9 @@ root.setThemes([
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/flow-charts/arc-diagram/
-var series = root.container.children.push(am5flow.ArcDiagram.new(root, {
+var chart = root.container.children.push(am5.SerialChartContainer.new(root, {}));
+
+var series = chart.series.push(am5flow.ArcDiagram.new(root, {
   sourceIdField: "from",
   targetIdField: "to",
   valueField: "value",

package/extended/examples/flow/non-ribbon-chord-diagram.md

@@ -2,11 +2,11 @@
 title: "Non-Ribbon Chord diagram"
 source: "https://www.amcharts.com/demos/non-ribbon-chord-diagram/"
 category: "flow"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
-Compared to traditional Chord diagrams, Non-ribbon chord diagrams emphasize the connections between data points rather than additional properties of those connections.
-amCharts 5 includes powerful tools to create your own interactive Chord diagrams and other Flow charts.
+Compared to traditional Chord diagrams, Non-ribbon chord diagrams emphasize the connections between data points rather than additional properties of those connections.
+amCharts 5 includes powerful tools to create your own interactive Chord diagrams and other Flow charts.
 [Flow chart docs](https://www.amcharts.com/docs/v5/charts/flow-charts/)
 
 ## JavaScript
@@ -26,7 +26,9 @@ root.setThemes([
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/flow-charts/
-var series = root.container.children.push(am5flow.ChordNonRibbon.new(root, {
+var chart = root.container.children.push(am5.SerialChartContainer.new(root, {}));
+
+var series = chart.series.push(am5flow.ChordNonRibbon.new(root, {
   sourceIdField: "from",
   targetIdField: "to",
   valueField: "value"

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

@@ -2,7 +2,7 @@
 title: "Sankey Diagram"
 source: "https://www.amcharts.com/demos/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.
@@ -27,7 +27,9 @@ root.setThemes([
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/flow-charts/
-var series = root.container.children.push(am5flow.Sankey.new(root, {
+var chart = root.container.children.push(am5.SerialChartContainer.new(root, {}));
+
+var series = chart.series.push(am5flow.Sankey.new(root, {
   sourceIdField: "from",
   targetIdField: "to",
   valueField: "value",

package/extended/examples/flow/toggleable-chord-diagram.md

@@ -2,7 +2,7 @@
 title: "Directed Chord Diagram"
 source: "https://www.amcharts.com/demos/toggleable-chord-diagram/"
 category: "flow"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 A Directed Chord Diagram is a specialized type of data visualization that represents directed relationships or flows between different entities or categories. It combines the elements of chord diagrams and flow diagrams to show the connections and directional flow between pairs of items. The diagram consists of arcs or chords that connect the entities, with the width or thickness of the arc indicating the strength or intensity of the relationship. The direction of the flow is represented by arrows along the chords. Directed Chord Diagrams are commonly used to visualize complex systems, such as migration patterns, trade flows, or communication networks, where understanding the directional relationships is crucial. They provide a clear and comprehensive representation of the flow and directionality of interactions between various entities, facilitating analysis and insights into the data.
@@ -26,7 +26,9 @@ root.setThemes([
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/flow-charts/
-var series = root.container.children.push(am5flow.ChordDirected.new(root, {
+var chart = root.container.children.push(am5.SerialChartContainer.new(root, {}));
+
+var series = chart.series.push(am5flow.ChordDirected.new(root, {
   startAngle: 80,
   padAngle: 1,
   linkHeadRadius: undefined,

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

@@ -2,7 +2,7 @@
 title: "Traceable Sankey Diagram"
 source: "https://www.amcharts.com/demos/traceable-sankey-diagram/"
 category: "flow"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Traceable Sankey Diagram is a specific version of the regular Sankey Diagram enabling viewers to see the whole path of some data by hovering over the chart.
@@ -22,7 +22,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, {
     sourceIdField: "from",
     targetIdField: "to",

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

@@ -2,7 +2,7 @@
 title: "Vertical Arc Diagram"
 source: "https://www.amcharts.com/demos/vertical-arc-diagram/"
 category: "flow"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 An arc diagram is a powerful visual representation that depicts relationships and connections between entities. It employs curved lines or arcs to illustrate these connections. Arc diagrams are extensively used in various fields, such as network analysis, biology, and information visualization. By presenting complex relationships in a simplified and intuitive manner, arc diagrams enable researchers and analysts to identify patterns, explore interdependencies, and gain valuable insights from the data at hand.
@@ -26,7 +26,9 @@ root.setThemes([
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/flow-charts/arc-diagram/
-var series = root.container.children.push(am5flow.ArcDiagram.new(root, {
+var chart = root.container.children.push(am5.SerialChartContainer.new(root, {}));
+
+var series = chart.series.push(am5flow.ArcDiagram.new(root, {
   sourceIdField: "from",
   targetIdField: "to",
   valueField: "value",