@amcharts/amcharts5-mcp 1.7.0 → 1.8.0

package/extended/examples/maps/sankey-map-with-waypoints.md

@@ -2,7 +2,7 @@
 title: "Sankey Map with Waypoints"
 source: "https://www.amcharts.com/demos/sankey-map-with-waypoints/"
 category: "maps"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 Oil exports from six terminals in the Gulf states to ports in Asia and Europe, drawn as Sankey bands on a globe: the wider the band, the more oil. The bands follow sea lanes through waypoints, with drops of oil traveling along them.
@@ -19,36 +19,29 @@ Think twice when:
 - Exact volumes: a table or bar chart compares them
 - Flows with no set route: plain curved lines are simpler
 
-Prompt: Create a dark-styled globe of crude oil exports through the Strait of Hormuz, drawn as a map Sankey of flows from Gulf terminals to ports in Asia and Europe. Waypoints keep the routes at sea, and small oil drops travel along each band. Use the amCharts 5 library with its Responsive theme.
+Prompt: Create a globe of crude oil exports through the Strait of Hormuz, drawn as a map Sankey of flows from Gulf terminals to ports in Asia and Europe. Waypoints keep the routes at sea, and small oil drops travel along each band. Use the amCharts 5 library with its Responsive theme.
 
 ## JavaScript
 
 ```javascript
 var root = am5.Root.new("chartdiv");
 
-var oilTheme = am5.Theme.new(root); // a custom theme: the oil colors for buttons and text
-oilTheme.rule("InterfaceColors").setAll({
-  primaryButton: am5.color(0x1e2824),       // buttons, such as the zoom control...
-  primaryButtonHover: am5.color(0x3a5040),  // ...under the pointer...
-  primaryButtonDown: am5.color(0x0a0e12),   // ...while pressed...
-  primaryButtonActive: am5.color(0xc8890a), // ...and when switched on
-  primaryButtonText: am5.color(0xf5d090),   // button icons and labels
-  secondaryButton: am5.color(0x1e2824),
-  secondaryButtonHover: am5.color(0x3a5040),
-  secondaryButtonDown: am5.color(0x141a1a),
-  secondaryButtonText: am5.color(0xf5d090),
-  background: am5.color(0x0a0e12),
-  text: am5.color(0xf5d090)                 // default text color
-});
-root.setThemes([am5themes_Animated.new(root), oilTheme, am5themes_Responsive.new(root)]);
+// Set themes
+// https://www.amcharts.com/docs/v5/concepts/themes/
+root.setThemes([
+  am5themes_Animated.new(root),
+  am5themes_Responsive.new(root)
+]);
 
-// Crude & Tar palette
-var deepCrude = am5.color(0x141a1a);      // ocean — very dark teal-black
-var slick = am5.color(0x1e2824);          // land dark — oil slick green-black
-var pipeline = am5.color(0x3a5040);       // accents — industrial dark green
-var amber = am5.color(0xc8890a);          // primary — dark amber / crude oil
-var sulfur = am5.color(0xa89050);         // secondary — sulfurous yellow-brown
-var flare = am5.color(0xf5d090);          // text/highlights — gas flare warm
+// The colors, all from the theme, so the map follows it and dark mode: the oil (bands, terminals, drops) in its
+// first color, the producing and importing countries in two others; the sea, the grid and the rest of the land in
+// faint tints of the text color
+var colors = am5.ColorSet.new(root, {});
+var oil = colors.getIndex(0);
+var producerColor = colors.getIndex(4);
+var importerColor = colors.getIndex(2);
+var ink = root.interfaceColors.get("alternativeBackground"); // the theme's text color: dark, or light in dark mode
+var oceanOpacity = 0.05; // the ocean's faint tint on the globe
 
 // ---- Chart (start zoomed out at home) ----
 var chart = root.container.children.push(am5map.MapChart.new(root, {
@@ -60,21 +53,15 @@ var chart = root.container.children.push(am5map.MapChart.new(root, {
   homeRotationY: 0,  // ...not tilted...
   homeZoomLevel: 1,  // ...and at the fitted size
   minZoomLevel: 0.8, // zoom out to 80% of the fitted size at most
-  zoomLevel: 1,      // start at the fitted size
-  background: am5.Rectangle.new(root, {
-    fill: am5.color(0x0a0e12), // near-black space around the globe
-    fillOpacity: 1,
-    stroke:am5.color(0x0a0e12),
-    strokeOpacity: 1
-  })
+  zoomLevel: 1       // start at the fitted size
 }));
 
 // ---- Ocean background ----
 var bgSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {}));
 bgSeries.mapPolygons.template.setAll({
-  fill: deepCrude, // dark ocean
-  fillOpacity: 1,  // solid; the flat map views turn it off
-  strokeOpacity: 0 // no outline
+  fill: ink,                 // a faint tint for the ocean...
+  fillOpacity: oceanOpacity, // ...on the globe; the flat map views turn it off
+  strokeOpacity: 0           // no outline
 });
 // one polygon that covers the whole Earth: the ocean
 bgSeries.data.push({ geometry: am5map.getGeoRectangle(90, 180, -90, -180) });
@@ -82,8 +69,8 @@ bgSeries.data.push({ geometry: am5map.getGeoRectangle(90, 180, -90, -180) });
 // ---- Graticule ----
 var graticuleSeries = chart.series.push(am5map.GraticuleSeries.new(root, {}));
 graticuleSeries.mapLines.template.setAll({
-  stroke: pipeline,    // grid lines in dark green...
-  strokeOpacity: 0.25, // ...faint...
+  stroke: ink,         // grid lines in the text color...
+  strokeOpacity: 0.08, // ...faint...
   strokeWidth: 0.5     // ...and thin
 });
 
@@ -92,10 +79,10 @@ var polygonSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {
   geoJSON: am5geodata_worldLow // country shapes from the low-detail world map
 }));
 polygonSeries.mapPolygons.template.setAll({
-  fill: slick,       // dark land
-  stroke: pipeline,  // dark green borders...
-  strokeWidth: 0.5,  // ...thin...
-  strokeOpacity: 0.6 // ...and a little see-through
+  fill: ink,                                       // the land in a light tint of the text color...
+  fillOpacity: 0.12,
+  stroke: root.interfaceColors.get("background"), // ...with borders in the background color...
+  strokeWidth: 0.5                                 // ...thin
 });
 
 // Highlight producer & importer countries
@@ -107,9 +94,9 @@ polygonSeries.events.on("datavalidated", function () {
   am5.array.each(polygonSeries.dataItems, function (di) {
     var id = di.get("id");
     if (producerIds.includes(id)) {
-      di.get("mapPolygon").setAll({ fill: am5.color(0x6b5a10), tooltipText: "{name}" });
+      di.get("mapPolygon").setAll({ fill: producerColor, fillOpacity: 0.6, tooltipText: "{name}" });
     } else if (importerIds.includes(id)) {
-      di.get("mapPolygon").setAll({ fill: am5.color(0x2a4030), tooltipText: "{name}" });
+      di.get("mapPolygon").setAll({ fill: importerColor, fillOpacity: 0.6, tooltipText: "{name}" });
     }
   });
 });
@@ -126,7 +113,7 @@ var sankeySeries = chart.series.push(am5map.MapSankeySeries.new(root, {
 }));
 
 sankeySeries.mapPolygons.template.setAll({
-  fill: amber,      // amber bands...
+  fill: oil,        // the bands in the oil color...
   fillOpacity: 0.4, // ...see-through, so overlapping routes show
   strokeOpacity: 0, // no outline
   tooltipText: "{source} > {target}\n{value}k bbl/day" // hover a band for its route and volume
@@ -134,8 +121,8 @@ sankeySeries.mapPolygons.template.setAll({
 
 // the nodes: the shapes at each terminal and port where the bands start and end
 sankeySeries.nodes.mapPolygons.template.setAll({
-  fill: amber,
-  stroke: flare,        // a light outline...
+  fill: oil,
+  stroke: root.interfaceColors.get("background"), // an outline in the background color...
   strokeWidth: 1.5,     // ...1.5px wide
   fillOpacity: 0.95,    // almost solid
   strokeOpacity: 1,
@@ -152,8 +139,8 @@ sankeySeries.bullets.push(function () {
     sprite: am5.Graphics.new(root, {
       // Oil drop shape
       svgPath: "M0,-7 C2,-4 5,0 5,3 C5,6 3,8 0,8 C-3,8 -5,6 -5,3 C-5,0 -2,-4 0,-7 Z",
-      fill: amber,                 // amber...
-      stroke: am5.color(0x8b6914), // ...with a darker outline
+      fill: oil,                          // the oil color...
+      stroke: am5.Color.brighten(oil, -0.4), // ...with a darker outline
       strokeWidth: 0.5,
       centerX: am5.p50,            // centered on its point...
       centerY: am5.p50,            // ...both ways
@@ -328,7 +315,6 @@ titleCont.children.push(am5.Label.new(root, {
   text: "Strait of Hormuz — Oil Export Flows",
   fontSize: 18,
   fontWeight: "600", // semi-bold
-  fill: amber,
   x: am5.p50,
   centerX: am5.p50
 }));
@@ -336,7 +322,7 @@ titleCont.children.push(am5.Label.new(root, {
 titleCont.children.push(am5.Label.new(root, {
   text: "Gulf Producers > Major Importers  (thousands of barrels/day)",
   fontSize: 11,
-  fill: sulfur,
+  fillOpacity: 0.6, // a little faded, under the title
   x: am5.p50,
   centerX: am5.p50
 }));
@@ -352,7 +338,7 @@ function zoomToGlobe() {
   chart.animate({ key: "rotationX", to: -74, duration, easing }); // bring longitude 74 east to the front...
   chart.animate({ key: "rotationY", to: -30, duration, easing }); // ...and latitude 30 north to the middle...
   chart.animate({ key: "zoomLevel", to: 1.6, duration, easing }); // ...and zoom in 1.6 times
-  bgSeries.mapPolygons.template.set("fillOpacity", 1);            // the ocean shows on the globe
+  bgSeries.mapPolygons.template.set("fillOpacity", oceanOpacity); // the ocean shows on the globe
 }
 
 // switches to a flat map (Mercator or Equal Earth) and zooms in on the Gulf
@@ -394,7 +380,6 @@ setTimeout(function () {
 #chartdiv {
   width: 100%;
   height: 600px;
-  background-color: #0a0e12;
   font-size: 0.875rem;
 }
 ```
