@amcharts/amcharts5-mcp 1.4.0 → 1.6.0

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-03-15"
+scraped: "2026-09-29"
 ---
 
 Horizontal Partition Chart displays hierarchical data in horizontally distributed levels. While not the most visually appealing, the chart gives a very clear view into the values comprising the higher levels.
@@ -27,7 +27,7 @@ root.setThemes([
 
 
 // Create wrapper container
-var container = root.container.children.push(am5.Container.new(root, {
+var chart = root.container.children.push(am5.SerialChartContainer.new(root, {
   width: am5.percent(100),
   height: am5.percent(100),
   layout: root.verticalLayout
@@ -36,7 +36,7 @@ var container = root.container.children.push(am5.Container.new(root, {
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
-var series = container.children.push(am5hierarchy.Partition.new(root, {
+var series = chart.series.push(am5hierarchy.Partition.new(root, {
   singleBranchOnly: false,
   orientation: "horizontal",
   downDepth: 1,

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-03-15"
+scraped: "2026-09-29"
 ---
 
 In a Tree Map the rectangle is divided into smaller rectangles with their size representing the value of each data item. Those smaller rectangles can in turn be divided into even smaller ones creating a sub-treemap.
@@ -45,22 +45,23 @@ root.setThemes([
   myTheme
 ]);
 
-var zoomableContainer = root.container.children.push(
-  am5.ZoomableContainer.new(root, {
+var chart = root.container.children.push(
+  am5.SerialChartContainer.new(root, {
     width: am5.p100,
-    height: am5.p100,
-    wheelable: true,
-    pinchZoom: true
+    height: am5.p100
   })
 );
 
-var zoomTools = zoomableContainer.children.push(am5.ZoomTools.new(root, {
-  target: zoomableContainer
-}));
+chart.zoomableContainer.setAll({
+  wheelable: true,
+  pinchZoom: true
+});
+
+var zoomTools = chart.set("zoomTools", am5.ZoomTools.new(root, {}));
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
-var series = zoomableContainer.contents.children.push(
+var series = chart.series.push(
   am5hierarchy.Treemap.new(root, {
     maskContent:false, //!important with zoomable containers
     sort: "descending",

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-03-15"
+scraped: "2026-09-29"
 ---
 
 Packed Circle Chart is great for visualizing hierarchical data. Circles on the bottom (leaf) level represent the values on that level and then they are packed (hence the name) into parent circles and determine their size. This way you can see a birds-eye view of the values in your data and also drill down for the details. Try clicking on the circles in the demo.
@@ -27,7 +27,7 @@ root.setThemes([
 
 
 // Create wrapper container
-var container = root.container.children.push(am5.Container.new(root, {
+var chart = root.container.children.push(am5.SerialChartContainer.new(root, {
   width: am5.percent(100),
   height: am5.percent(100),
   layout: root.verticalLayout
@@ -36,7 +36,7 @@ var container = root.container.children.push(am5.Container.new(root, {
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
-var series = container.children.push(am5hierarchy.Pack.new(root, {
+var series = chart.series.push(am5hierarchy.Pack.new(root, {
   singleBranchOnly: false,
   downDepth: 1,
   initialDepth: 10,

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-03-15"
+scraped: "2026-09-29"
 ---
 
 A weighted Voronoi treemap is a specialized data visualization technique that combines the concepts of Voronoi diagrams and treemaps. It partitions a given space into regions based on a set of weighted data points. Each region represents a data item or category, and its size is proportional to the weight associated with that item. By using Voronoi tessellation, which ensures that each data point is associated with the nearest region, weighted Voronoi treemaps offer an effective way to visually represent hierarchical and weighted data structures. These treemaps are particularly useful in areas such as financial analysis, resource allocation, and data visualization, where both hierarchy and weight are important factors to consider.
@@ -1242,7 +1242,9 @@ am5.array.each(data.children, function (continent) {
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
-var series = root.container.children.push(am5hierarchy.VoronoiTreemap.new(root, {
+var chart = root.container.children.push(am5.SerialChartContainer.new(root, {}));
+
+var series = chart.series.push(am5hierarchy.VoronoiTreemap.new(root, {
   singleBranchOnly: true,
   downDepth: 2,
   upDepth: 0,

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-03-15"
+scraped: "2026-09-29"
 ---
 
 Simple Treemap displays hierarchical data in the shape of rectangles proportional in size to their value as part of the whole. Each rectangle, in turn, can be divided into sub-items according to the values of its children in the hierarchy.
@@ -23,8 +23,8 @@ root.setThemes([
 ]);
 
 // Create wrapper container
-var container = root.container.children.push(
-  am5.Container.new(root, {
+var chart = root.container.children.push(
+  am5.SerialChartContainer.new(root, {
     width: am5.percent(100),
     height: am5.percent(100),
     layout: root.verticalLayout
@@ -33,7 +33,7 @@ var container = root.container.children.push(
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
-var series = container.children.push(
+var series = chart.series.push(
   am5hierarchy.Treemap.new(root, {
     singleBranchOnly: false,
     downDepth: 1,

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-03-15"
+scraped: "2026-09-29"
 ---
 
 This demo shows a packed circle chart as a visual representation of single-level data, where each circle corresponds to a distinct category, and the size of each circle reflects the quantitative value associated with that category. This chart allows for a clear and compact presentation of data distribution, making it easy to compare the relative magnitudes of individual data points within a single level.
@@ -28,22 +28,23 @@ root.setThemes([
 ]);
 
 
-var zoomableContainer = root.container.children.push(
-  am5.ZoomableContainer.new(root, {
+var chart = root.container.children.push(
+  am5.SerialChartContainer.new(root, {
     width: am5.p100,
-    height: am5.p100,
-    wheelable: true,
-    pinchZoom: true
+    height: am5.p100
   })
 );
 
-var zoomTools = zoomableContainer.children.push(am5.ZoomTools.new(root, {
-  target: zoomableContainer
-}));
+chart.zoomableContainer.setAll({
+  wheelable: true,
+  pinchZoom: true
+});
+
+var zoomTools = chart.set("zoomTools", am5.ZoomTools.new(root, {}));
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
-var series = zoomableContainer.contents.children.push(am5hierarchy.Pack.new(root, {
+var series = chart.series.push(am5hierarchy.Pack.new(root, {
   maskContent:false, //!important with zoomable containers
   topDepth: 1,
   valueField: "value",

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-03-15"
+scraped: "2026-09-29"
 ---
 
 Sunburst Chart or Diagram represents hierarchical relational data in a circular chart. It looks similar to nested donut charts, however, the hierarchical nature of the Sunburst means that each level represents detalization of the previous one. In other words, children slices on each level comprise the whole of the parent slice.
@@ -25,7 +25,7 @@ root.setThemes([
 
 
 // Create wrapper container
-var container = root.container.children.push(am5.Container.new(root, {
+var chart = root.container.children.push(am5.SerialChartContainer.new(root, {
   width: am5.percent(100),
   height: am5.percent(100),
   layout: root.verticalLayout
@@ -34,7 +34,7 @@ var container = root.container.children.push(am5.Container.new(root, {
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
-var series = container.children.push(am5hierarchy.Sunburst.new(root, {
+var series = chart.series.push(am5hierarchy.Sunburst.new(root, {
   singleBranchOnly: true,
   downDepth: 10,
   initialDepth: 10,

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

@@ -2,14 +2,14 @@
 title: "Sunburst Flavor Wheel"
 source: "https://www.amcharts.com/demos/sunburst-flavor-wheel/"
 category: "hierarchy"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 The demo shows off two-level Sunburst chart. The data uses all same values because the purpose of this chart is displaying hierarchy of types rather than their quantitative distribution.
 We also are using "template fields" technique to assign individual color to each chart via data.
 This chart is added to a Zoomable Container, so you can pan, zoom-in and zoom-out this chart using mouse wheel, pinch-zoom or zoom tools on the bottom-right.
- 	Sunburst
- 	Template fields
+Sunburst
+Template fields
 
 ## JavaScript
 
@@ -32,24 +32,23 @@ root.setThemes([
 ]);
 
 
-var container = root.container.children.push(
-  am5.ZoomableContainer.new(root, {
+var chart = root.container.children.push(
+  am5.SerialChartContainer.new(root, {
     width: am5.p100,
-    height: am5.p100,
-    wheelable: true,
-    pinchZoom: true
+    height: am5.p100
   })
 );
 
-var zoomTools = container.children.push(am5.ZoomTools.new(root, {
-  target: container
-}));
+chart.zoomableContainer.setAll({
+  wheelable: true,
+  pinchZoom: true
+});
+
+var zoomTools = chart.set("zoomTools", am5.ZoomTools.new(root, {}));
 
 // Add title
-var title = container.contents.children.push(am5.Label.new(root, {
-  text: "COFFEE
-[#63bdc5]AROMA[/]
-[#63bdc5]WHEEL[/]",
+var title = chart.zoomableContainer.contents.children.push(am5.Label.new(root, {
+  text: "COFFEE\n[#63bdc5]AROMA[/]\n[#63bdc5]WHEEL[/]",
   textAlign: "center",
   x: am5.p50,
   y: am5.p50,
@@ -60,9 +59,8 @@ var title = container.contents.children.push(am5.Label.new(root, {
   fill: am5.color(0x385d63)
 }));
 
-var credits = container.children.push(am5.Label.new(root, {
-  text: "Inspired by
-[bold]CoffeeMind",
+var credits = chart.children.push(am5.Label.new(root, {
+  text: "Inspired by\n[bold]CoffeeMind",
   x: am5.p100,
   y: 0,
   centerX: am5.p100,
@@ -83,7 +81,7 @@ credits.events.on("click", function() {
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
-var series = container.contents.children.push(am5hierarchy.Sunburst.new(root, {
+var series = chart.series.push(am5hierarchy.Sunburst.new(root, {
   singleBranchOnly: true,
   downDepth: 2,
   initialDepth: 2,
@@ -257,8 +255,7 @@ var data = [{
   }, {
     value: 0.1, nodeSettings: { fill: am5.color(0xffffff) }
   }, {
-    name: "Herb/
-vegetal",
+    name: "Herb/\nvegetal",
     nodeSettings: { fill: am5.color(0x598264) },
     children: [
       { name: "Thyme", nodeSettings: { fill: am5.color(0x6c8067) }, value: 1 },

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-03-15"
+scraped: "2026-09-29"
 ---
 
 Tree Chart is the simplest form of a hierarchy chart, conceptually speaking. It displays child nodes under the parent nodes with same-level children placed on the same level visually. amCharts Tree Chart enables collapsing of the branches (try clicking on a node with children) and auto-calculation of values based on the children values.
@@ -28,22 +28,23 @@ root.setThemes([
 ]);
 
 
-var zoomableContainer = root.container.children.push(
-  am5.ZoomableContainer.new(root, {
+var chart = root.container.children.push(
+  am5.SerialChartContainer.new(root, {
     width: am5.p100,
-    height: am5.p100,
-    wheelable: true,
-    pinchZoom: true
+    height: am5.p100
   })
 );
 
-var zoomTools = zoomableContainer.children.push(am5.ZoomTools.new(root, {
-  target: zoomableContainer
-}));
+chart.zoomableContainer.setAll({
+  wheelable: true,
+  pinchZoom: true
+});
+
+var zoomTools = chart.set("zoomTools", am5.ZoomTools.new(root, {}));
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
-var series = zoomableContainer.contents.children.push(am5hierarchy.Tree.new(root, {
+var series = chart.series.push(am5hierarchy.Tree.new(root, {
   singleBranchOnly: false,
   downDepth: 1,
   initialDepth: 10,

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-03-15"
+scraped: "2026-09-29"
 ---
 
 Vertical Partition Chart displays hierarchical data in vertically distributed levels. While not the most visually appealing, the chart gives a very clear view into the values comprising the higher levels.
@@ -27,7 +27,7 @@ root.setThemes([
 
 
 // Create wrapper container
-var container = root.container.children.push(am5.Container.new(root, {
+var chart = root.container.children.push(am5.SerialChartContainer.new(root, {
   width: am5.percent(100),
   height: am5.percent(100),
   layout: root.verticalLayout
@@ -36,7 +36,7 @@ var container = root.container.children.push(am5.Container.new(root, {
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
-var series = container.children.push(am5hierarchy.Partition.new(root, {
+var series = chart.series.push(am5hierarchy.Partition.new(root, {
   singleBranchOnly: false,
   orientation: "vertical",
   downDepth: 1,

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-03-15"
+scraped: "2026-09-29"
 ---
 
 Voronoi treemaps (diagrams) are a data visualization technique that combines the concepts of Voronoi diagrams and treemaps to represent hierarchical data. In a Voronoi treemap, the available space is divided into cells based on the Voronoi diagram, where each cell represents a portion of the data. The hierarchical structure is encoded by nesting cells within each other, with larger cells containing smaller cells. The size of each cell corresponds to a quantitative value associated with the data element it represents. By employing this approach, Voronoi treemaps offer a visually appealing and space-filling representation of hierarchical data, allowing users to explore the data's structure and proportions in a hierarchical context.
@@ -1241,23 +1241,24 @@ am5.array.each(data.children, function (continent) {
 });
 
 
-var zoomableContainer = root.container.children.push(
-  am5.ZoomableContainer.new(root, {
+var chart = root.container.children.push(
+  am5.SerialChartContainer.new(root, {
     width: am5.p100,
-    height: am5.p100,
-    wheelable: true,
-    pinchZoom: true
+    height: am5.p100
   })
 );
 
+chart.zoomableContainer.setAll({
+  wheelable: true,
+  pinchZoom: true
+});
 
-var zoomTools = zoomableContainer.children.push(am5.ZoomTools.new(root, {
-  target: zoomableContainer
-}));
+
+var zoomTools = chart.set("zoomTools", am5.ZoomTools.new(root, {}));
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
-var series = zoomableContainer.contents.children.push(am5hierarchy.VoronoiTreemap.new(root, {
+var series = chart.series.push(am5hierarchy.VoronoiTreemap.new(root, {
   paddingLeft: 5,
   paddingRight: 5,
   paddingTop: 5,

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-03-15"
+scraped: "2026-09-29"
 ---
 
 This chart is added to a Zoomable Container, so you can pan, zoom-in and zoom-out this chart using mouse wheel, pinch-zoom or zoom tools on the bottom-right.
@@ -491,22 +491,23 @@ var data = {
   ]
 };
 
-var zoomableContainer = root.container.children.push(
-  am5.ZoomableContainer.new(root, {
+var chart = root.container.children.push(
+  am5.SerialChartContainer.new(root, {
     width: am5.p100,
-    height: am5.p100,
-    wheelable: true,
-    pinchZoom: true
+    height: am5.p100
   })
 );
 
-var zoomTools = zoomableContainer.children.push(am5.ZoomTools.new(root, {
-  target: zoomableContainer
-}));
+chart.zoomableContainer.setAll({
+  wheelable: true,
+  pinchZoom: true
+});
+
+var zoomTools = chart.set("zoomTools", am5.ZoomTools.new(root, {}));
 
 // Create series
 // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
-var series = zoomableContainer.contents.children.push(am5hierarchy.ForceDirected.new(root, {
+var series = chart.series.push(am5hierarchy.ForceDirected.new(root, {
   maskContent:false, //!important with zoomable containers
   singleBranchOnly: false,
   downDepth: 2,

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

@@ -2,12 +2,12 @@
 title: "100% Stacked Area Chart"
 source: "https://www.amcharts.com/demos/100-stacked-area-chart/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Using calculated values for series
 In amCharts 6, Series can be drawn from a variety of auto-calculated values, not necessarily the absolute ones.
-In this case, we are setting valueYShow data field to "valueYTotalPercent" which is an auto-calculated value, producing a 100% stack chart.
+In this case, we are setting valueYShow data field to "valueYTotalPercent" which is an auto-calculated value, producing a 100% stack chart.
 XY chart
 Line series
 XY chart series: 100% stacks
@@ -185,8 +185,7 @@ function createSeries(name, field) {
     legendValueText: "{valueY}",
     tooltip: am5.Tooltip.new(root, {
       pointerOrientation: "horizontal",
-      labelText: "[bold]{name}[/]
-{categoryX}: {valueYTotalPercent.formatNumber('#.0')}% ({valueY})"
+      labelText: "[bold]{name}[/]\n{categoryX}: {valueYTotalPercent.formatNumber('#.0')}% ({valueY})"
     })
   }));
 

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-03-15"
+scraped: "2026-09-29"
 ---
 
 Displaying a pulsating element at a data point on a chart is a great way to attract viewer's attention. This demo shows you how to do it with amCharts.

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-03-15"
+scraped: "2026-09-29"
 ---
 
 This demo shows you how to create a time-based area chart with amCharts 5.
@@ -88,8 +88,7 @@ var series = chart.series.push(am5xy.LineSeries.new(root, {
   valueXField: "date",
   tooltip: am5.Tooltip.new(root, {
     pointerOrientation: "horizontal",
-    labelText: "[bold]{name}[/]
-{valueX.formatDate()}: {valueY}"
+    labelText: "[bold]{name}[/]\n{valueX.formatDate()}: {valueY}"
   })
 }));
 

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

@@ -2,11 +2,11 @@
 title: "Chart with Gaps in Data"
 source: "https://www.amcharts.com/demos/chart-with-gaps-in-data/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Breaking the line
-If your data contains gaps - data points without values - you can easily make the chart display a gap as well. Just set its connect = false setting.
+If your data contains gaps - data points without values - you can easily make the chart display a gap as well. Just set its connect = false setting.
 [More about line series with gaps](https://www.amcharts.com/docs/v5/charts/xy-chart/series/line-series/#Gaps)
 Defining value ranges
 You can apply different colors and other visual properties to the segments of series that fall within certain range of values. For that you can use "axis ranges".
@@ -15,7 +15,6 @@ You can apply different colors and other visual properties to the segments of se
 ## JavaScript
 
 ```javascript
-
 // Create root element
 // https://www.amcharts.com/docs/v5/getting-started/#Root_element
 var root = am5.Root.new("chartdiv");

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-03-15"
+scraped: "2026-09-29"
 ---
 
 Google popularized this type of chart where data from one period is compared to the same data in the previous period in it's Analytics product. In this demo we implement this concept with amCharts.
@@ -73,8 +73,7 @@ var series = chart.series.push(am5xy.LineSeries.new(root, {
   valueYField: "value1",
   valueXField: "date",
   tooltip: am5.Tooltip.new(root, {
-    labelText: "{valueX}: {valueY}
-{previousDate}: {value2}"
+    labelText: "{valueX}: {valueY}\n{previousDate}: {value2}"
   })
 }));
 

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-03-15"
+scraped: "2026-09-29"
 ---
 
 This demo shows how XYChart can be used to create a Control Chart (also known as Shewhart chart).

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-03-15"
+scraped: "2026-09-29"
 ---
 
 This demo shows how dynamic data item grouping - a feature built-in into amCharts 5 - can help coping with large data sets.
@@ -14,7 +14,6 @@ And, best of all, you're in control when specifying how aggregate values are cal
 ## JavaScript
 
 ```javascript
-
 // Create root element
 // https://www.amcharts.com/docs/v5/getting-started/#Root_element
 var root = am5.Root.new("chartdiv");

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-03-15"
+scraped: "2026-09-29"
 ---
 
 Using minor grid lines enables decluttering the plot container, while still maintaining clear perception of axis scale as well as its relation to the series.

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-03-15"
+scraped: "2026-09-29"
 ---
 
 The most common type of chart is some column or line chart where the Y axis represents numeric values and the X axis is some sequence of discreet values (often referred to as "categories"). The categories can also be some string representations of dates but they are actually just plain strings as far as the chart's smarts are concerned. A proper way to display date-based data is using a date-aware X axis which can handle displaying different labels (days, months, years) based on the amount of data, zoom level, etc., as well as handle different data granularity (eg. no data on some days). All of this is handled automatically by amCharts XY chart.

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

@@ -2,12 +2,12 @@
 title: "Line with Different Negative Color"
 source: "https://www.amcharts.com/demos/date-based-line-chart/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
-Axis ranges
-Axis ranges allow defining a scope of values, or a stretch between categories, or dates. Any property of the segment of the series that falls into that range can be overridden.
-This demo shows how we can color any segment of the line below the zero line with an alternative color.
+Axis ranges
+Axis ranges allow defining a scope of values, or a stretch between categories, or dates. Any property of the segment of the series that falls into that range can be overridden.
+This demo shows how we can color any segment of the line below the zero line with an alternative color.
 [More about using axis ranges with series](https://www.amcharts.com/docs/v5/charts/xy-chart/axes/axis-ranges/)
 
 ## JavaScript

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-03-15"
+scraped: "2026-09-29"
 ---
 
 This demo shows how an XYChart can combine several smoothed LineSeries to depict projections using divergent lines. Divergent lines refer to a set of lines that originate from a common point and gradually spread or move apart from each other as they extend further. These lines exhibit a diverging pattern, creating increasing space or distance between them.
@@ -131,8 +131,7 @@ function createSeries(field, name, color, dashed) {
     tooltip: am5.Tooltip.new(root, {
       pointerOrientation: "horizontal",
       getFillFromSprite: false,
-      labelText: "[bold]{name}[/]
-{valueX}: [bold]{valueY}[/]"
+      labelText: "[bold]{name}[/]\n{valueX}: [bold]{valueY}[/]"
     })
   }));
   

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-03-15"
+scraped: "2026-09-29"
 ---
 
 A very common use-case with line and area charts is having some sort of visual indicator to be able to easily see parts of the series going over (or below) some specific value. It is very easy to implement with amCharts' axis range feature. But we can go one step further and allow the viewer to adjust the indicator value. Try dragging the "Stop loss" indicator box up and down.