@amcharts/amcharts5-mcp 1.4.0 → 1.6.0

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

@@ -2,7 +2,7 @@
 title: "Bar Chart Race"
 source: "https://www.amcharts.com/demos/bar-chart-race/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Bar Chart Race is a great and highly visual way to display data changing over time in the form of an animated bar chart. It's a very comprehensible representation of time-based changes in data.
@@ -450,21 +450,14 @@ var series = chart.series.push(am5xy.ColumnSeries.new(root, {
   xAxis: xAxis,
   yAxis: yAxis,
   valueXField: "value",
-  categoryYField: "network"
+  categoryYField: "network",
+  // Each column takes its own color from the series palette
+  colorByDataItem: true
 }));
 
 // Rounded corners for columns
 series.columns.template.setAll({ cornerRadiusBR: 5, cornerRadiusTR: 5 });
 
-// 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/bars-with-moving-bullets.md

@@ -2,7 +2,7 @@
 title: "Bars with Moving Bullets"
 source: "https://www.amcharts.com/demos/bars-with-moving-bullets/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Interactivity is a great way to direct viewers attention in visualizations. amCharts 5 helps you implement moving bullets in a conservative but effective bar chart to make it way more appealing without sacrificing the maximum comprehension level of this classic chart type.

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

@@ -2,7 +2,7 @@
 title: "Bullet Chart"
 source: "https://www.amcharts.com/demos/bullet-chart/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Bullet Chart (also know as Bullet graph) is a great replacement for traditional dashboard gauges and meters. It empowers to display way more information in a more compact space by getting rid of unnecessary decoration in favor of data clarity and usability.

package/extended/examples/column-bar/carbon-zero-progress.md

@@ -2,7 +2,7 @@
 title: "Carbon-zero Progress"
 source: "https://www.amcharts.com/demos/carbon-zero-progress/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 amCharts flexibility allows you to go way beyond canonical chart types and use our libraries to build vast variety of data visualizations. In this demo we use the XY chart to implement a beautiful progress bar.
