@amcharts/amcharts5-mcp 1.4.0 → 1.6.0

package/extended/examples/column-bar/real-time-data-sorting.md

@@ -2,7 +2,7 @@
 title: "Real-time Data Sorting"
 source: "https://www.amcharts.com/demos/real-time-data-sorting/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Sorting a column or bar chart by column's value is a common scenario that is easily implemented by sorting the underlying data beforehand. But what if data is constantly updated? This demo shows an approach to solving the real-time sorting problem that is both functional and visually appealing.
@@ -75,7 +75,9 @@ var series = chart.series.push(am5xy.ColumnSeries.new(root, {
   xAxis: xAxis,
   yAxis: yAxis,
   valueYField: "value",
-  categoryXField: "country"
+  categoryXField: "country",
+  // Each column takes its own color from the series palette
+  colorByDataItem: true
 }));
 
 // Rounded corners for columns
@@ -85,15 +87,6 @@ series.columns.template.setAll({
   strokeOpacity: 0
 });
 
-// Make each column to be of a different color
-series.columns.template.adapters.add("fill", function (fill, target) {
-  return chart.get("colors").getIndex(series.columns.indexOf(target));
-});
-
-series.columns.template.adapters.add("stroke", function (stroke, target) {
-  return chart.get("colors").getIndex(series.columns.indexOf(target));
-});
-
 // Add Label bullet
 series.bullets.push(function () {
   return am5.Bullet.new(root, {

package/extended/examples/column-bar/risk-heatmap.md

@@ -2,17 +2,17 @@
 title: "Risk Heatmap"
 source: "https://www.amcharts.com/demos/risk-heatmap/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
-Two-dimensional category axes
-Both axes on this chart is a category axis. This allows placing columns precisely as squares.
-[More about category axes](https://www.amcharts.com/docs/v5/charts/xy-chart/axes/category-axis/)
-Data-aware bullets
-Bullets inside squares are bullets. Labels inside bullets are bound to the actual values in data.
-[More about bullets](https://www.amcharts.com/docs/v5/concepts/common-elements/bullets/)
-Heat rules
-Heat rules allow modifying element's properties based on its related value in data. Those are not limited to colors. Any quantifiable value can be used in a heat rule, like for instance, a radius of a bullet on this chart.
+Two-dimensional category axes
+Both axes on this chart is a category axis. This allows placing columns precisely as squares.
+[More about category axes](https://www.amcharts.com/docs/v5/charts/xy-chart/axes/category-axis/)
+Data-aware bullets
+Bullets inside squares are bullets. Labels inside bullets are bound to the actual values in data.
+[More about bullets](https://www.amcharts.com/docs/v5/concepts/common-elements/bullets/)
+Heat rules
+Heat rules allow modifying element's properties based on its related value in data. Those are not limited to colors. Any quantifiable value can be used in a heat rule, like for instance, a radius of a bullet on this chart.
 [More about heat rules](https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/)
 
 ## JavaScript

package/extended/examples/column-bar/simple-column-chart.md

@@ -2,7 +2,7 @@
 title: "Simple Column Chart"
 source: "https://www.amcharts.com/demos/simple-column-chart/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Column Chart (also known as vertical bar chart) is one of the most common and, arguably, the easiest to read chart type when it comes to visualizing category-based values. Rectangular bars are placed along the category axis with bar length representing the value for a specific category.
@@ -12,8 +12,8 @@ The centerpiece of every XY Chart is its series (the actual "graph" if you will)
 Finally, we add a horizontal Scrollbar for precise zooming and panning.
 All that's left is to assign our data.
 As a final touch, we apply some lite animation to make everything look nicer.
- 	XY Chart
- 	Animations
+XY Chart
+Animations
 
 ## JavaScript
 

package/extended/examples/column-bar/sorted-bar-chart.md

@@ -2,7 +2,7 @@
 title: "Sorted Bar Chart"
 source: "https://www.amcharts.com/demos/sorted-bar-chart/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Sorting a bar chart by bar’s value is a common scenario that is easily implemented by sorting the underlying data beforehand. But what if data is constantly updated? This demo shows an approach to solving the real-time sorting problem that is both functional and visually appealing.
@@ -82,7 +82,9 @@ var series = chart.series.push(am5xy.ColumnSeries.new(root, {
   tooltip: am5.Tooltip.new(root, {
     pointerOrientation: "left",
     labelText: "{valueX}"
-  })
+  }),
+  // Each column takes its own color from the series palette
+  colorByDataItem: true
 }));
 
 
@@ -93,16 +95,6 @@ series.columns.template.setAll({
   strokeOpacity: 0
 });
 
-// Make each column to be of a different color
-series.columns.template.adapters.add("fill", function (fill, target) {
-  return chart.get("colors").getIndex(series.columns.indexOf(target));
-});
-
-series.columns.template.adapters.add("stroke", function (stroke, target) {
-  return chart.get("colors").getIndex(series.columns.indexOf(target));
-});
-
-
 // Set data
 var data = [
   {

package/extended/examples/column-bar/stacked-bar-chart-with-negative-values.md

@@ -2,7 +2,7 @@
 title: "Stacked Bar Chart with Negative Values"
 source: "https://www.amcharts.com/demos/stacked-bar-chart-with-negative-values/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 In this demo we use negative numbers to create a population pyramid via a stacked bar chart with bars appearing on both sides of the axis. We then tell the chart to display absolute values so our "trick" isn't visible to the viewer.

package/extended/examples/column-bar/stacked-bar-chart.md

@@ -2,7 +2,7 @@
 title: "Stacked Bar Chart"
 source: "https://www.amcharts.com/demos/stacked-bar-chart/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Stacked bar charts are useful to demonstrate how a larger data category is comprised of smaller categories, and what part each of the smaller categories plays in the total of a larger one.

package/extended/examples/column-bar/stacked-clustered-column-chart.md

@@ -2,7 +2,7 @@
 title: "Stacked and Clustered Column Chart"
 source: "https://www.amcharts.com/demos/stacked-clustered-column-chart/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Stacked column charts are great for displaying the contributions of parts of a whole (eg. how much each product line contributed to the total revenue). Clustered column charts excel at being the most comprehensible while comparing the absolute values visually. With amCharts 5 you can combine both techniques to get the best of both worlds.

package/extended/examples/column-bar/stacked-column-chart.md

@@ -2,7 +2,7 @@
 title: "Stacked Column Chart"
 source: "https://www.amcharts.com/demos/stacked-column-chart/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Stacked bar charts are useful to demonstrate how a larger data category is comprised of smaller categories, and what part each of the smaller categories plays in the total of a larger one.

package/extended/examples/column-bar/stacked-waterfall-chart.md

@@ -2,7 +2,7 @@
 title: "Stacked Waterfall Chart"
 source: "https://www.amcharts.com/demos/stacked-waterfall-chart/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 A Waterfall Chart (also known as Flying Bricks Chart or Mario Chart or Bridge Chart) helps viewers understand the cumulative effect of sequential events. Stacking series of events gives a clearer picture of the effect of multiple parallel series.

package/extended/examples/column-bar/step-count-chart.md

@@ -2,7 +2,7 @@
 title: "Step Count Chart"
 source: "https://www.amcharts.com/demos/step-count-chart/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 This demo is inspired by the chart used in Samsung health app. The cursor always stays in the same position but you can pan the chart to the position you want.

package/extended/examples/column-bar/variance-indicators.md

@@ -2,7 +2,7 @@
 title: "Variance Indicators"
 source: "https://www.amcharts.com/demos/variance-indicators/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 A clever use of highly configurable clustered Column series and adapters enables us to create automatically-calculated variance indicators.

package/extended/examples/column-bar/waffle-chart.md

@@ -2,7 +2,7 @@
 title: "Waffle Chart"
 source: "https://www.amcharts.com/demos/waffle-chart/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Waffle Chart is an alternative to pie chart for displaying data in relation to the whole.

package/extended/examples/column-bar/waterfall-chart.md

@@ -2,7 +2,7 @@
 title: "Waterfall Chart"
 source: "https://www.amcharts.com/demos/waterfall-chart/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Waterfall Chart (also known as Flying bricks chart, Mario chart, Cascade chart) is most frequently used to display the effect of the series of consecutive positive or negative events on the initial value.

package/extended/examples/dashboards/maps-and-charts-dashboard.md

@@ -2,7 +2,7 @@
 title: "Maps and Charts Dashboard"
 source: "https://www.amcharts.com/demos/maps-and-charts-dashboard/"
 category: "dashboards"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 ## JavaScript

package/extended/examples/dashboards/road-trip-dashboard-with-map.md

@@ -2,7 +2,7 @@
 title: "Road Trip Dashboard with Map"
 source: "https://www.amcharts.com/demos/road-trip-dashboard-with-map/"
 category: "dashboards"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 ## JavaScript
@@ -164,6 +164,7 @@ function makeMapChart() {
   // Create main polygon series for countries
   // https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
   var polygonSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {
+    name: "Polygon Series",
     geoJSON: am5geodata_region_world_europeLow
   }));
 
@@ -178,7 +179,9 @@ function makeMapChart() {
     chart.goHome();
   })
 
-  var lineSeries = chart.series.push(am5map.MapLineSeries.new(root, {}));
+  var lineSeries = chart.series.push(am5map.MapLineSeries.new(root, {
+    name: "Line Series"
+  }));
   lineSeries.mapLines.template.setAll({
     stroke: am5.color(0x000000),
     strokeDasharray: [3, 3],
@@ -187,6 +190,7 @@ function makeMapChart() {
   });
 
   pointSeries = chart.series.push(am5map.MapPointSeries.new(root, {
+    name: "City Series",
     valueField: "population",
     calculateAggregates: true,
     idField: "name"
@@ -227,7 +231,7 @@ function makeMapChart() {
 
         if (di) {
           var bullet = di.bullets[0];
-          
+
           if (bullet) {
             var container = bullet.get("sprite");
             var c = container.children.getIndex(0);
@@ -247,7 +251,7 @@ function makeMapChart() {
 
         if (di) {
           var bullet = di.bullets[0];
-          
+
           if (bullet) {
             var container = bullet.get("sprite");
             var c = container.children.getIndex(0);
@@ -257,7 +261,7 @@ function makeMapChart() {
           }
         }
       }
-    });    
+    });
 
 
     var label = container.children.push(am5.Label.new(root, {
@@ -283,15 +287,14 @@ function makeMapChart() {
 
   pointSeries.data.setAll(data);
 
-  // create line series data items with points to connect
-  var pointsToConnect = [];
-  am5.array.each(pointSeries.dataItems, function (dataItem) {
-    pointsToConnect.push(dataItem);
-  })
-
-  lineSeries.pushDataItem({
-    pointsToConnect: pointsToConnect
-  });
+  // the route connects the cities by their names
+  lineSeries.set("pointSeries", pointSeries);
+  lineSeries.data.setAll([{
+    id: "route",
+    pointIds: data.map(function (city) {
+      return city.name;
+    })
+  }]);
 
 
   // Make stuff animate on load
@@ -355,7 +358,7 @@ function makeSerpentineChart() {
       fillOpacity: 1
     }));
   }
-  
+
 
   var yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
     maxDeviation: 0,
@@ -365,7 +368,7 @@ function makeSerpentineChart() {
 
   var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
     renderer: xRenderer,
-    numberFormat: "#' km'",    
+    numberFormat: "#' km'",
   }));
 
   // Data
@@ -374,7 +377,7 @@ function makeSerpentineChart() {
   // Add series
   // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
   serpentineSeries = chart.series.push(am5timeline.CurveLineSeries.new(root, {
-    xAxis: xAxis,    
+    xAxis: xAxis,
     yAxis: yAxis,
     baseAxis: yAxis,
     valueField: "population",
@@ -409,9 +412,7 @@ function makeSerpentineChart() {
       strokeWidth: 2,
       strokeOpacity: 0.8,
       layer: 30,
-      tooltipText: "[bold fontSize: 20px]{name}[/]
-{date.formatDate('MMM dd, yyyy')}
-population: {population}",
+      tooltipText: "[bold fontSize: 20px]{name}[/]\n{date.formatDate('MMM dd, yyyy')}\npopulation: {population}",
       tooltipY: 0,
       fillOpacity: 0.7
     }, circleTemplate));
@@ -429,7 +430,7 @@ population: {population}",
 
         if (di) {
           var bullet = di.bullets[0];
-          
+
           if (bullet) {
             var container = bullet.get("sprite");
             var c = container.children.getIndex(0);
@@ -449,7 +450,7 @@ population: {population}",
 
         if (di) {
           var bullet = di.bullets[0];
-          
+
           if (bullet) {
             var container = bullet.get("sprite");
             var c = container.children.getIndex(0);
@@ -459,7 +460,7 @@ population: {population}",
           }
         }
       }
-    });        
+    });
 
     var label = container.children.push(am5.Label.new(root, {
       text: "{name}",