@amcharts/amcharts5-mcp 1.7.1 → 1.9.0

package/extended/concepts/colors-gradients-and-patterns.md

@@ -22,6 +22,21 @@ Typical settings to use colors for is `fill` which indicates area fill color, an
 
 Text color is specified via its `fill` setting.
 
+### Blending colors (5.21.2)
+
+`am5.Color.interpolateColors(position, colors, mode)` returns a color on a scale through any number of colors, spread evenly. `position` runs from `0` (the first color) to `1` (the last), so with three colors `0.5` gives the middle one; values outside that range get the first or last color. `mode` is `"rgb"` (default) or `"hsl"`. For two colors, `am5.Color.interpolate(position, from, to, mode)` does the same.
+
+```javascript
+// Red, yellow and green, from the interface colors
+const ic = root.interfaceColors;
+const scale = [ic.get("negative"), ic.get("warning"), ic.get("positive")];
+
+am5.Color.interpolateColors(0.5, scale);  // the "warning" yellow
+am5.Color.interpolateColors(0.25, scale); // halfway between red and yellow
+```
+
+To color series elements by value on such a scale, use a heat rule's [`stops`](https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/#multiple-stops) setting, and show it in a heat legend with its [`colors`](https://www.amcharts.com/docs/v5/concepts/legend/heat-legend/#More_than_two_colors) setting.
+
 ## Color sets
 
 Colors sets are basically collections of colors with ability to generate new colors according to certain rules as needed.
@@ -130,6 +145,18 @@ Primary button background when pressed.
 
 Primary button background when active.
 
+`primaryButtonDisabled`
+
+0xdadada
+
+Primary button fill color when disabled.
+
+`primaryButtonTextDisabled`
+
+0xffffff
+
+Primary button text color when disabled.
+
 `primaryButtonText`
 
 0xffffff
@@ -226,6 +253,12 @@ Color to express positive value (e.g. in candlesticks).
 
 Color to express negative value (e.g. in candlesticks).
 
