@amcharts/amcharts5-mcp 1.7.0 → 1.8.0

package/extended/examples/gauges/gauge-with-bands.md

@@ -2,7 +2,7 @@
 title: "Gauge with Bands"
 source: "https://www.amcharts.com/demos/gauge-with-bands/"
 category: "gauges"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A gauge split into seven colored bands, from Unsustainable to High Performing. The needle takes the color of the band it points at, and the score sits in its pin.
@@ -124,46 +124,49 @@ setInterval(function () {
   });
 }, 2000)
 
-// Create axis ranges bands
+// Create axis ranges bands, colored 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
 // https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Bands
+function scaleColor(position) {
+  return am5.Color.interpolateColors(position, [
+    root.interfaceColors.get("negative"),
+    root.interfaceColors.get("warning"),
+    root.interfaceColors.get("positive")
+  ]);
+}
+
 var bandsData = [{
   title: "Unsustainable",
-  color: "#ee1f25",
   lowScore: -40,
   highScore: -20
 }, {
   title: "Volatile",
-  color: "#f04922",
   lowScore: -20,
   highScore: 0
 }, {
   title: "Foundational",
-  color: "#fdae19",
   lowScore: 0,
   highScore: 20
 }, {
   title: "Developing",
-  color: "#f3eb0c",
   lowScore: 20,
   highScore: 40
 }, {
   title: "Maturing",
-  color: "#b0d136",
   lowScore: 40,
   highScore: 60
 }, {
   title: "Sustainable",
-  color: "#54b947",
   lowScore: 60,
   highScore: 80
 }, {
   title: "High Performing",
-  color: "#0f9747",
   lowScore: 80,
   highScore: 100
 }];
 
