@amcharts/amcharts5-mcp 1.7.0 → 1.8.0

package/extended/examples/miscellaneous/micro-charts-sparklines.md

@@ -2,7 +2,7 @@
 title: "Micro Charts & Sparklines"
 source: "https://www.amcharts.com/demos/micro-charts-sparklines/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 Micro charts are tiny charts with no axes, grid or labels, small enough for a table row. Here, 40 made-up stock tickers, each with a price line and volume columns.
@@ -32,9 +32,6 @@ var tickers = [
   "SONY", "STX", "T", "TSLA", "TSM", "TXN", "U", "UBER", "WDC", "ZM"
 ];
 
-var positive = am5.color(0x50b300); // green for rising...
-var negative = am5.color(0xdc3545); // ...red for falling
-
 // The rows scroll inside the chart's div
 var div = document.getElementById("chartdiv");
 div.style.overflow = "auto";
@@ -46,7 +43,7 @@ for (var i = 0; i < tickers.length; i++) {
   var data = generateData(20);                  // 20 days of random prices and volumes
   // the change from the first day to the last, in percent with one decimal
   var change = Math.round((data[data.length - 1].value / data[0].value - 1) * 1000) / 10;
-  var color = change < 0 ? negative : positive; // red when falling, green when rising
+  var rising = change >= 0;
 
   // One row per ticker: name, change, price line, volume columns, laid out
   // as a grid so the columns line up from row to row
@@ -65,22 +62,22 @@ for (var i = 0; i < tickers.length; i++) {
 
   var col2 = document.createElement("div");
   col2.innerHTML = change + "%";
-  col2.style.color = color.toCSSHex(); // the change in red or green...
-  col2.style.textAlign = "right";      // ...right-aligned, so the numbers end in line
+  col2.style.textAlign = "right"; // right-aligned, so the numbers end in line
   row.appendChild(col2);
 
   var col3 = document.createElement("div");
   col3.style.height = "35px";                     // the micro chart is 35px tall
   row.appendChild(col3);
-  var root = createValueChart(col3, data, color); // a price line in the row's color
+  var root = createValueChart(col3, data, rising); // a price line, green when rising, red when falling
 
   var col4 = document.createElement("div");
   col4.style.height = "35px";    // 35px tall too
   row.appendChild(col4);
   createVolumeChart(col4, data); // gray volume columns
 
-  // The ticker and the line under the row take the chart theme's text color,
-  // so they show on light and dark backgrounds
+  // The change takes the theme's color for rising or falling values (green or red by default); the ticker and
+  // the line under the row take its text color, so they show on light and dark backgrounds
+  col2.style.color = root.interfaceColors.get(rising ? "positive" : "negative").toCSSHex();
   var textColor = root.interfaceColors.get("text");
   col1.style.color = textColor.toCSSHex();
   row.style.borderBottom = "1px solid " + textColor.toCSS(0.12);
@@ -112,7 +109,7 @@ function generateData(count) {
 }
 
 // a tiny line chart of the price in the given div
-function createValueChart(div, data, color) {
+function createValueChart(div, data, rising) {
   var root = am5.Root.new(div); // each micro chart is a root of its own, in its own div
 
   // the Micro theme drops axis labels, grid and padding, to suit a tiny chart
@@ -151,7 +148,7 @@ function createValueChart(div, data, color) {
     yAxis: yAxis,
     valueYField: "value",
     valueXField: "date",
-    stroke: color // red or green, by the change
+    stroke: root.interfaceColors.get(rising ? "positive" : "negative") // the theme's green or red, by the change
   }));
 
   series.strokes.template.setAll({

package/extended/examples/miscellaneous/pictogram.md

@@ -2,7 +2,7 @@
 title: "Pictogram"
 source: "https://www.amcharts.com/demos/pictogram/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A pictogram shows a share as a grid of small figures, one for each person in a hundred, so a number becomes something you can see. Here, 58 of 100 men and 67 of 100 women, the counted figures in color over gray ones.
@@ -183,7 +183,7 @@ function makeSeries(name, yAxis, data, color, path, withTooltip) {
   return series;
 }
 
-var placeholderColor = am5.color(0x999999); // the gray of the 100 background icons
+var placeholderColor = root.interfaceColors.get("disabled"); // the theme's gray, for the 100 background icons
 
 // the icons as SVG paths, drawn in a 50px box
 var maleIcon = "M 25.1 10.7 c 2.1 0 3.7 -1.7 3.7 -3.7 c 0 -2.1 -1.7 -3.7 -3.7 -3.7 c -2.1 0 -3.7 1.7 -3.7 3.7 C 21.4 9 23 10.7 25.1 10.7 z M 28.8 11.5 H 25.1 h -3.7 c -2.8 0 -4.7 2.5 -4.7 4.8 V 27.7 c 0 2.2 3.1 2.2 3.1 0 V 17.2 h 0.6 v 28.6 c 0 3 4.2 2.9 4.3 0 V 29.3 h 0.7 h 0.1 v 16.5 c 0.2 3.1 4.3 2.8 4.3 0 V 17.2 h 0.5 v 10.5 c 0 2.2 3.2 2.2 3.2 0 V 16.3 C 33.5 14 31.6 11.5 28.8 11.5 z";

package/extended/examples/miscellaneous/population-pyramid.md

@@ -2,7 +2,7 @@
 title: "Population Pyramid"
 source: "https://www.amcharts.com/demos/population-pyramid/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A population pyramid puts men and women back to back, one bar per age group, the youngest at the bottom: its shape shows how old a population is. Here, the United States; click a state on the map for its own pyramid.
@@ -4117,9 +4117,10 @@ usData = aggregateData(usData); // shares for the whole country, shown first
 var root = am5.Root.new("chartdiv");
 
 // Set themes
+var responsive = am5themes_Responsive.new(root); // kept in a variable: a rule of its own is added below
 root.setThemes([
   am5themes_Animated.new(root),
-  am5themes_Responsive.new(root)
+  responsive
 ]);
 
 // Create wrapper container
@@ -4276,6 +4277,29 @@ var title = map.children.push(am5.Label.new(root, {
   })
 }));
 
+// On a narrow chart (a phone) the map goes under the pyramid instead of beside it: side by side, the
+// pyramid's two columns of age labels would leave its bars no room. The rule is undone on a wider chart
+responsive.addRule({
+  relevant: function (width) { return width < 600; }, // the chart is under 600px wide
+  applying: function () {
+    container.set("layout", root.verticalLayout); // one above the other
+    chart.setAll({ width: am5.p100, height: am5.percent(64) }); // the pyramid on top, 64% of the height
+    // the map in the rest, drawn below a strip for the title
+    map.setAll({ width: am5.p100, height: am5.percent(36), paddingTop: 22 });
+    title.setAll({ fontSize: 14, y: 0 }); // a smaller title, in that strip
+    maleLabel.set("fontSize", 14); // smaller Males and Females labels, which fit the narrower plot
+    femaleLabel.set("fontSize", 14);
+  },
+  removing: function () {
+    container.set("layout", root.horizontalLayout); // back side by side
+    chart.setAll({ width: am5.percent(60), height: am5.p100 });
+    map.setAll({ width: am5.percent(40), height: am5.p100, paddingTop: 0 });
+    title.setAll({ fontSize: 20, y: 20 });
+    maleLabel.set("fontSize", 20);
+    femaleLabel.set("fontSize", 20);
+  }
+});
+
 // Create polygon series
 var polygonSeries = map.series.push(
   am5map.MapPolygonSeries.new(root, {

package/extended/examples/miscellaneous/progress-chart.md

@@ -2,7 +2,7 @@
 title: "Progress Chart"
 source: "https://www.amcharts.com/demos/progress-chart/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A progress chart shows how far something has come on one bar from 0 to 100%, here in five stages of different lengths, each with its own color and start mark.
@@ -48,13 +48,23 @@ var chart = root.container.children.push(am5xy.XYChart.new(root, {
   centerY: am5.p50
 }));
 
+// A color on the theme's scale from its color for negative values (red, 0) through its warning color (yellow, 0.5) to
+// its positive one (green, 1), so the stages follow the theme and dark mode
+function scaleColor(position) {
+  return am5.Color.interpolateColors(position, [
+    root.interfaceColors.get("negative"),
+    root.interfaceColors.get("warning"),
+    root.interfaceColors.get("positive")
+  ]);
+}
+
 var data = [{
   category: "",
   from: 0,
   to: 15,
   name: "Stage #1",
   columnSettings: {
-    fill: am5.color(0x0ca948)
+    fill: scaleColor(1)    // green
   }
 }, {
   category: "",
@@ -62,7 +72,7 @@ var data = [{
   to: 75,
   name: "Stage #2",
   columnSettings: {
-    fill: am5.color(0x93da49)
+    fill: scaleColor(0.75) // yellow-green
   }
 }, {
   category: "",
@@ -70,7 +80,7 @@ var data = [{
   to: 90,
   name: "Stage #3",
   columnSettings: {
-    fill: am5.color(0xffd100)
+    fill: scaleColor(0.5)  // yellow
   }
 }, {
   category: "",
@@ -78,7 +88,7 @@ var data = [{
   to: 95,
   name: "Stage #4",
   columnSettings: {
-    fill: am5.color(0xcd213b)
+    fill: scaleColor(0)    // red
   }
 }, {
   category: "",
@@ -86,7 +96,7 @@ var data = [{
   to: 100,
   name: "Stage #5",
   columnSettings: {
-    fill: am5.color(0x9e9e9e)
+    fill: root.interfaceColors.get("disabled") // the theme's gray
   }
 }];
 

package/extended/examples/miscellaneous/range-bullet-chart.md

@@ -2,7 +2,7 @@
 title: "Range Bullet Chart"
 source: "https://www.amcharts.com/demos/range-bullet-chart/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A range bullet chart shows the spread of a score as a bar from its lowest to its highest value, with a marker for the average. Here, the scores two options got: a circle at each end and a triangle at the average.

package/extended/examples/miscellaneous/sentence-cloud.md

@@ -2,7 +2,7 @@
 title: "Sentence Cloud"
 source: "https://www.amcharts.com/demos/sentence-cloud/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A word cloud of whole phrases, each in its own colored box and sized by how often it comes up. Here, what a café’s customers say most in their reviews.

package/extended/examples/miscellaneous/shaped-word-cloud.md

@@ -2,7 +2,7 @@
 title: "Shaped Word Cloud"
 source: "https://www.amcharts.com/demos/shaped-word-cloud/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A word cloud that fills a shape: the words pack into the outline of a head, each sized by its weight. Here, what might be on someone’s mind, from money, family and work down to socks and wifi.

package/extended/examples/miscellaneous/spectrum-chart.md

@@ -2,7 +2,7 @@
 title: "Spectrum Chart"
 source: "https://www.amcharts.com/demos/spectrum-chart/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A spectrum chart is a single bar split into periods and colored by status, like a strip of colored tape along a time line. Here, a machine’s afternoon from 11:00 to 17:30: normal running, alarms, anomalies and one critical error.
@@ -43,12 +43,14 @@ var chart = root.container.children.push(am5xy.XYChart.new(root, {
   layout: root.verticalLayout // the legend goes below the plot
 }));
 
-// Status colors, shared by the bars and the legend
+// Status colors, shared by the bars and the legend, from the theme so they follow it and dark mode: its colors for
+// positive values (green), warnings (yellow) and negative values (red), and the chart's first series color for an
+// anomaly, which is off that good-to-bad scale
 var colors = {
-  "Normal operation": am5.color(0x69a74f),
-  "Minor alarm": am5.color(0xfb9900),
-  "Anomaly": am5.color(0x664ea6),
-  "Critical error": am5.color(0xcc0c00)
+  "Normal operation": root.interfaceColors.get("positive"),
+  "Minor alarm": root.interfaceColors.get("warning"),
+  "Anomaly": chart.get("colors").getIndex(0),
+  "Critical error": root.interfaceColors.get("negative")
 };
 
 // One entry per period: when it started and ended, and the machine's status

package/extended/examples/miscellaneous/strip-plot.md

@@ -2,7 +2,7 @@
 title: "Strip Plot"
 source: "https://www.amcharts.com/demos/strip-plot/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A strip plot puts every value of a group on one line, so you see how they spread instead of a single average. Here, made-up posts on twelve social networks: when each went out and, by its size, how many likes it got.

package/extended/examples/miscellaneous/tag-cloud.md

@@ -2,7 +2,7 @@
 title: "Tag Cloud"
 source: "https://www.amcharts.com/demos/tag-cloud/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 Tags sized and colored by weight, each one a link: the languages most used in the 2021 Stack Overflow survey. Click one to open its questions.

package/extended/examples/miscellaneous/tile-map.md

@@ -2,7 +2,7 @@
 title: "Tile Map"
 source: "https://www.amcharts.com/demos/tile-map/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 Every state gets one same-size tile, roughly where it lies, so small states count as much as big ones. Here, the 50 states and D.C., by population.

package/extended/examples/miscellaneous/venn-diagram-with-patterns.md

@@ -2,7 +2,7 @@
 title: "Venn Diagram with Patterns"
 source: "https://www.amcharts.com/demos/venn-diagram-with-patterns/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A Venn diagram draws each group as a circle, and the overlap holds what belongs to both. Here, a joke in black and white: a polar bear and a black bear overlap in a panda, filled with a dot pattern.

package/extended/examples/miscellaneous/venn-diagram.md

@@ -2,7 +2,7 @@
 title: "Venn Diagram"
 source: "https://www.amcharts.com/demos/venn-diagram/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A Venn diagram draws each group as a circle and puts what groups share where the circles overlap. Here, three sets, A, B and C, with areas sized by how many items each part holds.
@@ -69,7 +69,7 @@ series.slices.template.set("tooltipText", "{category}: {value}");
 // Set up hover appearance
 series.hoverGraphics.setAll({
   strokeDasharray: [3, 3],     // a dashed outline around the area under the mouse...
-  stroke: am5.color(0xffffff), // ...in white...
+  stroke: root.interfaceColors.get("background"), // ...in the background's color (white, or dark in dark mode)...
   strokeWidth: 2               // ...2px wide
 });
 

package/extended/examples/miscellaneous/vertically-stacked-axes-chart.md

@@ -2,7 +2,7 @@
 title: "Vertically Stacked Axes Chart"
 source: "https://www.amcharts.com/demos/vertically-stacked-axes-chart/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 One chart split into three panes stacked on top of each other, each with its own value axis, and one row of names along the bottom for all three. Here, a sales team’s quarter: deals closed, calls made and revenue per person.

package/extended/examples/miscellaneous/violin-chart.md

@@ -2,7 +2,7 @@
 title: "Violin Chart"
 source: "https://www.amcharts.com/demos/violin-chart/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A violin chart shows how values are spread: the shape is widest where most values fall and thin where few do, mirrored around its middle line. Here, about 200 values in each of four regions, one violin per row.

package/extended/examples/miscellaneous/word-cloud.md

@@ -2,7 +2,7 @@
 title: "Word Cloud"
 source: "https://www.amcharts.com/demos/word-cloud/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A word cloud sizes each word by how often it appears in a text, so the words used most stand out at once. Here, the king’s first speech in Shakespeare’s Hamlet.

package/extended/examples/pie-donut/animated-time-line-pie-chart.md

@@ -2,7 +2,7 @@
 title: "Animated Time-Line Pie Chart"
 source: "https://www.amcharts.com/demos/animated-time-line-pie-chart/"
 category: "pie-donut"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A donut that plays through 1995 to 2014: every four seconds it moves on a year, and each slice grows or shrinks with its sector’s share of the economy.

package/extended/examples/pie-donut/donut-chart.md

@@ -2,7 +2,7 @@
 title: "Donut Chart"
 source: "https://www.amcharts.com/demos/donut-chart/"
 category: "pie-donut"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A pie chart with the middle cut out. It shows how a whole splits into parts, and the hole holds the total: here, a $3,000 monthly budget.

package/extended/examples/pie-donut/donut-with-radial-gradient.md

@@ -2,7 +2,7 @@
 title: "Donut with Radial Gradient"
 source: "https://www.amcharts.com/demos/donut-with-radial-gradient/"
 category: "pie-donut"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A donut where every slice is softly shaded, darker at its edges than in the middle of the ring. The shade is made from the slice colors, so it follows any theme.

package/extended/examples/pie-donut/dragging-pie-slices.md

@@ -2,7 +2,7 @@
 title: "Dragging Pie Slices"
 source: "https://www.amcharts.com/demos/dragging-pie-slices/"
 category: "pie-donut"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 Two donuts with a line between them. Drag a slice across the line and it moves to the other donut; let go too early and it snaps back.
@@ -201,8 +201,8 @@ var data = [
     category: "Dummy",
     value: 1000,
     settings: {
-      fill: am5.color(0xdadada),
-      stroke: am5.color(0xdadada),
+      fill: root.interfaceColors.get("disabled"),   // the theme's gray, so it suits every theme and dark mode
+      stroke: root.interfaceColors.get("disabled"),
       fillOpacity: 0.3,
       strokeDasharray: [4, 4],
       tooltipText: null, // no tooltip

package/extended/examples/pie-donut/grained-gradient-pie.md

@@ -2,7 +2,7 @@
 title: "Grainy Gradient Pie"
 source: "https://www.amcharts.com/demos/grained-gradient-pie/"
 category: "pie-donut"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A donut with a fine grain over soft gradients, rounded slices and shadows that deepen on hover. A printed, tactile look instead of flat color.

package/extended/examples/pie-donut/nested-donut-chart.md

@@ -2,7 +2,7 @@
 title: "Nested Donut Chart"
 source: "https://www.amcharts.com/demos/nested-donut-chart/"
 category: "pie-donut"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 Two rings, one inside the other, for two measures of the same countries: bottles sold inside, litres outside. Where the rings don’t line up, the measures disagree.

package/extended/examples/pie-donut/pie-chart-broken-slices.md

@@ -2,7 +2,7 @@
 title: "Pie Chart with Broken Down Slices"
 source: "https://www.amcharts.com/demos/pie-chart-broken-slices/"
 category: "pie-donut"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A pie that opens up when clicked: click a slice and it breaks into the parts it is made of, while the other slices stay put. Here, fossil and green energy.

package/extended/examples/pie-donut/pie-chart-with-legend.md

@@ -2,7 +2,7 @@
 title: "Pie Chart with Legend"
 source: "https://www.amcharts.com/demos/pie-chart-with-legend/"
 category: "pie-donut"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A pie chart with a legend under it. The legend names every slice and works as a switch: click an item and the pie redraws without it.

package/extended/examples/pie-donut/pie-chart.md

@@ -2,7 +2,7 @@
 title: "Pie Chart"
 source: "https://www.amcharts.com/demos/pie-chart/"
 category: "pie-donut"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 The classic way to show parts of a whole: one circle, cut into slices sized by their share. Here, seven countries.

package/extended/examples/pie-donut/pie-of-a-pie.md

@@ -2,7 +2,7 @@
 title: "Pie of a Pie (Exploding Pie Chart)"
 source: "https://www.amcharts.com/demos/pie-of-a-pie/"
 category: "pie-donut"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 Two pies joined by lines: click a slice of the big pie and it turns to face the small one, which shows what that slice is made of.

package/extended/examples/pie-donut/semi-circle-pie-chart.md

@@ -2,7 +2,7 @@
 title: "Semi-Circle Pie Chart"
 source: "https://www.amcharts.com/demos/semi-circle-pie-chart/"
 category: "pie-donut"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 Half a donut: the same shares as a pie, in half the height. It fits in a dashboard row or across the top of a report.

package/extended/examples/pie-donut/simple-pie-chart.md

@@ -2,7 +2,7 @@
 title: "Simple Pie Chart"
 source: "https://www.amcharts.com/demos/simple-pie-chart/"
 category: "pie-donut"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A pie chart with nothing extra: seven values, seven slices, and no legend or settings in the way. A clean starting point for your own.

package/extended/examples/pie-donut/two-level-pie-chart.md

@@ -2,7 +2,7 @@
 title: "Two-Level Pie Chart"
 source: "https://www.amcharts.com/demos/two-level-pie-chart/"
 category: "pie-donut"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A thin ring of parts inside a wider, see-through band that groups some of them together. Here the band shows that First and Second belong together.

package/extended/examples/pie-donut/two-pie-charts-with-single-legend.md

@@ -2,7 +2,7 @@
 title: "Two Linked Pie Charts with a Legend"
 source: "https://www.amcharts.com/demos/two-pie-charts-with-single-legend/"
 category: "pie-donut"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 Two donuts, one legend: the same four countries in two groups side by side, each with its total in the middle. Point at a slice and its twin lights up in the other donut.

package/extended/examples/pie-donut/variable-radius-nested-donut-chart.md

@@ -2,7 +2,7 @@
 title: "Variable-Radius Nested Donut Chart"
 source: "https://www.amcharts.com/demos/variable-radius-nested-donut-chart/"
 category: "pie-donut"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A thin ring inside a wide one, drawn as an open arc, with the total in the gap: litres on the inner ring, bottles on the outer, for nine countries.

package/extended/examples/pie-donut/variable-radius-nested-pie.md

@@ -2,7 +2,7 @@
 title: "Variable-Radius Nested Pie"
 source: "https://www.amcharts.com/demos/variable-radius-nested-pie/"
 category: "pie-donut"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 How the EU grew: the inner ring is each enlargement, from the founding members in 1957 to 2007, and the outer ring the countries that joined, sized by their population today.

package/extended/examples/pie-donut/variable-radius-pie-chart.md

@@ -2,7 +2,7 @@
 title: "Variable Radius Pie Chart"
 source: "https://www.amcharts.com/demos/variable-radius-pie-chart/"
 category: "pie-donut"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A pie where slices differ in length as well as width: the bigger the value, the further a slice reaches from the middle. The largest parts stand out at once.

package/extended/examples/radar-polar/flower-chart.md

@@ -2,7 +2,7 @@
 title: "Flower Chart"
 source: "https://www.amcharts.com/demos/flower-chart/"
 category: "radar-polar"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A radar column chart where the columns fill only the middle of each slice, so they stand apart like petals. Here, two coffees scored on eight tasting notes.

package/extended/examples/radar-polar/live-sorting-of-radar-columns.md

@@ -2,7 +2,7 @@
 title: "Live Sorting of Radar Columns"
 source: "https://www.amcharts.com/demos/live-sorting-of-radar-columns/"
 category: "radar-polar"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A column chart bent into a ring that keeps itself sorted. Every 1.5 seconds, eleven countries get new values, and the columns slide into their new places, biggest first.

package/extended/examples/radar-polar/polar-area-chart.md

@@ -2,7 +2,7 @@
 title: "Polar Area Chart"
 source: "https://www.amcharts.com/demos/polar-area-chart/"
 category: "radar-polar"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A polar area chart, also called a rose or coxcomb chart, draws a stacked column for every direction around a circle. Here, a wind rose: where the wind comes from, and how strong.

package/extended/examples/radar-polar/polar-chart.md

@@ -2,7 +2,7 @@
 title: "Polar Chart"
 source: "https://www.amcharts.com/demos/polar-chart/"
 category: "radar-polar"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A polar chart places values by direction: the farther a point from the middle, the higher the value. Here, the average wind speed at a beach from eight directions, with onshore winds shaded blue and offshore winds red.
@@ -135,7 +135,7 @@ series.data.setAll(data);
 xAxis.data.setAll(data);
 
 // Shade sectors with axis ranges: the beach faces north-west, so winds from NW and N blow in from the sea
-// (onshore, blue) and winds from SE and S blow out to sea (offshore, red)
+// (onshore, in the chart's first color) and winds from SE and S blow out to sea (offshore, in the theme's red)
 // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/axis-ranges/
 function shadeSector(category, endCategory, color) {
   // the range runs from the start of category to the end of endCategory
@@ -148,9 +148,9 @@ function shadeSector(category, endCategory, color) {
   range.get("label").set("forceHidden", true); // no second direction name over the axis labels
 }
 
-shadeSector("NW", "NW", am5.color(0x3b82f6));
-shadeSector("N", "N", am5.color(0x3b82f6));
-shadeSector("SE", "S", am5.color(0xef4444));
+shadeSector("NW", "NW", chart.get("colors").getIndex(0));
+shadeSector("N", "N", chart.get("colors").getIndex(0));
+shadeSector("SE", "S", root.interfaceColors.get("negative"));
 
 // Animate chart
 // https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation

package/extended/examples/radar-polar/polar-scatter.md

@@ -2,7 +2,7 @@
 title: "Polar Scatter"
 source: "https://www.amcharts.com/demos/polar-scatter/"
 category: "radar-polar"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A scatter plot on a 24-hour clock: each dot is one commuter trip, placed by the time it started and how long it took. Car trips stretch out at rush hour; train trips take about the same time all day.