+`warning` *(5.21.2)*
+
+0xf2c230
+
+A yellow between `negative` and `positive`: a warning, or the middle of a scale from bad to good (e.g. heat rule [`stops`](https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/#multiple-stops)).
+
 NOTEDefault colors may be overridden by [themes](https://www.amcharts.com/docs/v5/concepts/themes/).
 
 ### Using interface colors

package/extended/concepts/data.md

@@ -541,7 +541,7 @@ i
 
 Date/time formatted according to [ISO8601 format](http://en.wikipedia.org/wiki/ISO_8601).
 
-NOTE If `dateFormat` is not set, and processor encounters a string-based value it needs to parse, it will use chart-wide date format (`root.dateFormatter.dateFormat`).
+NOTE If `dateFormat` is not set, string dates are read by the browser's `Date` (as `new Date(string)` would), not with the chart-wide date format (`root.dateFormatter.dateFormat`). The browser takes a date-only string such as `"2024-03-15"` as midnight UTC, and a date-time string such as `"2024-03-15T10:00:00"` as local time. Before 5.21.1, string dates without a `dateFormat` were all read as 1 January 1970, so older versions need `dateFormat` set. *(5.21.1)*
 
 
 ### Parsing colors

package/extended/concepts/legend/heat-legend.md

@@ -1,7 +1,7 @@
 ---
 title: "Heat legend"
 source: "https://www.amcharts.com/docs/v5/concepts/legend/heat-legend/"
-scraped: "2026-03-15"
+scraped: "2026-10-18"
 ---
 
 Heat legend is a visual tool that usually compliments a chart with [heat rules](https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/).
@@ -10,7 +10,7 @@ Heat legend is a visual tool that usually compliments a chart with [heat rules](
 
 We can add a heat legend like a regular legend, by pushing and instance of `[HeatLegend](https://www.amcharts.com/docs/v5/reference/heatlegend/)` into chart's children.
 
-Heat legend also requires at least two settings: `startColor` and `endColor`.
+Heat legend also requires at least two settings: `startColor` and `endColor` (or [`colors`](#More_than_two_colors) instead).
 
 Those will define colors for start (lowest value end) and end (highest value end) of the legend.
 
@@ -114,12 +114,47 @@ var heatLegend = chart.children.push(
   })
 );
 
+
 `stepCount: 1` (default)
 
+
 `stepCount: 5`
 
+
 `stepCount: 10`
 
+## More than two colors
+
+For a scale through more than two colors, e.g. red to yellow to green, use `colors` instead of `startColor` and `endColor`. The colors go from the lowest value end to the highest:
+
+let heatLegend = chart.children.push(
+  am5.HeatLegend.new(root, {
+    orientation: "vertical",
+    colors: \[
+      root.interfaceColors.get("negative"),
+      root.interfaceColors.get("warning"),
+      root.interfaceColors.get("positive")
+    \]
+  })
+);
+
+var heatLegend = chart.children.push(
+  am5.HeatLegend.new(root, {
+    orientation: "vertical",
+    colors: \[
+      root.interfaceColors.get("negative"),
+      root.interfaceColors.get("warning"),
+      root.interfaceColors.get("positive")
+    \]
+  })
+);
+
+By default, the legend shows a gradient through all the colors, spread evenly along it. With `stepCount` set to anything above `1`, it shows one step per color instead: the number itself is ignored.
+
+Tooltips shown with [`showValue()`](#Triggering_tooltip) take their color from the same scale.
+
+NOTE`colors` is available since version 5.21.2. To color chart elements on the same scale, use heat rule's [`stops`](https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/#multiple-stops) setting with the same colors.
+
 ## Tooltip
 
 ### Setting scale
@@ -149,13 +184,13 @@ var heatLegend = chart.children.push(
 If we don't know extreme values, we can extract that from series, when its data is validated:
 
 series.events.on("datavalidated", function () {
-  heatLegend.set("startValue", series.getPrivate("valueHigh"));
-  heatLegend.set("endValue", series.getPrivate("valueLow"));
+  heatLegend.set("startValue", series.getPrivate("valueLow"));
+  heatLegend.set("endValue", series.getPrivate("valueHigh"));
 });
 
 series.events.on("datavalidated", function () {
-  heatLegend.set("startValue", series.getPrivate("valueHigh"));
-  heatLegend.set("endValue", series.getPrivate("valueLow"));
+  heatLegend.set("startValue", series.getPrivate("valueLow"));
+  heatLegend.set("endValue", series.getPrivate("valueHigh"));
 });
 
 ### Triggering tooltip

package/extended/concepts/settings/heat-rules.md

@@ -1,7 +1,7 @@
 ---
 title: "Heat rules"
 source: "https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/"
-scraped: "2026-03-15"
+scraped: "2026-10-18"
 ---
 
 Heat rules is a way to apply value-dependent setting values on series elements.
@@ -56,11 +56,11 @@ A settings key to apply heat value to on actual elements.
 
 `min`
 
-Lower end value of the spectrum, corresponding to the lowest value in all elements affected by the heat rule.
+Lower end value of the spectrum, corresponding to the lowest value in all elements affected by the heat rule. Not needed if [`stops`](#multiple-stops) is set.
 
 `max`
 
-Higher end value of the spectrum, corresponding to the highest value in all elements affected by the heat rule.
+Higher end value of the spectrum, corresponding to the highest value in all elements affected by the heat rule. Not needed if [`stops`](#multiple-stops) is set.
 
 `dataField`
 
@@ -248,6 +248,90 @@ NOTE If we set `minValue` and `maxValue` we don't need series to aggregate value
 
 NOTE Before 5.21.0, `minValue: 0` and `maxValue: 0` were ignored, and the series' lowest or highest value was used instead. Since 5.21.0 a `0` is used like any other value.
 
+## Multiple stops
+
+`min` and `max` make a scale between two values. For a scale through more than two, e.g. red to yellow to green, use `stops` instead: an array of values, from the lowest to the highest.
+
+series.set("heatRules", \[{
+  target: series.columns.template,
+  dataField: "valueY",
+  stops: \[
+    root.interfaceColors.get("negative"),
+    root.interfaceColors.get("warning"),
+    root.interfaceColors.get("positive")
+  \],
+  key: "fill"
+}\])
+
+series.set("heatRules", \[{
+  target: series.columns.template,
+  dataField: "valueY",
+  stops: \[
+    root.interfaceColors.get("negative"),
+    root.interfaceColors.get("warning"),
+    root.interfaceColors.get("positive")
+  \],
+  key: "fill"
+}\])
+
+The element with the lowest value gets the first stop, and the one with the highest value gets the last. The stops are spread evenly across the range, so in the above, the middle value gets yellow, and the values in between blend from one stop to the next.
+
+Stops can be numbers, percents, or colors, but all of one kind. If `minValue` and `maxValue` are set, values outside that range get the first or last stop.
+
+NOTE`stops` is available since version 5.21.2. To show the same scale in a [heat legend](https://www.amcharts.com/docs/v5/concepts/legend/heat-legend/), pass the same colors to its `colors` setting.
+
+## Logarithmic scale
+
+By default, values are spread between `min` and `max` (or across `stops`) on a linear scale.
+
+If values differ by orders of magnitude, e.g. populations of countries, a few very large values would get the far end of the scale, while all the others would end up close together near its start. Setting `logarithmic: true` spreads them on a logarithmic scale instead, so the differences between smaller values show too:
+
+polygonSeries.set("heatRules", \[{
+  target: polygonSeries.mapPolygons.template,
+  dataField: "value",
+  min: am5.color(0xffd19a),
+  max: am5.color(0xb3261e),
+  logarithmic: true,
+  key: "fill"
+}\])
+
+polygonSeries.set("heatRules", \[{
+  target: polygonSeries.mapPolygons.template,
+  dataField: "value",
+  min: am5.color(0xffd19a),
+  max: am5.color(0xb3261e),
+  logarithmic: true,
+  key: "fill"
+}\])
+
+NOTEA logarithmic scale works with values above zero only.
+
+## Elements without a value
+
+Elements whose data item has no value in `dataField` are not affected by the heat rule, and keep the setting value from their template. E.g. countries on a map that are not in data.
+
+To give such elements a specific value instead, use the `neutral` setting:
+
+polygonSeries.set("heatRules", \[{
+  target: polygonSeries.mapPolygons.template,
+  dataField: "value",
+  min: am5.color(0xffd19a),
+  max: am5.color(0xb3261e),
+  neutral: am5.color(0xdddddd),
+  key: "fill"
+}\])
+
+polygonSeries.set("heatRules", \[{
+  target: polygonSeries.mapPolygons.template,
+  dataField: "value",
+  min: am5.color(0xffd19a),
+  max: am5.color(0xb3261e),
+  neutral: am5.color(0xdddddd),
+  key: "fill"
+}\])
+
+The above will make countries with no data light gray.
+
 ## Custom functions
 
 If we need to do something fancier than just set value of a setting, we can use heat rule's `customFunction` property.
@@ -261,10 +345,16 @@ If set, instead of setting value of the setting directly on an element, this fun
 
 It'll be up to the custom function to determine what settings and to what values to set.
 
+The function is also called for elements without a value, with the value parameter `undefined`.
+
 series.set("heatRules", \[{
   target: series.columns.template,
   dataField: "value",
   customFunction: function(sprite, min, max, value) {
+    if (value === undefined) {
+      // No value: leave the element as it is
+      return;
+    }
     if (value < 100) {
       sprite.set("fill", am5.color(0xff0000));
     }
@@ -278,6 +368,10 @@ series.set("heatRules", \[{
   target: series.columns.template,
   dataField: "value",
   customFunction: function(sprite: am5.Sprite, min, max, value) {
+    if (value === undefined) {
+      // No value: leave the element as it is
+      return;
+    }
     if (value < 100) {
       (sprite as am5.Graphics).set("fill", am5.color(0xff0000));
     }
@@ -291,6 +385,10 @@ series.set("heatRules", \[{
   target: series.columns.template,
   dataField: "value",
   customFunction: function(sprite, min, max, value) {
+    if (value === undefined) {
+      // No value: leave the element as it is
+      return;
+    }
     if (value < 100) {
       sprite.set("fill", am5.color(0xff0000));
     }

package/extended/concepts/themes.md

@@ -185,7 +185,8 @@ root.setThemes([
   am5themes_Animated.new(root),
   am5themes_Adaptive(root, {
     baseColor: 0x2c6e91,   // primary base color. The FIRST generated color is this color,
-                           // so a brand color always appears in the chart.
+                           // so a brand color always appears in the chart
+                           // (unless keepContrast has to change it, see below).
                            // Default: green-to-yellow (#4b8e39 first, #ffdd00 last)
     baseColor2: 0xffdd00,  // optional: palette spans the two colors, interpolated in OKLCH,
                            // instead of fanning out from a single hue
@@ -195,6 +196,27 @@ root.setThemes([
 ]);
 ```
 
+#### More settings (5.21.2)
+
+Both themes also take these settings, all off by default:
+
+- `interleave: true` takes the colors in an alternating order (1, 4, 2, 5, 3, 6), so series next to each other differ more. It helps most with Adaptive's `baseColor2`, whose gradient puts similar colors side by side. In Monochrome, the `accent` stays first.
+- `mapShade: true` fills map polygons with a mid shade of the base color (`baseColor` in Adaptive, `color` in Monochrome), about as light as a map's default land, instead of the base color itself.
+- `keepContrast` lightens (in dark mode) or darkens colors that would have too little contrast with the background, keeping their hue: `true` for at least 3:1, or a ratio, e.g. `4.5`. It applies to the series colors and the primary buttons. In Adaptive it also covers `baseColor` and `baseColor2`, so the first color may no longer be exactly `baseColor`. In Monochrome it also covers the `accent`, and the end of the ramp nearest the background moves, with the other shades spread evenly up to it.
+
+```javascript
+root.setThemes([
+  am5themes_Animated.new(root),
+  am5themes_Adaptive(root, {
+    baseColor: 0xffee88,   // too light on white: keepContrast darkens it to 3:1
+    baseColor2: 0x2c6e91,
+    interleave: true,
+    mapShade: true,
+    keepContrast: true     // or a ratio, e.g. 4.5
+  })
+]);
+```
+
 ## Applying
 
 Each chart can have multiple themes applied to it.

package/extended/examples/candlestick-ohlc/box-plot-chart.md

@@ -2,7 +2,7 @@
 title: "Box Plot Chart"
 source: "https://www.amcharts.com/demos/box-plot-chart/"
 category: "candlestick-ohlc"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A box plot sums up a spread of values in one mark: the box holds the middle half, the line across it is the median, and the whiskers reach the lowest and highest values. Here, nine days side by side.

package/extended/examples/candlestick-ohlc/candlestick-chart.md

@@ -2,7 +2,7 @@
 title: "Candlestick Chart"
 source: "https://www.amcharts.com/demos/candlestick-chart/"
 category: "candlestick-ohlc"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A candlestick chart packs a day of trading into one mark: the body spans the opening and closing price, the wick the day’s low and high. This one holds 2,000 days; zoom out and they merge into weekly, then monthly candles.

package/extended/examples/candlestick-ohlc/ohlc-chart.md

@@ -2,7 +2,7 @@
 title: "OHLC Chart"
 source: "https://www.amcharts.com/demos/ohlc-chart/"
 category: "candlestick-ohlc"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 An OHLC chart shows the same four prices as a candlestick, drawn as a bar: a line from low to high, a tick to the left for the open and one to the right for the close. Zoom out and 2,000 days group into weeks and months.

package/extended/examples/candlestick-ohlc/on-demand-data-loading.md

@@ -2,7 +2,7 @@
 title: "On-Demand Data Loading"
 source: "https://www.amcharts.com/demos/on-demand-data-loading/"
 category: "candlestick-ohlc"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A candlestick chart with volume that fetches its data from the server only as needed: it starts with 50 days and loads more as you drag back in time. The buttons under it switch to hourly or monthly candles.

package/extended/examples/candlestick-ohlc/professional-candlesticks.md

@@ -2,7 +2,7 @@
 title: "Professional Candlesticks"
 source: "https://www.amcharts.com/demos/professional-candlesticks/"
 category: "candlestick-ohlc"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 Candlesticks in the hollow style traders call professional. Each candle says two things: hollow if the day closed above its open, filled if below, and green or red for a close above or below the day before.

package/extended/examples/candlestick-ohlc/stock-chart-candlesticks.md

@@ -2,7 +2,7 @@
 title: "Stock Chart Candlesticks"
 source: "https://www.amcharts.com/demos/stock-chart-candlesticks/"
 category: "candlestick-ohlc"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 Fifteen years of daily Microsoft prices as candlesticks over volume. It is a plain XY chart: two value axes stacked over one date axis that skips the weekends.

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

@@ -2,7 +2,7 @@
 title: "100% Stacked Column Chart"
 source: "https://www.amcharts.com/demos/100-stacked-column-chart/"
 category: "column-bar"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 In a 100% stacked column chart every column is a whole, split into shares. Here, six regions over three years: the chart works out the percentages from the raw numbers in the data.

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

@@ -2,7 +2,7 @@
 title: "Bar and Line Chart Mix"
 source: "https://www.amcharts.com/demos/bar-and-line-chart-mix/"
 category: "column-bar"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 Bars and a line on one chart, turned on its side: income as horizontal bars, expenses as a line that climbs through the years. In 2025, expenses overtook income.

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-10-08"
+scraped: "2026-10-18"
 ---
 
 A bar chart that plays like a race. Bars grow, shrink and overtake each other as the years tick by: here, 19 social networks from 2002 to 2018.

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-10-08"
+scraped: "2026-10-18"
 ---
 
 A bar chart with a photo on each bar. Point at a bar and the photo slides along it to the end. Here, step counts for six friends, the bars darker the more they walked.

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

@@ -2,10 +2,10 @@
 title: "Bullet Chart"
 source: "https://www.amcharts.com/demos/bullet-chart/"
 category: "column-bar"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
-A bullet chart says what a gauge says in a strip: the black bar is the actual value, the short line is the target, and the colors behind say how good each level is. Two styles: a smooth gradient and five bands.
+A bullet chart says what a gauge says in a strip: the bar is the actual value, the short line is the target, and the colors behind say how good each level is. Two styles: a smooth gradient and five bands.
 
 When a bullet chart works: Bullet charts do what dashboard gauges do in a fraction of the space: one value, its target and the ranges that say good or bad, all read along one scale. Several of them stack neatly, one measure per row, where gauges would need a grid of circles.
 
@@ -38,14 +38,16 @@ root.setThemes([
 // Two bullet charts in one root, one above the other
 root.container.set("layout", root.verticalLayout);
 
-// The qualitative ranges, from poor (orange) to good (green): the higher, the better
-var colors = [
-  am5.color(0xfb7116),
-  am5.color(0xf6d32b),
-  am5.color(0xf4fb16),
-  am5.color(0xb4dd1e),
-  am5.color(0x19d228)
-];
+// The qualitative ranges, from poor to good: the higher, the better. Five colors on the theme's scale from its color
+// for negative values (red) through its warning color (yellow) to its positive one (green), so they follow the theme
+// and dark mode
+var colors = [0, 0.25, 0.5, 0.75, 1].map(function(position) {
+  return am5.Color.interpolateColors(position, [
+    root.interfaceColors.get("negative"),
+    root.interfaceColors.get("warning"),
+    root.interfaceColors.get("positive")
+  ]);
+});
 
 // one bullet chart: a gradient behind the bar when gradient is true, solid bands if not
 function createBulletChart(gradient) {
@@ -134,8 +136,9 @@ function createBulletChart(gradient) {
       yAxis: yAxis,
       valueXField: "value",
       categoryYField: "category",
-      fill: am5.color(0x000000), // a black bar
-      stroke: am5.color(0x000000),
+      // a bar in the theme's text color: black, or light in dark mode
+      fill: root.interfaceColors.get("alternativeBackground"),
+      stroke: root.interfaceColors.get("alternativeBackground"),
       tooltip: am5.Tooltip.new(root, {
         pointerOrientation: "left",    // the tooltip sits to the right, pointing left
         labelText: "Actual: {valueX}%" // the actual value
@@ -157,8 +160,9 @@ function createBulletChart(gradient) {
       yAxis: yAxis,
       valueXField: "value",
       categoryYField: "category",
-      stroke: am5.color(0x000000), // a black line
-      fill: am5.color(0x000000),
+      // a line in the theme's text color, as the bar
+      stroke: root.interfaceColors.get("alternativeBackground"),
+      fill: root.interfaceColors.get("alternativeBackground"),
       noRisers: true,
       // half the row tall, the same as the bar
       stepWidth: am5.p50,

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-10-08"
+scraped: "2026-10-18"
 ---
 
 A progress bar toward net zero, built from a column chart: fifteen cells from red at 20+ through yellow to green, a pin on the current level, 10, and a GOAL ZERO badge at the end.
@@ -49,96 +49,102 @@ var chart = root.container.children.push(am5xy.XYChart.new(root, {
   centerY: am5.p50
 }));
 
+// The cells' colors: the theme's color for negative values (red) for the years furthest from the goal, its positive
+// one (green) for the nearest, and its warning color (yellow) in the middle, so they follow the theme and dark mode
+var far = root.interfaceColors.get("negative");
+var near = root.interfaceColors.get("positive");
+var between = root.interfaceColors.get("warning");
+
 var data = [{
   category: "15",
   value: 100,
   columnSettings: {
-    fill: am5.color(0xc6251a)
+    fill: far
   }
 }, {
   category: "14",
   value: 100,
   columnSettings: {
-    fill: am5.color(0xc6251a)
+    fill: far
   }
 }, {
   category: "13",
   value: 100,
   columnSettings: {
-    fill: am5.color(0xc6251a)
+    fill: far
   }
 }, {
   category: "12",
   value: 100,
   columnSettings: {
-    fill: am5.color(0xc6251a)
+    fill: far
   }
 }, {
   category: "11",
   value: 100,
   columnSettings: {
-    fill: am5.color(0xc6251a)
+    fill: far
   }
 }, {
   category: "10",
   value: 100,
   currentBullet: true,
   columnSettings: {
-    fill: am5.color(0xfcc034)
+    fill: between
   }
 }, {
   category: "9",
   value: 100,
   columnSettings: {
-    fill: am5.color(0xfcc034)
+    fill: between
   }
 }, {
   category: "8",
   value: 100,
   columnSettings: {
-    fill: am5.color(0xfcc034)
+    fill: between
   }
 }, {
   category: "7",
   value: 100,
   columnSettings: {
-    fill: am5.color(0xfcc034)
+    fill: between
   }
 }, {
   category: "6",
   value: 100,
   columnSettings: {
-    fill: am5.color(0xfcc034)
+    fill: between
   }
 }, {
   category: "5",
   value: 100,
   columnSettings: {
-    fill: am5.color(0x6bc352)
+    fill: near
   }
 }, {
   category: "4",
   value: 100,
   columnSettings: {
-    fill: am5.color(0x6bc352)
+    fill: near
   }
 }, {
   category: "3",
   value: 100,
   columnSettings: {
-    fill: am5.color(0x6bc352)
+    fill: near
   }
 }, {
   category: "2",
   value: 100,
   columnSettings: {
-    fill: am5.color(0x6bc352)
+    fill: near
   }
 }, {
   category: "1",
   value: 100,
   columnSettings: {
-    fill: am5.color(0x6bc352)
+    fill: near
   }
 }, {
   category: "0",
@@ -245,14 +251,15 @@ series.bullets.push(function(root, target, dataItem) {
     });
 
     var circle = container.children.push(am5.Circle.new(root, {
-      radius: 34,                // a 34px radius
-      fill: am5.color(0x11326d), // dark blue
+      radius: 34, // a 34px radius
+      // the theme's text color (dark, or light in dark mode), so the badge stands out in any theme
+      fill: root.interfaceColors.get("alternativeBackground"),
     }));
 
     var label = container.children.push(am5.Label.new(root, {
       text: "GOAL\n[bold]ZERO[/]", // two lines, the second in bold
       textAlign: "center",         // both lines centered
-      fill: am5.color(0xffffff),   // white text
+      fill: root.interfaceColors.get("background"), // text in the background color, on the badge
       centerY: am5.p50,
       centerX: am5.p50,
       populateText: true,

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

@@ -2,7 +2,7 @@
 title: "Clustered Bar Chart"
 source: "https://www.amcharts.com/demos/clustered-bar-chart/"
 category: "column-bar"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A clustered bar chart lays the series side by side for each category. Here, income and expenses for five years: each bar carries its name inside its end and its value just past it.

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

@@ -2,7 +2,7 @@
 title: "Clustered Column Chart"
 source: "https://www.amcharts.com/demos/clustered-column-chart/"
 category: "column-bar"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A clustered column chart puts the series side by side in each category, so you compare them group by group. Here, six regions over three years, each column labeled with its value.