@@ -248,8 +248,7 @@ series.bullets.push(function(root, target, dataItem) {
     }));
     
     var label = container.children.push(am5.Label.new(root, {
-      text: "GOAL
-[bold]ZERO[/]",
+      text: "GOAL\n[bold]ZERO[/]",
       textAlign: "center",
       //fontSize: "10",
       fill: am5.color(0xffffff),

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

@@ -2,13 +2,13 @@
 title: "Clustered Bar Chart"
 source: "https://www.amcharts.com/demos/clustered-bar-chart/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Clustered Bar Chart (also known as Grouped bar chart, Multi-series bar chart) is great for displaying and comparing multiple sets of data over the same categories (like sales revenue of various departments of the company over several years).
 Key implementation details
 Clustered is the default behavior for the column/bar chart, so you don't have to do anything extra to achieve the "clustering".
-To make a horizontal Bar chart (as opposed to a vertical Column chart) we set yAxis to be a CategoryAxis and xAxis to a ValueAxis. Accordingly, we set valueXField and categoryYField properties on the series, so they know that categories go along the Y axis and values along the X. 
+To make a horizontal Bar chart (as opposed to a vertical Column chart) we set yAxis to be a CategoryAxis and xAxis to a ValueAxis. Accordingly, we set valueXField and categoryYField properties on the series, so they know that categories go along the Y axis and values along the X.
 Normally, axes start at the 0 point (bottom-left) but in this case we wanted years to go from top to bottom. To achieve this, we've set inversed: true on the category axis renderer.
 Finally, to make bars appear in a sequenced animation (one-by-one and not all at once) we enable sequencedInterpolation on the series.
 XY chart axes
@@ -42,15 +42,6 @@ var chart = root.container.children.push(am5xy.XYChart.new(root, {
   layout: root.verticalLayout
 }));
 
-
-// Add legend
-// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
-var legend = chart.children.push(am5.Legend.new(root, {
-  centerX: am5.p50,
-  x: am5.p50
-}))
-
-
 // Data
 var data = [{
   year: "2017",
@@ -110,8 +101,7 @@ function createSeries(field, name) {
     sequencedInterpolation: true,
     tooltip: am5.Tooltip.new(root, {
       pointerOrientation: "horizontal",
-      labelText: "[bold]{name}[/]
-{categoryY}: {valueX}"
+      labelText: "[bold]{name}[/]\n{categoryY}: {valueX}"
     })
   }));
 

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

@@ -2,13 +2,13 @@
 title: "Clustered Column Chart"
 source: "https://www.amcharts.com/demos/clustered-column-chart/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Clustered Column Chart is the default column chart behavior where values from all series are displayed next to each other at the same category axis value.
 Key implementation details
 In this demo we emphasize the "clusters" by adding margins around them. We do this by setting cellStartLocation and cellEndLocation on the horizontal axis renderer (AxisRendererX). We set them to 0.1 and 0.9 respectively, resulting in 10% margins on both sides.
- 	Cell start/end locations
+Cell start/end locations
 
 ## JavaScript
 

package/extended/examples/column-bar/column-and-line-mix.md

@@ -2,7 +2,7 @@
 title: "Column and Line Mix"
 source: "https://www.amcharts.com/demos/column-and-line-mix/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 You can use our XYChart to mix and match various types of two-dimensional charts - line, bar, column, area, candlestick, OHLC, etc. The most common combination is the column and line chart.

package/extended/examples/column-bar/column-chart-images-top.md

@@ -2,7 +2,7 @@
 title: "Column Chart with Images on Top"
 source: "https://www.amcharts.com/demos/column-chart-images-top/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Bullets in amCharts 5 are more than just a way to display geometric shapes over the data points. You can display anything inside the bullet - from a simple circle to a fully fledged sub-chart. In this demo we display images as bullet content.
@@ -77,7 +77,9 @@ var series = chart.series.push(am5xy.ColumnSeries.new(root, {
   valueYField: "value",
   sequencedInterpolation: true,
   categoryXField: "name",
-  tooltip: am5.Tooltip.new(root, { dy: -25, labelText: "{valueY}" })
+  tooltip: am5.Tooltip.new(root, { dy: -25, labelText: "{valueY}" }),
+  // Each column takes its own color from the series palette
+  colorByDataItem: true
 }));
 
 
@@ -87,14 +89,6 @@ series.columns.template.setAll({
   strokeOpacity: 0
 });
 
-series.columns.template.adapters.add("fill", (fill, target) => {
-  return chart.get("colors").getIndex(series.columns.indexOf(target));
-});
-
-series.columns.template.adapters.add("stroke", (stroke, target) => {
-  return chart.get("colors").getIndex(series.columns.indexOf(target));
-});
-
 // Set data
 var data = [
   {

package/extended/examples/column-bar/column-with-rotated-series.md

@@ -2,7 +2,7 @@
 title: "Column with Rotated Labels"
 source: "https://www.amcharts.com/demos/column-with-rotated-series/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 In this demo, we create a simple column chart.
@@ -91,19 +91,12 @@ var series = chart.series.push(am5xy.ColumnSeries.new(root, {
   categoryXField: "country",
   tooltip: am5.Tooltip.new(root, {
     labelText: "{valueY}"
-  })
+  }),
+  // Each column takes its own color from the series palette
+  colorByDataItem: true
 }));
 
 series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });
-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 = [{
   country: "USA",

package/extended/examples/column-bar/columns-with-grainy-gradients.md

@@ -2,7 +2,7 @@
 title: "Columns with Grainy Gradients"
 source: "https://www.amcharts.com/demos/columns-with-grainy-gradients/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Grain pattern is a special kind of pattern that can complement regular fills with overhead pixel noise to add that additional fuzzy look. It works by applying a random assortment of semi-transparent dots over existing fills.
@@ -88,6 +88,9 @@ var series = chart.series.push(am5xy.ColumnSeries.new(root, {
   tooltip: am5.Tooltip.new(root, {
     labelText: "{valueY}"
   }),
+  // Each column takes its own color, from the palette set above
+  colorByDataItem: true,
+  colors: chart.get("colors")
 }));
 
 series.columns.template.setAll({
@@ -123,10 +126,6 @@ series.columns.template.states.create("hover", {
   cornerRadiusTR: 10
 })
 
-series.columns.template.adapters.add("fill", function (fill, target) {
-  return chart.get("colors").getIndex(series.columns.indexOf(target));
-});
-
 // Set data
 var data = [{
   country: "USA",

package/extended/examples/column-bar/columns-with-moving-bullets.md

@@ -2,7 +2,7 @@
 title: "Columns with Moving Bullets"
 source: "https://www.amcharts.com/demos/columns-with-moving-bullets/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Interactivity is a great way to direct viewers attention in visualizations. amCharts 5 helps you implement moving bullets in a conservative but effective bar chart to make it way more appealing without sacrificing the maximum comprehension level of this classic chart type.

package/extended/examples/column-bar/curved-columns.md

@@ -2,7 +2,7 @@
 title: "Curved Columns"
 source: "https://www.amcharts.com/demos/curved-columns/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Curved Column Chart (also known as Curved Bar Chart) is a visual variation of a "standard" bar chart. Semantically there's no difference between regular and curved column chart. The only difference is that columns are displayed in the shape of areas instead of regular rectangles. This gives the chart a fresher visual look while sacrificing clarity a bit, as curves of the columns have no meaning.
@@ -81,7 +81,9 @@ var series = chart.series.push(
     yAxis: yAxis,
     valueYField: "value",
     sequencedInterpolation: true,
-    categoryXField: "country"
+    categoryXField: "country",
+    // Each column takes its own color from the series palette
+    colorByDataItem: true
   })
 );
 
@@ -90,14 +92,6 @@ series.columns.template.setAll({
   fillOpacity: 0.9,
   strokeOpacity: 0
 });
-series.columns.template.adapters.add("fill", (fill, target) => {
-  return chart.get("colors").getIndex(series.columns.indexOf(target));
-});
-
-series.columns.template.adapters.add("stroke", (stroke, target) => {
-  return chart.get("colors").getIndex(series.columns.indexOf(target));
-});
-
 series.columns.template.set("draw", function(display, target) {
   var w = target.getPrivate("width", 0);
   var h = target.getPrivate("height", 0);

package/extended/examples/column-bar/divergent-stacked-bars.md

@@ -2,7 +2,7 @@
 title: "Divergent Stacked Bars"
 source: "https://www.amcharts.com/demos/divergent-stacked-bars/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Sometimes you want to stack all the bars in a bar chart on top of each other. Other times, you want some parts of the chart go into diverging directions. This demo shows you a simple way to achieve that with amCharts.
@@ -40,15 +40,6 @@ var chart = root.container.children.push(
 // Use only absolute numbers
 root.numberFormatter.set("numberFormat", "#.#s'%");
 
-// Add legend
-// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
-var legend = chart.children.push(
-  am5.Legend.new(root, {
-    centerX: am5.p50,
-    x: am5.p50
-  })
-);
-
 // Data
 var data = [{
   category: "Search engines",

package/extended/examples/column-bar/drag-and-change-column-value.md

@@ -2,7 +2,7 @@
 title: "Drag and change column value"
 source: "https://www.amcharts.com/demos/drag-and-change-column-value/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 While amCharts libraries primarily focus on data visualization, they can also be used as UI where it makes sense, thanks to all the great interactivity features. In this demo you can adjust the values behind the columns simply by dragging the columns up and down.
@@ -119,19 +119,12 @@ var series = chart.series.push(am5xy.ColumnSeries.new(root, {
   valueXField: "date",
   tooltip: am5.Tooltip.new(root, {
     labelText: "{valueY}"
-  })
+  }),
+  // Each column takes its own color from the series palette
+  colorByDataItem: true
 }));
 
 series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });
-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));
-});
-
-
 // manipulating with mouse code
 var isDown = false;
 

package/extended/examples/column-bar/drag-ordering-of-bars.md

@@ -2,7 +2,7 @@
 title: "Drag-ordering of Bars"
 source: "https://www.amcharts.com/demos/drag-ordering-of-bars/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 While data visualization is the primary function of amCharts, you can also use its interactive features to let end-users adjust the charts how they see fit. In this example, viewers can re-arrange the order of bars in the chart.

package/extended/examples/column-bar/dumbbell-plot.md

@@ -2,7 +2,7 @@
 title: "Dumbbell Plot"
 source: "https://www.amcharts.com/demos/dumbbell-plot/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Dumbbell plot (also known as Dumbbell chart, Connected dot plot) is great for displaying changes between two points in time, two conditions or differences between two groups.

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

@@ -2,7 +2,7 @@
 title: "Floating Bar Chart"
 source: "https://www.amcharts.com/demos/floating-bar-chart/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Bars in a bar chart don't have to start at zero. In cases when you need to specify a different starting value in amCharts 5, you set an openValueXField on a ColumnSeries
@@ -125,8 +125,7 @@ var series = chart.series.push(am5xy.ColumnSeries.new(root, {
 series.columns.template.setAll({
   height: am5.percent(100),
   templateField: "columnSettings",
-  tooltipText: "[bold]{name}[/]
-{categoryY}: {valueX}"
+  tooltipText: "[bold]{name}[/]\n{categoryY}: {valueX}"
 });
 
 series.data.setAll(data);

package/extended/examples/column-bar/grouped-and-sorted-columns.md

@@ -2,7 +2,7 @@
 title: "Grouped and Sorted Columns"
 source: "https://www.amcharts.com/demos/grouped-and-sorted-columns/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 amCharts libraries are flexible in a way that even when something is not a special feature in the library, you can still easily implement it with amCharts. In this case we have a 2-level deep dataset but we want to represent it as a column chart you see here - no problem with amCharts 5!
@@ -89,7 +89,9 @@ var series = chart.series.push(
     categoryXField: "category",
     tooltip: am5.Tooltip.new(root, {
       labelText: "{provider} {realName}: {valueY}"
-    })
+    }),
+    // Each column takes its own color from the series palette
+    colorByDataItem: true
   })
 );
 
@@ -97,14 +99,6 @@ series.columns.template.setAll({
   fillOpacity: 0.9,
   strokeOpacity: 0
 });
-series.columns.template.adapters.add("fill", (fill, target) => {
-  return chart.get("colors").getIndex(series.columns.indexOf(target));
-});
-
-series.columns.template.adapters.add("stroke", (stroke, target) => {
-  return chart.get("colors").getIndex(series.columns.indexOf(target));
-});
-
 var lineSeries = chart.series.push(
   am5xy.LineSeries.new(root, {
     name: "Series 2",

package/extended/examples/column-bar/grouped-stacks.md

@@ -2,7 +2,7 @@
 title: "Grouped Stacks"
 source: "https://www.amcharts.com/demos/grouped-stacks/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 This demo uses multiple stacked series to create virtual groups.

package/extended/examples/column-bar/heat-map-with-legend.md

@@ -2,16 +2,16 @@
 title: "Heat Map with Legend"
 source: "https://www.amcharts.com/demos/heat-map-with-legend/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
-Heat map (also known as Heatmap, Heat table, Shading matrix) represents data in a rectangular matrix where individual values are differentiated by color.
-Heat rules
-Heat rules allow modifying element's properties based on its related value in data, like for instance, color of the columns on this charts.
-[More about head rules](https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/)
-Heat legend
-A perfect companion for any color-based heat maps, a head legend can show the spectrum of values and their relation to colors.
-Furthermore, utilizing chart events, it's possible to further enhance UX by showing exact position of hovered element in the whole spectrum.
+Heat map (also known as Heatmap, Heat table, Shading matrix) represents data in a rectangular matrix where individual values are differentiated by color.
+Heat rules
+Heat rules allow modifying element's properties based on its related value in data, like for instance, color of the columns on this charts.
+[More about head rules](https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/)
+Heat legend
+A perfect companion for any color-based heat maps, a head legend can show the spectrum of values and their relation to colors.
+Furthermore, utilizing chart events, it's possible to further enhance UX by showing exact position of hovered element in the whole spectrum.
 [More about head legend](https://www.amcharts.com/docs/v5/concepts/legend/heat-legend/)
 
 ## JavaScript

package/extended/examples/column-bar/horizontal-dumbbell-plot.md

@@ -2,7 +2,7 @@
 title: "Horizontal Dumbbell Plot"
 source: "https://www.amcharts.com/demos/horizontal-dumbbell-plot/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Dumbbell plot (also known as Dumbbell chart, Connected dot plot) is great for displaying changes between two points in time, two conditions or differences between two groups.

package/extended/examples/column-bar/images-as-categories.md

@@ -2,21 +2,19 @@
 title: "Images as Categories"
 source: "https://www.amcharts.com/demos/images-as-categories/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 This demo shows how bullets can be added to any axis.
 Key implementation details
 While creating a CategoryAxis we set its bullet property to a function returning a new Bullet with its sprite set to a Picture using an image from dataItem's icon field as its source (src).
- 	Bullets
- 	Images (Picture)
- 	Axis bullets
- 
+Bullets
+Images (Picture)
+Axis bullets
 
 ## JavaScript
 
 ```javascript
-
 // Create root element
 // https://www.amcharts.com/docs/v5/getting-started/#Root_element
 var root = am5.Root.new("chartdiv");
@@ -47,57 +45,57 @@ var colors = chart.get("colors");
 var data = [{
   country: "US",
   visits: 725,
-  icon: "https://www.amcharts.com/wp-content/uploads/flags/united-states.svg",
+  iconSettings: { src: "https://www.amcharts.com/wp-content/uploads/flags/united-states.svg" },
   columnSettings: { fill: colors.next() }
 }, {
   country: "UK",
   visits: 625,
-  icon: "https://www.amcharts.com/wp-content/uploads/flags/united-kingdom.svg",
+  iconSettings: { src: "https://www.amcharts.com/wp-content/uploads/flags/united-kingdom.svg" },
   columnSettings: { fill: colors.next() }
 }, {
   country: "China",
   visits: 602,
-  icon: "https://www.amcharts.com/wp-content/uploads/flags/china.svg",
+  iconSettings: { src: "https://www.amcharts.com/wp-content/uploads/flags/china.svg" },
   columnSettings: { fill: colors.next() }
 }, {
   country: "Japan",
   visits: 509,
-  icon: "https://www.amcharts.com/wp-content/uploads/flags/japan.svg",
+  iconSettings: { src: "https://www.amcharts.com/wp-content/uploads/flags/japan.svg" },
   columnSettings: { fill: colors.next() }
 }, {
   country: "Germany",
   visits: 322,
-  icon: "https://www.amcharts.com/wp-content/uploads/flags/germany.svg",
+  iconSettings: { src: "https://www.amcharts.com/wp-content/uploads/flags/germany.svg" },
   columnSettings: { fill: colors.next() }
 }, {
   country: "France",
   visits: 214,
-  icon: "https://www.amcharts.com/wp-content/uploads/flags/france.svg",
+  iconSettings: { src: "https://www.amcharts.com/wp-content/uploads/flags/france.svg" },
   columnSettings: { fill: colors.next() }
 }, {
   country: "India",
   visits: 204,
-  icon: "https://www.amcharts.com/wp-content/uploads/flags/india.svg",
+  iconSettings: { src: "https://www.amcharts.com/wp-content/uploads/flags/india.svg" },
   columnSettings: { fill: colors.next() }
 }, {
   country: "Spain",
   visits: 198,
-  icon: "https://www.amcharts.com/wp-content/uploads/flags/spain.svg",
+  iconSettings: { src: "https://www.amcharts.com/wp-content/uploads/flags/spain.svg" },
   columnSettings: { fill: colors.next() }
 }, {
   country: "Netherlands",
   visits: 165,
-  icon: "https://www.amcharts.com/wp-content/uploads/flags/netherlands.svg",
+  iconSettings: { src: "https://www.amcharts.com/wp-content/uploads/flags/netherlands.svg" },
   columnSettings: { fill: colors.next() }
 }, {
   country: "South Korea",
   visits: 93,
-  icon: "https://www.amcharts.com/wp-content/uploads/flags/south-korea.svg",
+  iconSettings: { src: "https://www.amcharts.com/wp-content/uploads/flags/south-korea.svg" },
   columnSettings: { fill: colors.next() }
 }, {
   country: "Canada",
   visits: 41,
-  icon: "https://www.amcharts.com/wp-content/uploads/flags/canada.svg",
+  iconSettings: { src: "https://www.amcharts.com/wp-content/uploads/flags/canada.svg" },
   columnSettings: { fill: colors.next() }
 }];
 
@@ -120,7 +118,7 @@ var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
         height: 24,
         centerY: am5.p50,
         centerX: am5.p50,
-        src: dataItem.dataContext.icon
+        templateField: "iconSettings"
       })
     });
   }

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

@@ -2,7 +2,7 @@
 title: "Layered Column Chart"
 source: "https://www.amcharts.com/demos/layered-column-chart/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 In some scenarios, showing multiple column series side-by-side (clustered) is the best and most "standard" way to display multiple column series. However, when each series has equal and fairly limited number of items, layering series on top of each other presents a much more impactful visualization.

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

@@ -2,7 +2,7 @@
 title: "Lollipop Chart"
 source: "https://www.amcharts.com/demos/lollipop-chart/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 A variation of column chart, also known as lollipop plot. As you can see, the name probably doesn't need an explanation. So, let's get straight to how to make it.

package/extended/examples/column-bar/pareto-diagram.md

@@ -2,7 +2,7 @@
 title: "Pareto Diagram"
 source: "https://www.amcharts.com/demos/pareto-diagram/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 A Pareto chart or Pareto diagram, is a type of chart that contains both column and a line series, where individual values are represented in descending order by columns, and the cumulative total is represented by the line.
@@ -142,7 +142,9 @@ var series = chart.series.push(am5xy.ColumnSeries.new(root, {
   xAxis: xAxis,
   yAxis: yAxis,
   valueYField: "visits",
-  categoryXField: "country"
+  categoryXField: "country",
+  // Each column takes its own color from the series palette
+  colorByDataItem: true
 }));
 
 series.columns.template.setAll({
@@ -153,11 +155,6 @@ series.columns.template.setAll({
   cornerRadiusTR: 6
 });
 
-series.columns.template.adapters.add("fill", function (fill, target) {
-  return chart.get("colors").getIndex(series.dataItems.indexOf(target.dataItem));
-})
-
-
 // pareto series
 var paretoSeries = chart.series.push(am5xy.LineSeries.new(root, {
   xAxis: xAxis,

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

@@ -2,7 +2,7 @@
 title: "Partitioned Bar Chart"
 source: "https://www.amcharts.com/demos/partitioned-bar-chart/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Sometimes you need to group and partition parts of your bar chart. amCharts XY Chart has all the tools for you to address that need.

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

@@ -2,7 +2,7 @@
 title: "Pictorial Column Chart"
 source: "https://www.amcharts.com/demos/pictorial-column-chart/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Pictorial Column Chart (also known as Pictorial Bar Chart) is a visually spiced up version of a regular bar chart using images to display bars. It is harder to compare values in a pictorial chart but it could be much easier to identify objects portrayed when their shape has a distinct recognizable meaning (like in this demo).