-am5.array.each(bandsData, function (data) {
+am5.array.each(bandsData, function (data, i) {
+  var color = scaleColor(i / (bandsData.length - 1)); // the first band red, the last green
   var axisRange = xAxis.createAxisRange(xAxis.makeDataItem({}));
 
   axisRange.setAll({
@@ -173,7 +176,7 @@ am5.array.each(bandsData, function (data) {
 
   axisRange.get("axisFill").setAll({
     visible: true,               // shown (axis fills are hidden by default)
-    fill: am5.color(data.color), // the band's color...
+    fill: color,                 // the band's color...
     fillOpacity: 0.8             // ...slightly see-through
   });
 
@@ -182,7 +185,7 @@ am5.array.each(bandsData, function (data) {
     inside: true,                          // the label sits inside the ring
     radius: 15,
     fontSize: "0.9em",                     // a little smaller
-    fill: textColor(am5.color(data.color)) // white or black, whichever reads better on the band
+    fill: textColor(color)                 // white or black, whichever reads better on the band
   });
 });
 

package/extended/examples/gauges/gauge-with-gradient-fill.md

@@ -2,10 +2,10 @@
 title: "Gauge with Gradient Fill"
 source: "https://www.amcharts.com/demos/gauge-with-gradient-fill/"
 category: "gauges"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
-A gauge shows one value as a needle on a dial. Here the dial is one arc fading from green to orange, so you see at once how close the value is to its maximum.
+A gauge shows one value as a needle on a dial. Here the dial is one arc fading from green to red, so you see at once how close the value is to its maximum.
 
 When a gradient gauge works: A gradient scale suits values that get gradually better or worse, like load, temperature or risk, where there is no sharp line between good and bad. The eye reads the color under the needle before the number. When fixed thresholds matter, use separate bands instead.
 
@@ -16,7 +16,7 @@ Good for:
 
 Think twice when:
 - Thresholds people act on: clear bands show them better
-- Readers who can’t tell green from orange: add a number
+- Readers who can’t tell green from red: add a number
 - Several values: a bar chart fits more in less space
 
 Prompt: Create a half-circle gauge from 0 to 100 whose scale is a thick band with a gradient running from safe to dangerous colors, and a needle that moves to a random value every 2 seconds. Use the amCharts 5 library with its Responsive theme.
@@ -47,6 +47,16 @@ var chart = root.container.children.push(
   })
 );
 
+// 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 arc follows 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")
+  ]);
+}
+
 // Create axis and its renderer
 // https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Axes
 var axisRenderer = am5radar.AxisRendererCircular.new(root, {
@@ -55,12 +65,12 @@ var axisRenderer = am5radar.AxisRendererCircular.new(root, {
   strokeOpacity: 1,
   strokeWidth: 15,
   strokeGradient: am5.LinearGradient.new(root, {
-    rotation: 0, // left to right: green to orange
+    rotation: 0, // left to right: green to red
     stops: [
-      { color: am5.color(0x19d228) },
-      { color: am5.color(0xf4fb16) },
-      { color: am5.color(0xf6d32b) },
-      { color: am5.color(0xfb7116) }
+      { color: scaleColor(1) },
+      { color: scaleColor(0.67) },
+      { color: scaleColor(0.33) },
+      { color: scaleColor(0) }
     ]
   })
 });

package/extended/examples/gauges/multi-part-gauge.md

@@ -2,7 +2,7 @@
 title: "Multi-Part Gauge"
 source: "https://www.amcharts.com/demos/multi-part-gauge/"
 category: "gauges"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 Four small gauges in one circle: each quarter is its own arc with its own scale, color and needle, so one chart shows four readings side by side.

package/extended/examples/gauges/solid-gauge.md

@@ -2,7 +2,7 @@
 title: "Solid Gauge"
 source: "https://www.amcharts.com/demos/solid-gauge/"
 category: "gauges"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 Four progress bars bent into rings, one inside the other, each filling its track up to a percentage. Here, four departments from 35% to 92%.

package/extended/examples/gauges/yes-and-no-gauge.md

@@ -2,7 +2,7 @@
 title: "Yes and No Gauge"
 source: "https://www.amcharts.com/demos/yes-and-no-gauge/"
 category: "gauges"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A gauge with only two answers: a green YES half and a red NO half. The needle swings from one to the other every two seconds.

package/extended/examples/hierarchy/collapsible-force-directed-tree.md

@@ -2,7 +2,7 @@
 title: "Collapsible Force-Directed Tree"
 source: "https://www.amcharts.com/demos/collapsible-force-directed-tree/"
 category: "hierarchy"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A force-directed tree links bubbles with lines and lets them push and pull until they settle. This one maps the flavors of coffee, from families like Fruity down to single notes, and opens a branch when you click it.

package/extended/examples/hierarchy/drill-down-sunburst-chart.md

@@ -2,7 +2,7 @@
 title: "Drill-Down Sunburst Chart"
 source: "https://www.amcharts.com/demos/drill-down-sunburst-chart/"
 category: "hierarchy"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A sunburst you explore one branch at a time: click a category and it becomes the inner ring, with its own breakdown around it. Here, a year of an online store’s sales.

package/extended/examples/hierarchy/drill-down-treemap.md

@@ -2,7 +2,7 @@
 title: "Drill-Down Treemap"
 source: "https://www.amcharts.com/demos/drill-down-treemap/"
 category: "hierarchy"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A treemap you explore one level at a time: the first view shows the 18 brands that sold over 200,000 vehicles in the US in 2017, and clicking a brand opens its models. The breadcrumb bar on top leads back.

package/extended/examples/hierarchy/dynamic-data-updates-on-treemap.md

@@ -2,7 +2,7 @@
 title: "Dynamic Data Updates on Treemap"
 source: "https://www.amcharts.com/demos/dynamic-data-updates-on-treemap/"
 category: "hierarchy"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A treemap that keeps changing: every two seconds the values move and the boxes slide to new sizes. Here, made-up visits to an online store’s pages.

package/extended/examples/hierarchy/force-directed-adding-links.md

@@ -2,7 +2,7 @@
 title: "Force-Directed Adding Links"
 source: "https://www.amcharts.com/demos/force-directed-adding-links/"
 category: "hierarchy"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A network you draw yourself: click one person, then another, and a line joins them; click a linked pair again to cut it. The forces pull linked people together as you go.

package/extended/examples/hierarchy/force-directed-network.md

@@ -2,7 +2,7 @@
 title: "Force-Directed Network"
 source: "https://www.amcharts.com/demos/force-directed-network/"
 category: "hierarchy"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A network graph: nodes joined by lines, laid out by forces that push them apart and pull linked ones together. Here, three separate trees held together by two cross-links.

package/extended/examples/hierarchy/force-directed-tree-with-animated-bullets.md

@@ -2,7 +2,7 @@
 title: "Force-Directed Tree with Animated Bullets"
 source: "https://www.amcharts.com/demos/force-directed-tree-with-animated-bullets/"
 category: "hierarchy"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A force-directed tree with arrows running along every link, from parent to child, to show that something flows. Here, power flows from a plant through four substations to the city’s districts, sized by their demand.

package/extended/examples/hierarchy/force-directed-tree.md

@@ -2,7 +2,7 @@
 title: "Force-Directed Tree"
 source: "https://www.amcharts.com/demos/force-directed-tree/"
 category: "hierarchy"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A force-directed tree draws a hierarchy as bubbles linked to their parents, placed by a physics simulation. Here, a company of 118 people: departments around it, teams around them, sized by headcount.

package/extended/examples/hierarchy/horizontal-partition-chart.md

@@ -2,7 +2,7 @@
 title: "Horizontal Partition Chart"
 source: "https://www.amcharts.com/demos/horizontal-partition-chart/"
 category: "hierarchy"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A partition chart, also called an icicle chart, lays a hierarchy out in columns: the whole on the left, each column one level deeper, each box as tall as its share. Here, a 100-person company by department and team.

package/extended/examples/hierarchy/multilevel-tree-map.md

@@ -2,7 +2,7 @@
 title: "Zoomable Multilevel Tree Map"
 source: "https://www.amcharts.com/demos/multilevel-tree-map/"
 category: "hierarchy"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A treemap splits one rectangle into boxes sized by value. This one has two levels, car brands and their models, from a year of US car sales, with each brand’s logo behind its models.

package/extended/examples/hierarchy/packed-circle-chart.md

@@ -2,7 +2,7 @@
 title: "Packed Circle Chart"
 source: "https://www.amcharts.com/demos/packed-circle-chart/"
 category: "hierarchy"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A packed circle chart nests circles inside circles, each sized by its value. Here, one listener’s year of music: 1,000 hours, grouped by genre and style.

package/extended/examples/hierarchy/rectangular-voronoi-tree-map.md

@@ -2,7 +2,7 @@
 title: "Rectangular Drill-Down Voronoi Tree Map"
 source: "https://www.amcharts.com/demos/rectangular-voronoi-tree-map/"
 category: "hierarchy"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A Voronoi treemap splits a rectangle into irregular cells sized by value. Here, the world’s people: one cell per country, grouped by continent, with countries under five million gathered into Others.

package/extended/examples/hierarchy/simple-treemap.md

@@ -2,7 +2,7 @@
 title: "Simple Treemap"
 source: "https://www.amcharts.com/demos/simple-treemap/"
 category: "hierarchy"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A treemap shows a total as nested rectangles, each sized by its value and colored by its group. Here, a $4,000 monthly budget split into six groups and 20 items.

package/extended/examples/hierarchy/single-level-packed-circles.md

@@ -2,7 +2,7 @@
 title: "Single-Level Packed Circles"
 source: "https://www.amcharts.com/demos/single-level-packed-circles/"
 category: "hierarchy"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 Five hundred circles, each sized by its value, packed as tight as they fit. One level and no groups: a quick way to spot the few big items among hundreds of small ones.

package/extended/examples/hierarchy/sunburst-chart.md

@@ -2,7 +2,7 @@
 title: "Sunburst Chart"
 source: "https://www.amcharts.com/demos/sunburst-chart/"
 category: "hierarchy"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A sunburst chart draws a hierarchy as rings: the whole in the middle, each ring one level deeper. Here, what fills a laptop’s drive, folder by folder.

package/extended/examples/hierarchy/sunburst-flavor-wheel.md

@@ -2,7 +2,7 @@
 title: "Sunburst Flavor Wheel"
 source: "https://www.amcharts.com/demos/sunburst-flavor-wheel/"
 category: "hierarchy"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A sunburst chart shows a hierarchy as rings: the inner ring holds the groups, the outer ring what each is made of. This one is a coffee aroma wheel, 75 aromas in 13 families, each with its own color.

package/extended/examples/hierarchy/tree-chart.md

@@ -2,7 +2,7 @@
 title: "Tree Chart"
 source: "https://www.amcharts.com/demos/tree-chart/"
 category: "hierarchy"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A tree chart draws a hierarchy as nodes and lines, each parent above its children. Here, a family tree from a grandmother to her great-grandchildren.

package/extended/examples/hierarchy/vertical-partition-chart.md

@@ -2,7 +2,7 @@
 title: "Vertical Partition Chart"
 source: "https://www.amcharts.com/demos/vertical-partition-chart/"
 category: "hierarchy"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A partition chart, or icicle chart, stacks a hierarchy in rows: the whole on top, each row one level deeper, each box as wide as its share. Here, the 168 hours of one person’s week.

package/extended/examples/hierarchy/voronoi-treemap.md

@@ -2,7 +2,7 @@
 title: "Drill-Down, Zoomable Voronoi Treemap"
 source: "https://www.amcharts.com/demos/voronoi-treemap/"
 category: "hierarchy"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A Voronoi treemap in a circle: every country is a cell sized by its population, grouped by continent. Zoom in to read the small ones.

package/extended/examples/hierarchy/zoomable-force-directed-tree.md

@@ -2,7 +2,7 @@
 title: "Zoomable Force Directed Tree"
 source: "https://www.amcharts.com/demos/zoomable-force-directed-tree/"
 category: "hierarchy"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A force-directed tree lays out a hierarchy as linked bubbles that push apart until they settle. This one holds the coffee flavor wheel, 85 flavors in nine families, in a view you can zoom and pan.

package/extended/examples/line-area/100-stacked-area-chart.md

@@ -2,7 +2,7 @@
 title: "100% Stacked Area Chart"
 source: "https://www.amcharts.com/demos/100-stacked-area-chart/"
 category: "line-area"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 Every year adds up to 100%, so the chart shows shares instead of amounts: how a total splits between cars, motorcycles and bicycles from 2007 to 2025.

package/extended/examples/line-area/animated-bullet-at-the-end-of-the-series.md

@@ -2,7 +2,7 @@
 title: "Animated Bullet at the End of the Series"
 source: "https://www.amcharts.com/demos/animated-bullet-at-the-end-of-the-series/"
 category: "line-area"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A line chart that draws the eye to its latest value: the last point pulses like a live signal, while the dashed line keeps the history in the background.
@@ -100,13 +100,13 @@ series.bullets.push(function(root, series, dataItem) {
   if (dataItem.dataContext.bullet) {
     var container = am5.Container.new(root, {});
     var circle0 = container.children.push(am5.Circle.new(root, {
-      radius: 5, // a 5px red dot that stays put
-      fill: am5.color(0xff0000)
+      radius: 5,                  // a 5px dot that stays put...
+      fill: series.get("stroke")  // ...in the line's color, from the theme
     }));
     // a second dot on top of it, which grows and fades out
     var circle1 = container.children.push(am5.Circle.new(root, {
       radius: 5,
-      fill: am5.color(0xff0000)
+      fill: series.get("stroke")
     }));
 
     circle1.animate({

package/extended/examples/line-area/area-with-time-based-data.md

@@ -2,7 +2,7 @@
 title: "Area with Time Based Data"
 source: "https://www.amcharts.com/demos/area-with-time-based-data/"
 category: "line-area"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 An area chart of minute-by-minute visits over the last eight hours, opening on the latest hour. The small chart above it shows the whole range: drag it to move along.

package/extended/examples/line-area/chart-with-gaps-in-data.md

@@ -2,7 +2,7 @@
 title: "Chart with Gaps in Data"
 source: "https://www.amcharts.com/demos/chart-with-gaps-in-data/"
 category: "line-area"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A line that breaks where data is missing instead of drawing across the hole. Here, 1967 to 1970 and 1984 to 1988 have no values, and the years above zero take a second color.

package/extended/examples/line-area/comparing-different-date-values-google-analytics-style.md

@@ -2,7 +2,7 @@
 title: "Comparing Different Date Values Google Analytics Style"
 source: "https://www.amcharts.com/demos/comparing-different-date-values-google-analytics-style/"
 category: "line-area"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 This week against last week, the way analytics dashboards show it: a solid line for the current days, a dotted line for the same weekdays a week earlier, and both dates in one tooltip.

package/extended/examples/line-area/control-chart.md

@@ -2,7 +2,7 @@
 title: "Control Chart"
 source: "https://www.amcharts.com/demos/control-chart/"
 category: "line-area"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A control chart tracks readings against a center line and two control limits. Readings beyond a limit turn red; a long run above the center line gets red rings, an early warning that the process is drifting.

package/extended/examples/line-area/data-grouping-50k-points.md

@@ -2,7 +2,7 @@
 title: "Data Grouping 50K Points"
 source: "https://www.amcharts.com/demos/data-grouping-50k-points/"
 category: "line-area"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 50,000 daily values, about 137 years, in one line chart. Zoomed out, it shows one point per year; zoom in and it switches to months, weeks and finally days.

package/extended/examples/line-area/date-axis-with-labels-near-minor-grid-lines.md

@@ -2,7 +2,7 @@
 title: "Date Axis with Labels Near Minor Grid Lines"
 source: "https://www.amcharts.com/demos/date-axis-with-labels-near-minor-grid-lines/"
 category: "line-area"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A line chart where every day gets a number on the axis: small day numbers along the bottom, week labels under them, so each point’s date is easy to read.

package/extended/examples/line-area/date-based-data.md

@@ -2,7 +2,7 @@
 title: "Date Based Data"
 source: "https://www.amcharts.com/demos/date-based-data/"
 category: "line-area"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 Half a year of daily values, July 2025 to January 2026. The dates come in as plain text, like 2025-07-27, and the chart turns them into a real timeline.

package/extended/examples/line-area/date-based-line-chart.md

@@ -2,10 +2,10 @@
 title: "Line with Different Negative Color"
 source: "https://www.amcharts.com/demos/date-based-line-chart/"
 category: "line-area"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
-A line chart that turns orange where it drops below zero, line and fill alike. The same trick works for any threshold, not just zero.
+A line chart that turns red where it drops below zero, line and fill alike. The same trick works for any threshold, not just zero.
 
 When to color by threshold: Coloring the part of a line beyond a threshold shows at a glance when a value was good or bad, without reading the axis. Zero is the natural line for profit and loss or temperatures; a target, a limit or an average works the same way.
 
@@ -116,15 +116,18 @@ var rangeDataItem = yAxis.makeDataItem({
 
 var range = series.createAxisRange(rangeDataItem);
 
+// below zero in the theme's color for negative values (red by default), so it suits every theme and dark mode
+var negativeColor = root.interfaceColors.get("negative");
+
 range.strokes.template.setAll({
-  stroke: am5.color(0xff621f), // orange below zero...
-  strokeWidth: 3               // ...as thick as the main line
+  stroke: negativeColor, // that color below zero...
+  strokeWidth: 3         // ...as thick as the main line
 });
 
 range.fills.template.setAll({
-  fill: am5.color(0xff621f), // and an orange fill
+  fill: negativeColor, // and a fill in it
   fillOpacity: 0.5,
-  visible: true              // line fills are hidden by default
+  visible: true        // line fills are hidden by default
 });
 
 // Add cursor
@@ -177,5 +180,5 @@ chart.appear(1000, 100);
 
 - https://cdn.amcharts.com/lib/5/index.js
 - https://cdn.amcharts.com/lib/5/xy.js
-- https://cdn.amcharts.com/lib/5/themes/Responsive.js
 - https://cdn.amcharts.com/lib/5/themes/Animated.js
+- https://cdn.amcharts.com/lib/5/themes/Responsive.js

package/extended/examples/line-area/divergent-lines.md

@@ -2,7 +2,7 @@
 title: "Divergent Lines"
 source: "https://www.amcharts.com/demos/divergent-lines/"
 category: "line-area"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 One solid line for what has happened, then three dashed lines for what might: a projection, and what easing or tightening the rules could do by December.

package/extended/examples/line-area/draggable-range-with-close-button.md

@@ -2,7 +2,7 @@
 title: "Draggable Range with a Close Button"
 source: "https://www.amcharts.com/demos/draggable-range-with-close-button/"
 category: "line-area"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A stop-loss line you can move: drag the box up or down and the value in it follows. Click the X and the line is gone.
@@ -163,11 +163,14 @@ rangeDataItem.set("bullet", am5xy.AxisBullet.new(root, {
   sprite: container
 }));
 
-// decorate grid of a range: a red dashed line, the same red as the box around the label
+// the range's color: the theme's warning red ("negative"), so it suits every theme and dark mode
+var rangeColor = root.interfaceColors.get("negative");
+
+// decorate grid of a range: a dashed line, the same color as the box around the label
 rangeDataItem.get("grid").setAll({
   strokeOpacity: 1,
   visible: true,
-  stroke: am5.color(0xff0000),
+  stroke: rangeColor,
   strokeDasharray: [2, 2]
 })
 
@@ -179,7 +182,7 @@ var background = am5.RoundedRectangle.new(root, {
   cornerRadiusTL: 0,            // square left corners, flush with the axis...
   cornerRadiusBL: 0,            // ...the right ones stay rounded
   cursorOverStyle: "ns-resize", // an up-down arrow pointer over the box
-  stroke: am5.color(0xff0000)   // red, like the range line
+  stroke: rangeColor            // the range line's color
 })
 
 container.set("background", background);
@@ -217,7 +220,7 @@ xButton.set("label", am5.Label.new(root, {
   paddingTop: 0,
   paddingRight: 0,
   paddingLeft: 0,
-  fill: am5.color(0xff0000) // a red X
+  fill: rangeColor          // an X in the range's color
 }))
 
 // modify background of x button

package/extended/examples/line-area/drawing-chart-series-with-mouse-or-touch.md

@@ -2,7 +2,7 @@
 title: "Drawing Chart Series with Mouse or Touch"
 source: "https://www.amcharts.com/demos/drawing-chart-series-with-mouse-or-touch/"
 category: "line-area"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A line chart you can draw on: click anywhere to place a point, and your points join into a second line, drawn over three years of data.

package/extended/examples/line-area/duration-on-value-axis.md

@@ -2,7 +2,7 @@
 title: "Duration on Value Axis"
 source: "https://www.amcharts.com/demos/duration-on-value-axis/"
 category: "line-area"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A two-week road trip in one chart: miles driven each day, hours behind the wheel and how far north each stop is. The right-hand axis is a duration axis: the data is in minutes, the labels read as hours and minutes.

package/extended/examples/line-area/error-chart.md

@@ -2,7 +2,7 @@
 title: "Error Chart"
 source: "https://www.amcharts.com/demos/error-chart/"
 category: "line-area"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A line chart with error bars: each country’s value comes with a bar showing how far off it could be. Where two bars overlap, the two values could be the same.

package/extended/examples/line-area/evenly-spaced-date-axis.md

@@ -2,7 +2,7 @@
 title: "Evenly Spaced Date Axis"
 source: "https://www.amcharts.com/demos/evenly-spaced-date-axis/"
 category: "line-area"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A line chart of weekdays only: Saturdays and Sundays have no values, so the axis leaves them out and Friday sits right next to Monday, with no empty gap.

package/extended/examples/line-area/highlighting-line-chart-series-on-legend-hover.md

@@ -2,7 +2,7 @@
 title: "Highlighting Line Chart Series on Legend Hover"
 source: "https://www.amcharts.com/demos/highlighting-line-chart-series-on-legend-hover/"
 category: "line-area"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 Ten lines on one chart get tangled. Point at a name in the legend and that line thickens while the others fade, so you can follow it from start to end.