@amcharts/amcharts5-mcp 1.4.0 → 1.6.0

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-03-15"
+scraped: "2026-09-29"
 ---
 
 Your charts don't have to be limited to passively displaying data. You can use amCharts as an interactive chart creation surface and enable your users to visually draw new charts. Click anywhere on plot area to draw the new series, drag bullets to adjust positions.

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

@@ -2,16 +2,16 @@
 title: "Duration on Value Axis"
 source: "https://www.amcharts.com/demos/duration-on-value-axis/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
-This demo showcases several powerful concepts. Let's take a look.
-Duration axis
-There's a special type of axis that can reformat the values into any kind of "duration". The units and formats are fully configurable.
-[More info about Duration axis](https://www.amcharts.com/docs/v5/charts/xy-chart/axes/duration-axis/)
-Binding properties of chart elements to data
-Size of the bullets on the "Latitude" series is bound to a data, using its "template fields". This is a very powerful concept, which allows binding any setting of any object to a value in data.
-In this case we bind radius of the circle bullet to the townSize field in data.
+This demo showcases several powerful concepts. Let's take a look.
+Duration axis
+There's a special type of axis that can reformat the values into any kind of "duration". The units and formats are fully configurable.
+[More info about Duration axis](https://www.amcharts.com/docs/v5/charts/xy-chart/axes/duration-axis/)
+Binding properties of chart elements to data
+Size of the bullets on the "Latitude" series is bound to a data, using its "template fields". This is a very powerful concept, which allows binding any setting of any object to a value in data.
+In this case we bind radius of the circle bullet to the townSize field in data.
 [More info about template fields](https://www.amcharts.com/docs/v5/concepts/settings/template-fields/)
 
 ## JavaScript

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-03-15"
+scraped: "2026-09-29"
 ---
 
 Error chart helps you visualize uncertainty or variability of data. This demo shows you how to create error bars on top of a regular line graph.
@@ -117,8 +117,7 @@ var series = chart.series.push(
     valueYField: "visits",
     categoryXField: "country",
     tooltip: am5.Tooltip.new(root, {
-      labelText: "value: {valueY}
-error: {error}"
+      labelText: "value: {valueY}\nerror: {error}"
     })
   })
 );

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-03-15"
+scraped: "2026-09-29"
 ---
 
 Note: this demo uses CategoryDateAxis which is now deprecated in favor of more advanced GaplessDateAxis. Checkout the No-gap Date Axis demo to see GaplessDateAxis in action.

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-03-15"
+scraped: "2026-09-29"
 ---
 
 Charts with multiple series are great to get a high-level view of data but could be hard to read when you want to focus on data in one series. Selecting the series in the legend and highlighting its respective graph is a perfect way to solve this issue.

package/extended/examples/line-area/line-chart-adding-data-every-second.md

@@ -2,7 +2,7 @@
 title: "Line Chart Adding Data Every Second"
 source: "https://www.amcharts.com/demos/line-chart-adding-data-every-second/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Displaying charts for live data is a common task these days and amCharts is here to help you do it in style.

package/extended/examples/line-area/line-chart-with-horizontal-target.md

@@ -2,7 +2,7 @@
 title: "Line Chart with Horizontal Target"
 source: "https://www.amcharts.com/demos/line-chart-with-horizontal-target/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 It is very common to have a target value line on a chart and it is also common to display the parts of the chart that fall below and above that target line differently. Achieving this effect is very easy with amCharts.

package/extended/examples/line-area/line-chart-with-range-slider.md

@@ -2,7 +2,7 @@
 title: "Line Chart with Range Slider"
 source: "https://www.amcharts.com/demos/line-chart-with-range-slider/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Displaying parts of the chart differently is a powerful visual aid helping users comprehend the data better. Add an interactive element adjusting the point dividing the parts and you get a powerful analytical tool.

package/extended/examples/line-area/line-chart-with-scroll-and-zoom.md

@@ -2,7 +2,7 @@
 title: "Line Chart with Scroll and Zoom"
 source: "https://www.amcharts.com/demos/line-chart-with-scroll-and-zoom/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Having the whole chart overview while zooming into parts of it and panning around is a powerful user experience aid. amCharts comes with advanced scrollbars to make this functionality a breeze to impelemnt.

package/extended/examples/line-area/line-different-colors-ups-downs.md

@@ -2,7 +2,7 @@
 title: "Line with Different Colors for Ups and Downs"
 source: "https://www.amcharts.com/demos/line-different-colors-ups-downs/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Sometimes it's great to emphasize the trend in data by coloring the line according to the direction of value changes.

package/extended/examples/line-area/line-graph.md

@@ -2,7 +2,7 @@
 title: "Line Graph"
 source: "https://www.amcharts.com/demos/line-graph/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Line graph (also known as Line chart) displays series of data points connected by straight line segments. Line graphs are often used to display time series chronologically with category axis (usually horizontal x-axis) serving as an evenly spaced date-time scale.

package/extended/examples/line-area/line-with-changing-color.md

@@ -2,7 +2,7 @@
 title: "Line with Changing Color"
 source: "https://www.amcharts.com/demos/line-with-changing-color/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Alternating line color via data

package/extended/examples/line-area/line-with-custom-bullets.md

@@ -2,7 +2,7 @@
 title: "Line with Custom Bullets"
 source: "https://www.amcharts.com/demos/line-with-custom-bullets/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Anything can be a bullet
@@ -53,39 +53,48 @@ var colorSet = am5.ColorSet.new(root, {});
 var data = [
   {
     date: "2021-12-31 18:00",
-    value: 0
+    value: 0,
+    iconSettings: { src: "https://amcharts.com/wp-content/uploads/assets/timeline/timeline0.svg" }
   },
   {
     date: "2021-12-31 19:00",
-    value: 0
+    value: 0,
+    iconSettings: { src: "https://amcharts.com/wp-content/uploads/assets/timeline/timeline1.svg" }
   },
   {
     date: "2021-12-31 20:00",
-    value: 0
+    value: 0,
+    iconSettings: { src: "https://amcharts.com/wp-content/uploads/assets/timeline/timeline2.svg" }
   },
   {
     date: "2021-12-31 21:00",
-    value: 0.3
+    value: 0.3,
+    iconSettings: { src: "https://amcharts.com/wp-content/uploads/assets/timeline/timeline3.svg" }
   },
   {
     date: "2021-12-31 22:00",
-    value: 0.8
+    value: 0.8,
+    iconSettings: { src: "https://amcharts.com/wp-content/uploads/assets/timeline/timeline4.svg" }
   },
   {
     date: "2021-12-31 23:00",
-    value: 1.2
+    value: 1.2,
+    iconSettings: { src: "https://amcharts.com/wp-content/uploads/assets/timeline/timeline5.svg" }
   },
   {
     date: "2022-01-01 00:00",
-    value: 2.2
+    value: 2.2,
+    iconSettings: { src: "https://amcharts.com/wp-content/uploads/assets/timeline/timeline6.svg" }
   },
   {
     date: "2022-01-01 01:00",
-    value: 2.5
+    value: 2.5,
+    iconSettings: { src: "https://amcharts.com/wp-content/uploads/assets/timeline/timeline7.svg" }
   },
   {
     date: "2022-01-01 02:00",
-    value: 2.2
+    value: 2.2,
+    iconSettings: { src: "https://amcharts.com/wp-content/uploads/assets/timeline/timeline0.svg" }
   }
 ];
 
@@ -146,14 +155,8 @@ series.data.processor = am5.DataProcessor.new(root, {
 series.strokes.template.setAll({ strokeDasharray: [3, 3], strokeWidth: 2 });
 
 
-var i = -1;
+// Each bullet takes its icon from the data item's "iconSettings"
 series.bullets.push(function () {
-  i++;
-
-  if (i > 7) {
-    i = 0;
-  }
-
   var container = am5.Container.new(root, {
     centerX: am5.p50,
     centerY: am5.p50
@@ -169,7 +172,7 @@ series.bullets.push(function () {
       centerY: am5.p50,
       width: 23,
       height: 23,
-      src: "https://amcharts.com/wp-content/uploads/assets/timeline/timeline" + i + ".svg"
+      templateField: "iconSettings"
     })
   );
 

package/extended/examples/line-area/line-with-data-labels.md

@@ -2,7 +2,7 @@
 title: "Line with Data Labels"
 source: "https://www.amcharts.com/demos/line-with-data-labels/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Line series in amCharts can have labels displayed near data points, the same as any other series type. Labels are added in the same way as regular bullets, by attaching them to individual data points. You can customize the appearance and position of the labels, including their font, size, color, and alignment. Additionally, you can add a background, border, or padding to make the labels stand out. This allows you to effectively highlight values or provide additional context directly on the chart.

package/extended/examples/line-area/live-data.md

@@ -2,7 +2,7 @@
 title: "Live Data"
 source: "https://www.amcharts.com/demos/live-data/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Displaying pre-defined data in the most beautiful and readable way is great but amCharts lets you visualize live constantly updating data just as well.

package/extended/examples/line-area/live-order-book-depth-chart.md

@@ -1,17 +1,15 @@
 ---
-title: "Live Order Book / Depth Chart"
+title: "Crypto Order Book Depth Chart"
 source: "https://www.amcharts.com/demos/live-order-book-depth-chart/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
-Important: This demo uses direct access URL to Poloniex API, which may be prevented by CORS restrictions in browser. If the demo does not work, try accessing the following URL directly first, then reload this page, so the source is cached.
-This demo shows how you can implement a simple "Order Book" chart using our XYChart. The chart shows a real distribution of booked sell and buy orders for bitcoin and their volume.
+This order book depth chart (market depth chart) is built in JavaScript with a standard amCharts 5 XYChart. It plots cumulative bids and asks as step lines, with the volume at each price level as columns, using live order book data for the ETH/BTC pair (Ether priced in bitcoin).
 Live data loading and processing
-This chart uses amCharts 5 build-in external data loading functionality.
-In this case we load data directly from Bitcoin exchange Poloniex API.
-The chart is set to reload the data every 30 seconds.
-[More about loading external data](https://www.amcharts.com/docs/v5/concepts/data/#External_data)
+The chart uses amCharts 5 built-in external data loading (am5.net.load()) to fetch the top 50 bids and asks from the public Binance market data API. The endpoint allows cross-origin requests and needs no API key, so the data loads directly in the browser.
+Each price/volume pair is sorted and accumulated into running totals before it is set as chart data. The order book reloads every 30 seconds; if a request fails, the demo falls back to a built-in sample order book.
+More about loading external data
 
 ## JavaScript
 
@@ -84,9 +82,7 @@ var bidsTotalVolume = chart.series.push(am5xy.StepLineSeries.new(root, {
   fill: am5.color(0x00ff00),
   tooltip: am5.Tooltip.new(root, {
     pointerOrientation: "horizontal",
-    labelText: "[width: 120px]Ask:[/][bold]{categoryX}[/]
-[width: 120px]Total volume:[/][bold]{valueY}[/]
-[width: 120px]Volume:[/][bold]{bidsvolume}[/]"
+    labelText: "[width: 120px]Ask:[/][bold]{categoryX}[/]\n[width: 120px]Total volume:[/][bold]{valueY}[/]\n[width: 120px]Volume:[/][bold]{bidsvolume}[/]"
   })
 }));
 bidsTotalVolume.strokes.template.set("strokeWidth", 2)
@@ -105,9 +101,7 @@ var asksTotalVolume = chart.series.push(am5xy.StepLineSeries.new(root, {
   fill: am5.color(0xff0000),
   tooltip: am5.Tooltip.new(root, {
     pointerOrientation: "horizontal",
-    labelText: "[width: 120px]Ask:[/][bold]{categoryX}[/]
-[width: 120px]Total volume:[/][bold]{valueY}[/]
-[width: 120px]Volume:[/][bold]{asksvolume}[/]"
+    labelText: "[width: 120px]Ask:[/][bold]{categoryX}[/]\n[width: 120px]Total volume:[/][bold]{valueY}[/]\n[width: 120px]Volume:[/][bold]{asksvolume}[/]"
   })
 }));
 asksTotalVolume.strokes.template.set("strokeWidth", 2)
@@ -145,7 +139,7 @@ cursor.lineY.set("visible", false);
 
 // Data loader
 function loadData() {
-  am5.net.load("https://poloniex.com/public?command=returnOrderBook&currencyPair=BTC_ETH&depth=50").then(function(result) {
+  am5.net.load("https://data-api.binance.vision/api/v3/depth?symbol=ETHBTC&limit=50").then(function(result) {
     var data = am5.JSONParser.parse(result.response);
     parseData(data);
   }).catch(function() {

package/extended/examples/line-area/logarithmic-scale.md

@@ -2,7 +2,7 @@
 title: "Logarithmic Scale"
 source: "https://www.amcharts.com/demos/logarithmic-scale/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Displaying wide-ranging values on a regular (linear) scale makes charts unreadable. Switch your value axis to logarithmic scale and get back to highly useful data visualizations.

package/extended/examples/line-area/manipulate-chart-data-with-mouse.md

@@ -2,7 +2,7 @@
 title: "Manipulate chart data with mouse"
 source: "https://www.amcharts.com/demos/manipulate-chart-data-with-mouse/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Click and move mouse anywhere on plot area to change the graph.

package/extended/examples/line-area/mixed-daily-and-intra-day-chart.md

@@ -2,7 +2,7 @@
 title: "Mixed Daily and Intra-Day Chart"
 source: "https://www.amcharts.com/demos/mixed-daily-and-intra-day-chart/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Displaying both daily and hourly data on the same chart is a great way to provide an overview high-level data and more granular details at a glance.

package/extended/examples/line-area/multiple-date-axes.md

@@ -2,7 +2,7 @@
 title: "Multiple Date Axes"
 source: "https://www.amcharts.com/demos/multiple-date-axes/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Just like you can have multiple value axes to address different ranges of values, you can also have multiple date axes in one XY chart. This could be useful when comparing data between current and previous periods, for example.

package/extended/examples/line-area/multiple-value-axes.md

@@ -2,7 +2,7 @@
 title: "Multiple Value Axes"
 source: "https://www.amcharts.com/demos/multiple-value-axes/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 It's very common to have multiple vastly different values yet want to be able to visually compare trends and relations between them. When you chart those values on the same scale you get mostly unusable results. But if you could map different graphs along different value axes you'd get a much better visualization. And amCharts has all the tools for you to achieve this. This demo shows you how.

package/extended/examples/line-area/no-gap-date-axis.md

@@ -2,7 +2,7 @@
 title: "No-gap Date Axis"
 source: "https://www.amcharts.com/demos/no-gap-date-axis/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 It's a common scenario, especially in financial data, that you have non-continuous data - there are gaps at night or on weekends or holidays. And it is a widespread practice that these gaps are not displayed on the axis, showing only the dates that have data. For this purpose, we created a GaplessDateAxis class, which addresses this use-case. Just replace your DateAxis with this class and that's it - no more gaps in your chart.

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

@@ -2,7 +2,7 @@
 title: "Process Control Chart"
 source: "https://www.amcharts.com/demos/process-control-chart/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 This demo shows an implementation of a Process control chart.

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

@@ -2,7 +2,7 @@
 title: "Range Area Chart"
 source: "https://www.amcharts.com/demos/range-area-chart/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Range Area Chart is a type of area chart where rather than starting on the axis, the area is represented by the space between two values. These charts are useful for displaying ranges of values, such as between minimum and maximum prices over a timespan, or projected values for the future when the projection is represented by a range instead of a specific value.

package/extended/examples/line-area/range-chart-with-different-fill-colors.md

@@ -2,10 +2,10 @@
 title: "Range Chart with Different Fill Colors"
 source: "https://www.amcharts.com/demos/range-chart-with-different-fill-colors/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
-Range charts are great for displaying the delta between two values at a specific point. Data sets with a small number of discreet values are easy to represent with a floating column chart and those are easy to color according to the trend in data. But when you have more and/or continuous (eg. date-based) values floating columns become less than optimal. 
+Range charts are great for displaying the delta between two values at a specific point. Data sets with a small number of discreet values are easy to represent with a floating column chart and those are easy to color according to the trend in data. But when you have more and/or continuous (eg. date-based) values floating columns become less than optimal.
 So, you display the range as an area chart. But now you have a problem of displaying the positive/negative trends in data differently. Luckily, you are using amCharts and it has all the tools you need to complete the task.
 Key implementation details
 As mentioned, we are displaying the range via an area chart (LineSeries with both valueYField and openValueYField set, and a non-transparent fill). And to color the parts differently we go through the data, determine intersection points where open value becomes less than close (and vice versa), and create axis ranges on the series to fill those sections differently.

package/extended/examples/line-area/reversed-value-axis.md

@@ -2,7 +2,7 @@
 title: "Reversed Value Axis"
 source: "https://www.amcharts.com/demos/reversed-value-axis/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 In most common scenarios your line or column chart has a value axis that goes up from the bottom left corner (for positive values). But in some cases you may want to reverse this behavior. This demo shows you how to do it.
@@ -164,8 +164,7 @@ function createSeries(name, field) {
       categoryXField: "year",
       tooltip: am5.Tooltip.new(root, {
         pointerOrientation: "horizontal",
-        labelText: "[bold]{name}[/]
-{categoryX}: {valueY}"
+        labelText: "[bold]{name}[/]\n{categoryX}: {valueY}"
       })
     })
   );

package/extended/examples/line-area/selecting-and-marking-multiple-ranges.md

@@ -2,7 +2,7 @@
 title: "Selecting and Marking Multiple Ranges"
 source: "https://www.amcharts.com/demos/selecting-and-marking-multiple-ranges/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Click and drag on plot area to select a range on a chart. Chart creates an axis range in the place of a selection and also checks if a new range is not overlapping with previously created.
@@ -13,7 +13,6 @@ Tracking cursor movementAxis ranges
 ## 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/show-percentage-change.md

@@ -2,7 +2,7 @@
 title: "Show Percentage Change"
 source: "https://www.amcharts.com/demos/show-percentage-change/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 If your data already has percent values, then all you need to do is to add % sign to the y axis labels, for this you set number format on the axis:

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

@@ -2,7 +2,7 @@
 title: "Smoothed Line Chart"
 source: "https://www.amcharts.com/demos/smoothed-line-chart/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Smoothing algorithms

package/extended/examples/line-area/smoothed-stacked-area.md

@@ -2,7 +2,7 @@
 title: "Smoothed Stacked Area"
 source: "https://www.amcharts.com/demos/smoothed-stacked-area/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 amCharts 5 comes with a number of line smoothing algorithms that you can use to suit your particular data.
@@ -159,8 +159,7 @@ function createSeries(name, field) {
     stroke: am5.color(0xffffff),
     tooltip: am5.Tooltip.new(root, {
       pointerOrientation: "horizontal",
-      labelText: "[bold]{name}[/]
-{categoryX}: {valueY}"
+      labelText: "[bold]{name}[/]\n{categoryX}: {valueY}"
     })
   }));
 

package/extended/examples/line-area/spline-graph.md

@@ -2,7 +2,7 @@
 title: "Spline Graph"
 source: "https://www.amcharts.com/demos/spline-graph/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 A spline graph is a type of line chart that uses a smoothing algorithm to create a curved line connecting the data points, rather than straight lines. Use the slider on the plot area to adjust the level of smoothness.

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

@@ -2,7 +2,7 @@
 title: "Stacked Area"
 source: "https://www.amcharts.com/demos/stacked-area/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Stacked Area Chart (also known as Stacked Area Plot) is a variation on a simple Area Chart with multiple areas stacked on top of each other. This allows comparing the evolution of the whole as well as contributions of individual parts over a period.
@@ -181,8 +181,7 @@ function createSeries(name, field) {
     categoryXField: "year",
     tooltip: am5.Tooltip.new(root, {
       pointerOrientation: "horizontal",
-      labelText: "[bold]{name}[/]
-{categoryX}: {valueY}"
+      labelText: "[bold]{name}[/]\n{categoryX}: {valueY}"
     })
   }));
 

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

@@ -2,7 +2,7 @@
 title: "Step Line Chart"
 source: "https://www.amcharts.com/demos/step-line-chart/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Step Line Chart (also known as Step Chart, Stepped Line Chart) is useful when you want to show changes happening at specific points. In contrast to Line Chart, which connects data points with the shortest possible line thus creating an appearance of values changing gradually, Step Line Chart highlights that values change discretely at specific points.

package/extended/examples/line-area/step-line-without-risers.md

@@ -2,7 +2,7 @@
 title: "Step Line Without Risers"
 source: "https://www.amcharts.com/demos/step-line-without-risers/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Step line chart is a great alternative to a regular line chart when you have discreet data items. A regular line connecting two data points would mislead the viewer suggesting that there was some continuous movement from point A to point B when in reality there was a jump with no intermediary values. Additionally, amCharts lets you display step line chart with no vertical lines making it a great alternative to a column chart when there's a lot of data.

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

@@ -2,7 +2,7 @@
 title: "Stream / ThemeRiver Chart"
 source: "https://www.amcharts.com/demos/stream-chart/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 The ThemeRiver or Stream chart is a type of flow graph that shows changes of events (themes) over time.
@@ -121,8 +121,7 @@ function createSeries(field, name) {
     categoryXField: "year",
     tooltip: am5.Tooltip.new(root, {
       pointerOrientation: "horizontal",
-      labelText: "[fontSize: 18px]{name}[/]
-{categoryX}: [bold]{" + field + "}[/]"
+      labelText: "[fontSize: 18px]{name}[/]\n{categoryX}: [bold]{" + field + "}[/]"
     })
   }));
   

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

@@ -2,7 +2,7 @@
 title: "Trend Lines"
 source: "https://www.amcharts.com/demos/trend-lines/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 You can create real analytical trendlines, indicators, and other annotations with amCharts Stock Chart but when you need something simple you can just use the core tools at your disposal in the XY Charts.

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

@@ -2,7 +2,7 @@
 title: "Vertical Line Chart"
 source: "https://www.amcharts.com/demos/vertical-line-chart/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Need your line chart to go from the bottom to the top instead of left to right? No problem with amCharts.

package/extended/examples/line-area/zoomable-value-axis.md

@@ -2,14 +2,14 @@
 title: "Zoomable Value Axis"
 source: "https://www.amcharts.com/demos/zoomable-value-axis/"
 category: "line-area"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
-Zoomable in any direction
-The chart can support zooming in any direction. For that it has two settings: scrollbarX and scrollbarY. Both can be set with an instance of a Scrollbar, and configured individually.
-[More about zooming of axes](https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/)
-Zooming with cursor
-Chart cursor can be set up to perform a plethora of tasks. In this demo we have set cursor's behavior to "zoomY" which means that cursor will select and zoom vertically.
+Zoomable in any direction
+The chart can support zooming in any direction. For that it has two settings: scrollbarX and scrollbarY. Both can be set with an instance of a Scrollbar, and configured individually.
+[More about zooming of axes](https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/)
+Zooming with cursor
+Chart cursor can be set up to perform a plethora of tasks. In this demo we have set cursor's behavior to "zoomY" which means that cursor will select and zoom vertically.
 [More about chart cursor](https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/)
 
 ## JavaScript