@@ -406,4 +391,3 @@ setTimeout(function () {
 - https://cdn.amcharts.com/lib/5/geodata/worldLow.js
 - https://cdn.amcharts.com/lib/5/themes/Animated.js
 - https://cdn.amcharts.com/lib/5/themes/Responsive.js
-- https://cdn.amcharts.com/lib/5/themes/Dark.js

package/extended/examples/maps/satellite-image-globe.md

@@ -2,7 +2,7 @@
 title: "Satellite Image Globe"
 source: "https://www.amcharts.com/demos/satellite-image-globe/"
 category: "maps"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A 3D globe covered with a satellite image of the whole Earth, turning slowly on its own. The image is redrawn to fit the globe at every turn and zoom, with the country borders on top.
@@ -30,9 +30,10 @@ var root = am5.Root.new("chartdiv");
 
 // Set themes
 // https://www.amcharts.com/docs/v5/concepts/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 the map chart: a globe that turns once every two minutes
@@ -92,7 +93,7 @@ polygonSeries.mapPolygons.template.setAll({
 });
 
 // Add image credit, at the top right, clear of the zoom buttons
-chart.children.push(am5.Label.new(root, {
+var credit = chart.children.push(am5.Label.new(root, {
   text: "Imagery: NASA Earth Observatory",
   fontSize: 12,              // small print
   fill: am5.color(0xffffff), // white, over the picture
@@ -110,6 +111,28 @@ var zoomControl = chart.set("zoomControl", am5map.ZoomControl.new(root, {}));
 // the home button is hidden by default
 zoomControl.homeButton.set("visible", true);
 
+// On a narrow chart (a phone) the globe takes the whole height and the top right corner is no longer free:
+// the credit moves to the bottom left corner, in smaller type on two lines. The rule is undone on a wider chart
+responsive.addRule({
+  relevant: function (width) { return width < 600; }, // the chart is under 600px wide
+  applying: function () {
+    credit.setAll({
+      x: 0, centerX: 0, dx: 10,                 // 10px in from the left edge...
+      y: am5.p100, centerY: am5.p100, dy: -10,  // ...and from the bottom
+      fontSize: 10,                             // smaller print
+      maxWidth: 100, oversizedBehavior: "wrap"  // wrapped at 100px, two lines
+    });
+  },
+  removing: function () {
+    credit.setAll({
+      x: am5.p100, centerX: am5.p100, dx: -10,
+      y: 10, centerY: 0, dy: 0,
+      fontSize: 12,
+      maxWidth: undefined, oversizedBehavior: "none"
+    });
+  }
+});
+
 // Make stuff animate on load
 // https://www.amcharts.com/docs/v5/concepts/animations/
 chart.appear(1000, 100);

package/extended/examples/maps/selecting-multiple-areas-map.md

@@ -2,7 +2,7 @@
 title: "Selecting Multiple Areas Map"
 source: "https://www.amcharts.com/demos/selecting-multiple-areas-map/"
 category: "maps"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A world map where you pick countries: click a country to select it, click it again to clear it, and select as many as you like.

package/extended/examples/maps/solar-eclipse-map.md

@@ -2,7 +2,7 @@
 title: "Solar Eclipse Map"
 source: "https://www.amcharts.com/demos/solar-eclipse-map/"
 category: "maps"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 The path of the total solar eclipse of August 2, 2027, on a globe: a band up to 259 km wide where the Moon covers the whole Sun, from the Atlantic across North Africa and Arabia to the Indian Ocean.

package/extended/examples/maps/star-atlas.md

@@ -2,7 +2,7 @@
 title: "Star Atlas"
 source: "https://www.amcharts.com/demos/star-atlas/"
 category: "maps"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A star atlas: the night sky drawn on a map chart, with the brightest stars, about 25 constellations and the path of the sun. It can be shown flat or as a globe.
@@ -543,5 +543,5 @@ chart.appear(1000, 100);
 
 - https://cdn.amcharts.com/lib/5/index.js
 - https://cdn.amcharts.com/lib/5/map.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/maps/trumps-reciprocal-tariffs-map.md

@@ -2,7 +2,7 @@
 title: "Trump’s Reciprocal Tariffs Map"
 source: "https://www.amcharts.com/demos/trumps-reciprocal-tariffs-map/"
 category: "maps"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A world heat map of US reciprocal tariff rates by country from April 2025, as first announced and as updated: the darker the color, the higher the rate.

package/extended/examples/maps/us-congressional-districts.md

@@ -2,7 +2,7 @@
 title: "U.S. Congressional Districts"
 source: "https://www.amcharts.com/demos/us-congressional-districts/"
 category: "maps"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 The 435 U.S. congressional districts, colored by party: blue for Democrats, red for Republicans, gray where there is no data. The party data is example data from an earlier Congress.

package/extended/examples/maps/us-heat-map.md

@@ -2,7 +2,7 @@
 title: "US Heat (Choropleth) Map"
 source: "https://www.amcharts.com/demos/us-heat-map/"
 category: "maps"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A heat map of the United States, also called a choropleth: each state is colored by its population in the 2000 census, from a light shade for the fewest people to a dark one for the most.

package/extended/examples/maps/weather-map.md

@@ -2,7 +2,7 @@
 title: "Weather Map"
 source: "https://www.amcharts.com/demos/weather-map/"
 category: "maps"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A weather map of Europe: an animated icon and the temperature for seven capitals, picked from the data through template fields. The weather is made up.

package/extended/examples/maps/world-map-with-clustered-points.md

@@ -2,7 +2,7 @@
 title: "World Map with Clustered Points"
 source: "https://www.amcharts.com/demos/world-map-with-clustered-points/"
 category: "maps"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 The capitals of 165 countries on a world map. Where the dots crowd, they merge into groups with a count, and the groups break up into single cities as you zoom in.

package/extended/examples/maps/world-time-zone-map.md

@@ -2,7 +2,7 @@
 title: "World Time Zone Map"
 source: "https://www.amcharts.com/demos/world-time-zone-map/"
 category: "maps"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 The world's time zones in two layers: colored areas show the zone each piece of land keeps, and faint bands run from pole to pole, with each whole-hour offset from UTC labeled along the bottom.
@@ -30,9 +30,10 @@ var root = am5.Root.new("chartdiv");
 
 // Set themes
 // https://www.amcharts.com/docs/v5/concepts/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 the map chart
@@ -137,20 +138,41 @@ labelSeries.bullets.push(function () {
   });
 });
 
-for (var hours = -12; hours <= 12; hours++) {
-  labelSeries.data.push({
-    offset: hours > 0 ? "+" + hours : String(hours), // a plus sign before positive hours
-    // the bands of UTC-12 and UTC+12 are half as wide, at the date line
-    longitude: Math.max(-176, Math.min(176, hours * 15)),
-    latitude: -50 // 50 degrees south, below most of the land
-  });
+// The offsets, every step hours from -12 to +12
+function offsetData(step) {
+  var data = [];
+  for (var hours = -12; hours <= 12; hours += step) {
+    data.push({
+      offset: hours > 0 ? "+" + hours : String(hours), // a plus sign before positive hours
+      // the bands of UTC-12 and UTC+12 are half as wide, at the date line
+      longitude: Math.max(-176, Math.min(176, hours * 15)),
+      latitude: -50 // 50 degrees south, below most of the land
+    });
+  }
+  return data;
 }
+labelSeries.data.setAll(offsetData(1)); // every whole hour
 
 // Add zoom control
 // https://www.amcharts.com/docs/v5/charts/map-chart/map-pan-zoom/#Zoom_control
 var zoomControl = chart.set("zoomControl", am5map.ZoomControl.new(root, {}));
 zoomControl.homeButton.set("visible", true); // a button that goes back to the home view
 
+// On a narrow chart (a phone) whole hours run together: the row shows every third offset, and the
+// zoom buttons line up across the bottom corner instead of standing over the end of the row.
+// The rule is undone on a wider chart
+responsive.addRule({
+  relevant: function (width) { return width < 600; }, // the chart is under 600px wide
+  applying: function () {
+    labelSeries.data.setAll(offsetData(3)); // -12, -9, -6 and so on
+    zoomControl.set("layout", root.horizontalLayout); // the buttons side by side
+  },
+  removing: function () {
+    labelSeries.data.setAll(offsetData(1));
+    zoomControl.set("layout", root.verticalLayout);
+  }
+});
+
 // Make stuff animate on load
 chart.appear(1000, 100);
 ```

package/extended/examples/maps/zooming-to-countries-map.md

@@ -2,7 +2,7 @@
 title: "Zooming to Countries Map"
 source: "https://www.amcharts.com/demos/zooming-to-countries-map/"
 category: "maps"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A world map that zooms to any country you click. Click the country again, or the sea, to zoom back out.

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

@@ -2,7 +2,7 @@
 title: "Angled Word Cloud"
 source: "https://www.amcharts.com/demos/angled-word-cloud/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A word cloud made from the plain text of a speech, with every word tilted to one side or the other, packed into a curved shape. Here, the king’s first speech in Shakespeare’s Hamlet: the more often a word appears, the bigger it is.

package/extended/examples/miscellaneous/annotating-charts.md

@@ -2,7 +2,7 @@
 title: "Annotating Charts"
 source: "https://www.amcharts.com/demos/annotating-charts/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A pie chart with notes drawn on it: a callout and arrows saying which slices need work. They come from the exporting menu’s Annotate tool, which lets anyone draw on a chart and save the result.

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

@@ -2,7 +2,7 @@
 title: "Changing Data of Word Cloud"
 source: "https://www.amcharts.com/demos/changing-data-word-cloud/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A word cloud with live data: every five seconds each language gets a new weight, and the words grow, shrink and move to new places. It starts from the share of developers using each language in the 2021 Stack Overflow survey.

package/extended/examples/miscellaneous/combined-bullet-column-line-chart.md

@@ -2,7 +2,7 @@
 title: "Combined Bullet/Column and Line Graphs with Multiple Value Axes"
 source: "https://www.amcharts.com/demos/combined-bullet-column-line-chart/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 Columns and lines on two value axes: daily sales on the left, a narrow actual over a wide, pale target like a bullet graph, and two market lines on the right.

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

@@ -2,7 +2,7 @@
 title: "Complex Venn Diagram"
 source: "https://www.amcharts.com/demos/complex-venn-diagram/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A Venn diagram with four circles for coffee’s ingredients, and the drinks where they overlap: espresso and milk make a flat white, espresso and water an Americano, espresso, milk and foam a cappuccino or a latte.

package/extended/examples/miscellaneous/exporting-chart-to-image.md

@@ -2,7 +2,7 @@
 title: "Exporting Chart to Image"
 source: "https://www.amcharts.com/demos/exporting-chart-to-image/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A column chart with an export menu: the icon at the top right saves the chart as an image or a PDF, saves its data as a spreadsheet, or prints it. Change the chart with the controls first, and the export shows it as changed.

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

@@ -2,7 +2,7 @@
 title: "Forest Plot"
 source: "https://www.amcharts.com/demos/forest-plot/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A forest plot sums up the studies on one question: each row shows a study’s result as a square, sized by how much it counts, with a line for its range of uncertainty. The diamond at the bottom is all the studies combined.

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

@@ -2,7 +2,7 @@
 title: "Historical Population Pyramid"
 source: "https://www.amcharts.com/demos/historical-population-pyramid/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A population pyramid tied to a timeline: hover a year in the U.S. population chart and the pyramid redraws its age groups for that year, from 1950 to the UN projection for 2100.

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

@@ -2,7 +2,7 @@
 title: "Honeycomb Tile Map"
 source: "https://www.amcharts.com/demos/honeycomb-tile-map/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A tile map made of hexagons, which fit together like a honeycomb and give each state up to six neighbors, so the layout follows the real map more closely than squares or circles can.

package/extended/examples/miscellaneous/horizontally-stacked-axes.md

@@ -2,7 +2,7 @@
 title: "Horizontally Stacked Axes"
 source: "https://www.amcharts.com/demos/horizontally-stacked-axes/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 Stacked axes turned on their side: three panes next to each other, each with its own value axis, and one list of names down the left for all three. Here, a sales team’s deals, calls and revenue per person.

package/extended/examples/miscellaneous/hybrid-drill-down-pie-bar-chart.md

@@ -2,7 +2,7 @@
 title: "Hybrid Drill-Down Pie/Bar Chart"
 source: "https://www.amcharts.com/demos/hybrid-drill-down-pie-bar-chart/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A donut that drives a bar chart: click a slice and the bars show what it’s made of. Here, 280 support tickets rated Critical, Acceptable or Good, split by type.
@@ -28,9 +28,6 @@ Prompt: Create a donut chart of support tickets by rating (Critical, Acceptable,
 var data = [{
   category: "Critical",
   value: 89,
-  sliceSettings: {
-    fill: am5.color(0xdc4534),
-  },
   breakdown: [{
     category: "Sales inquiries",
     value: 29
@@ -47,9 +44,6 @@ var data = [{
 }, {
   category: "Acceptable",
   value: 71,
-  sliceSettings: {
-    fill: am5.color(0xd7a700),
-  },
   breakdown: [{
     category: "Sales inquiries",
     value: 22
@@ -66,9 +60,6 @@ var data = [{
 }, {
   category: "Good",
   value: 120,
-  sliceSettings: {
-    fill: am5.color(0x68ad5c),
-  },
   breakdown: [{
     category: "Sales inquiries",
     value: 60
@@ -217,6 +208,15 @@ pieSeries.slices.template.on("active", function(active, slice) {
 pieSeries.labels.template.set("forceHidden", true); // no labels around the donut...
 pieSeries.ticks.template.set("forceHidden", true);  // ...and no ticks
 
+// Each slice's color, by how good it is: the theme's color for negative values (red) for Critical, its warning color
+// (yellow) for Acceptable and its positive one (green) for Good, so they follow the theme and dark mode
+var goodness = { Critical: "negative", Acceptable: "warning", Good: "positive" };
+data.forEach(function(item) {
+  item.sliceSettings = {
+    fill: root.interfaceColors.get(goodness[item.category])
+  };
+});
+
 pieSeries.data.setAll(data);
 
 // Add label

package/extended/examples/miscellaneous/infographic.md

@@ -2,7 +2,7 @@
 title: "Infographic"
 source: "https://www.amcharts.com/demos/infographic/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 An infographic-style bar chart drawn with person icons instead of solid bars. It compares the share of men and women in six departments: men to the left of the middle, women to the right, and the empty places in gray.

package/extended/examples/miscellaneous/mekko.md

@@ -2,7 +2,7 @@
 title: "Mekko Chart"
 source: "https://www.amcharts.com/demos/mekko/"
 category: "miscellaneous"
-scraped: "2026-10-08"
+scraped: "2026-10-18"
 ---
 
 A Mekko chart is a stacked column chart whose columns have different widths: the width shows how big each column is, the height how it splits up. Here, five columns of different sizes, each stacked from trucks, SUVs and cars.