@amcharts/amcharts5-mcp 1.4.0 → 1.6.0

package/extended/concepts/serializing/chart-serializer.md

@@ -60,27 +60,19 @@ Comment
 
 Remove the empty objects from the resulting JSON.
 
-`includeProjection`
-
-`boolean`
-
-`false`
-
-Include `projection` setting for `MapChart`.
-
 `includeStates`
 
 `boolean`
 
-`false`
+`true`
 
 Include element and template states.
 
 `includeAdapters`
 
-boolean
+`boolean`
 
-`false`
+`true`
 
 Include adapters in the output.
 
@@ -92,17 +84,55 @@ Include adapters in the output.
 
 Export functions as references or stringify them.
 
-The below instructs serializer to include both states and adapters in the output:
+`includeRoot`
+
+`boolean`
+
+`false`
+
+Add a top-level `root` section with the `Root` object's settings and properties (`interfaceColors`, formatters, `utc`, `fps`, `tabindex`) to the output. `JsonParser` applies a `root` section before parsing the chart. *(5.20.2)*
+
+`runningAnimations`
+
+`boolean`
+
+`true`
+
+Write an animation started in code that loops forever (`loops: Infinity`) into the element's `animations` setting, so the parsed chart plays it too. See "Animations" below. *(5.20.8)*
+
+**What gets serialized (5.20.3+):** only **user-set** settings — theme and library defaults are left out, so the output is much smaller than in earlier versions and a value you never set will not appear. Chart-set values and data a chart builds for itself (a flow's nodes, a word cloud's words) are not written. Objects pointing at one another are written as references (e.g. `"@series.get('fill')"`) instead of copies, and big values (a map's `geoJSON`, a `Root`'s locale) are written as the name of the pack they came from and rebuilt on parse. Since 5.20.7 a map series' data rows no longer carry the properties the map copies onto them from its geodata (`name`, and on some maps `CNTRY`, `TYPE`) — only values that differ from the feature's are written, and a row left with nothing but its id is dropped.
+
+Both states and adapters are included by default. The below instructs serializer to leave them out of the output:
 
 const serializer = am5plugins\_json.ChartSerializer.new(root, {
-  includeAdapters: true,
-  includeProjection: true
+  includeStates: false,
+  includeAdapters: false
 });
 
 var serializer = am5plugins\_json.ChartSerializer.new(root, {
-  includeAdapters: true,
-  includeProjection: true
+  includeStates: false,
+  includeAdapters: false
+});
+
+### Animations (5.20.8)
+
+An element's `animations` setting (see "[Animations: Declarative animations](https://www.amcharts.com/docs/v5/concepts/animations/)") is written as configured. A setting one of its entries animates is written with the value it was configured with, never one caught mid-animation.
+
+With `runningAnimations: true` (the default) *(5.20.8)*, an animation started in code with `animate()` that loops forever (`loops: Infinity`) and uses a named easing is written as an `animations` entry (`{ key, from, to, duration, loops: 0 }`, plus `easing`, `ease` and `yoyo` where they apply), and the setting it animates is left out of the output. A globe that keeps turning or a bullet that keeps pulsing thus plays on in the parsed chart.
+
+Never written:
+
+-   Animations that end: `appear()`, state transitions, zooming, any `animate()` with a finite `loops`.
+-   Animations whose easing is a function of your own, a wrapped `am5.ease.pow`, or an easing that cannot be named (e.g. `am5.ease.out(am5.ease.yoyo(...))`). `am5.ease.easingInfo()` tells whether an easing has a name.
+-   As of 5.20.8, a loop started in code on a **data item** (e.g. `dataItem.animate({ key: "positionOnLine", loops: Infinity })`). Declare it as an `animations` entry with `target: "dataItem"` on the bullet's sprite instead.
+
+To turn this off:
+
+```javascript
+var serializer = am5plugins_json.ChartSerializer.new(root, {
+  runningAnimations: false
 });
+```
 
 ### Including related elements
 
@@ -110,23 +140,29 @@ var serializer = am5plugins\_json.ChartSerializer.new(root, {
 
 The serializer will detect `Legend` or `HeatLegend` and include it in the output if its a child of one of the chart's built-in containers, like `rightAxesContainer`, its series or the chart itself.
 
+Since 5.20.7 a legend placed inside an axis header (`axisHeader`) round-trips too. Before, parsing such a config failed with "Could not find ref", because the legend names a series defined further down the config (see "[Grouping referenced objects](https://www.amcharts.com/docs/v5/concepts/serializing/#Grouping_referenced_objects)").
+
 #### Custom elements
 
 Custom elements, like labels and the like, will not be included in the output unless the have a `"serialize"` in their `themeTags`:
 
 pieSeries.children.push(am5.Label.new(root, {
-  text: "Hello,
+  text: "Hello",
   x: am5.p50,
   y: am5.p50,
   themeTags: \["serialize"\]
-});
+}));
 
 pieSeries.children.push(am5.Label.new(root, {
-  text: "Hello,
+  text: "Hello",
   x: am5.p50,
   y: am5.p50,
   themeTags: \["serialize"\]
-});
+}));
+
+#### Theme tags (5.20.6)
+
+Since 5.20.6 the `themeTags` you give an element are written to the output too, so anything styled through them (e.g. a `Button` with `themeTags: ["switch"]`) keeps that styling when the config is parsed again. Only tags passed to the element's `.new()` call are written — tags added later via `set("themeTags", …)`, and tags the library adds itself, are left out. On parse, the tags are added to the ones an existing element already has rather than replacing them.
 
 ## Supported chart types
 
@@ -137,24 +173,28 @@ pieSeries.children.push(am5.Label.new(root, {
 -   Venn
 -   WordCloud
 -   MapChart
+-   Gantt *(5.20.3)*
 
 ## Limitations
 
 ### Limited functionality
 
--   Bullets (series or axis): No support for bullets that reference outside objects or context-based bullets (where bullet code depends on context to determine its appearance)
+-   Bullets (series or axis): No support for bullets that reference outside objects or context-based bullets (where bullet code depends on context to determine its appearance). Declare bullet factories as `function(root, series, dataItem)` — a factory that closes over an outer `root` dangles on re-bind.
 -   Bullets or adapters that rely on global variables. Parser runs in a different scope, thus global variables might not be available.
+-   **Adapters do not round-trip.** With `includeAdapters: true` (the default) each adapter is written as `{ key, callback: "function (…) {…}" }` (a string) — `JsonParser` does not turn it back into a function. Before 5.20.4 the string was registered as a callback and crashed the chart (`i[s] is not a function` in `Entity.fold`); since 5.20.4 such adapters are skipped on parse. Prefer declarative equivalents (`colorByDataItem` on column series, per-item `fill` + `templateField`, `heatRules`).
+-   **Serialize the chart's top-level container child, not a bare series.** A series whose settings point back at itself (e.g. `selectedDataItem`, a `DataItem` whose `component` is the series) forms a cycle; serialized on its own it overflows `removeEmptyObjects` pruning or makes `JSON.stringify` throw "Converting circular structure". As a child of the serialized container it becomes a `#series-0` reference and the cycle disappears.
+-   A bullet heat rule's throwaway sprite (created while the serializer introspects the bullet factory) has no `dataItem`; as of 5.20.8 the heat-rule loop then throws and, on a `LineSeries`, the stroke disappears. Have the factory call `sprite._setDataItem(dataItem)` or serialize before adding the rule.
 
 ### Unsupported features
 
--   Maps: Projections
+-   Maps: projections that are not registered by name. A projection set via `projectionName`, one of the bundled factories (`am5map.geoMercator()`, `am5map.geoOrthographic()`, etc.), or the factory returned by `am5map.registerProjection()` is written as `projectionName` and round-trips.
 -   Bullets: Full charts in bullets
--   Axes: Legend inside axis header
 -   Templates: `setup` function
 -   Custom draw functions
 -   Events
+-   `ZoomableContainer`: its `contents.children` and any `ZoomTools` are not serialized — a serialized `ZoomableContainer` parses back empty. Use `SerialChartContainer` (5.20.2), which builds its own zoomable wrapper, or re-wrap in code after parsing.
+-   Venn: `hoverGraphics` and slice-template `states` are not serialized — re-apply a custom hover in code after parsing.
 
 ### Unsupported chart types
 
--   Gantt
 -   StockChart

package/extended/concepts/serializing.md

@@ -22,6 +22,7 @@ Supported features:
 -   Properties
 -   Settings
 -   Adapters
+-   Declared animations — the `animations` setting *(5.20.8)*, see "[Animations](https://www.amcharts.com/docs/v5/concepts/animations/)". In a JSON config, colors and percents in an entry's `from`/`to` use the object form (`{ "type": "Color", "value": "#f00" }`, `{ "type": "Percent", "value": 50 }`).
 
 Unsupported features:
 
@@ -343,6 +344,8 @@ The items in the array will be processed one by one, so that references from the
 
 This way, a value can reference to any object from previous items.
 
+Since 5.20.7, a setting or property value that names a ref defined further down the config (later in the same `refs` object, or in a later group) no longer fails with "Could not find ref" — it is resolved after the rest of the config has been parsed. This is what makes e.g. a legend inside an axis header that lists a series defined later work. Groups are still the way to make sure an object is fully built before something uses it, and they are still required for [axis range](#Axis_ranges) definitions: a range's `axis` and `series` are looked up immediately, so the referenced axis and series need to come first, in an earlier group.
+
 {
   type: "XYChart",
   refs: \[{
@@ -659,6 +662,8 @@ Since adapters are functions, they can't technically be part of a serialized JSO
   }\]
 }
 
+**Adapters and JSON round-trips:** a function reference works only when the config is a JavaScript object in the same scope. Once the config has been through `JSON.stringify` (or `ChartSerializer` with `functionsAs: "string"`), the callback is a string — `JsonParser` does not evaluate it, and since 5.20.4 such an adapter is skipped (before that it was registered as-is and crashed the chart with `i[s] is not a function`). Effects that must survive a round-trip need a declarative equivalent: `colorByDataItem` on column series (5.20.4), a per-item `fill` field with `templateField`, or `heatRules`.
+
 ## Parsing
 
 To parse serialized configs, we'll need:
@@ -679,6 +684,18 @@ parser.parse({
   // ...
 });
 
+### Parse options (`IParseSettings`)
+
+The second argument of `parse()` is an options object — these are **not** settings of the parser itself:
+
+-   `parent` — a `Container` to place the parsed chart into.
+-   `updateTargets` *(5.20.3)* — `"strict"` (default): when the source object has a `type`, a new object of that type is created and replaces the existing one. `"soft"`: if source and target are the same type, only settings are applied onto the existing object (as if `type` had not been specified); objects are replaced only when the types differ. Use `"soft"` to update a live chart from a modified config without rebuilding it.
+
+var parser = am5plugins\_json.JsonParser.new(root);
+parser.parse(config, { parent: root.container, updateTargets: "soft" });
+
+A config may also carry a top-level `root` section *(5.20.2)* whose `settings`/`properties` are applied to the `Root` object before the chart is parsed (`ChartSerializer` writes one when `includeRoot: true`).
+
 ### Post-parse handler
 
 The `parse()` method is asynchronous and returns a `Promise`.

package/extended/concepts/settings/template-fields.md

@@ -99,6 +99,30 @@ And the data:
 }\];
 
 
+## Backgrounds (5.20.7)
+
+A container's `background` (e.g. the background of a `Label`) has no data item of its own. Since 5.20.7, a background that has its own `templateField` reads the data item of the container it belongs to, so a background can be set per data item — for example, a different label background on each bullet:
+
+```javascript
+series.bullets.push(function (root, series, dataItem) {
+  return am5.Bullet.new(root, {
+    sprite: am5.Label.new(root, {
+      text: "{valueY}",
+      populateText: true,
+      background: am5.RoundedRectangle.new(root, {
+        templateField: "labelBg"
+      })
+    })
+  });
+});
+
+// Data
+// { date: ..., value: 1000, labelBg: { fill: am5.color(0xff0000) } }
+```
+
+Before 5.20.7 such a `templateField` on a background was never applied.
+
+
 ## Bullets
 
 There are some caveats involved when using template fields with bullets.

package/extended/examples/candlestick-ohlc/box-plot-chart.md

@@ -2,10 +2,11 @@
 title: "Box Plot Chart"
 source: "https://www.amcharts.com/demos/box-plot-chart/"
 category: "candlestick-ohlc"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
-Box plot chart (also know as boxplot, box-and-whisker plot, box-and-whisker diagram) is a way of displaying statistical data based on five numbers: minimum, first quartile (25th percent), median, third quartile (75th percent) and maximum.
+Box plot chart (also known as boxplot, box-and-whisker plot, box-and-whisker diagram) is a way of displaying statistical data based on five numbers: minimum, first quartile (25th percentile), median, third quartile (75th percentile) and maximum.
+In this JavaScript box plot, each day's distribution is drawn with a CandlestickSeries: the box spans the first to the third quartile, and the whiskers reach the minimum and maximum. The median is a StepLineSeries with noRisers: true, which draws a horizontal line inside each box.
 XY chart
 Candlestick series
 Step line series
@@ -65,32 +66,35 @@ var series = chart.series.push(
   am5xy.CandlestickSeries.new(root, {
     fill: color,
     stroke: color,
-    name: "MDXI",
+    name: "Distribution",
     xAxis: xAxis,
     yAxis: yAxis,
-    valueYField: "close",
-    openValueYField: "open",
-    lowValueYField: "low",
-    highValueYField: "high",
+    // Box: first quartile (Q1) to third quartile (Q3); whiskers: minimum to maximum
+    valueYField: "q3",
+    openValueYField: "q1",
+    lowValueYField: "min",
+    highValueYField: "max",
     valueXField: "date",
     tooltip: am5.Tooltip.new(root, {
       pointerOrientation: "horizontal",
-      labelText: "open: {openValueY}
-low: {lowValueY}
-high: {highValueY}
-close: {valueY},
-mediana: {mediana}"
+      labelText: "Max: {highValueY}\nQ3: {valueY}\nMedian: {median}\nQ1: {openValueY}\nMin: {lowValueY}"
     })
   })
 );
 
-// mediana series
-var medianaSeries = chart.series.push(
+// Box plots use one colour: override the candlestick rise/drop colouring
+var boxColor = chart.get("colors").getIndex(0);
+am5.array.each(["riseFromOpen", "dropFromOpen", "riseFromPrevious", "dropFromPrevious"], function(state) {
+  series.columns.template.states.create(state, { fill: boxColor, stroke: boxColor });
+});
+
+// Median line inside each box
+var medianSeries = chart.series.push(
   am5xy.StepLineSeries.new(root, {
     stroke: root.interfaceColors.get("background"),
     xAxis: xAxis,
     yAxis: yAxis,
-    valueYField: "mediana",
+    valueYField: "median",
     valueXField: "date",
     noRisers: true
   })
@@ -103,95 +107,96 @@ var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
 }));
 cursor.lineY.set("visible", false);
 
+// Five-number summary for each day: minimum, first quartile, median, third quartile, maximum
 var data = [
   {
-    date: "2019-08-01",
-    open: 132.3,
-    high: 136.96,
-    low: 131.15,
-    close: 136.49
+    date: "2027-08-01",
+    min: 124.1,
+    q1: 129.6,
+    median: 132.2,
+    q3: 134.8,
+    max: 139.5
   },
   {
-    date: "2019-08-02",
-    open: 135.26,
-    high: 135.95,
-    low: 131.5,
-    close: 131.85
+    date: "2027-08-02",
+    min: 122.8,
+    q1: 128.4,
+    median: 131.0,
+    q3: 133.9,
+    max: 140.2
   },
   {
-    date: "2019-08-03",
-    open: 129.9,
-    high: 133.27,
-    low: 128.3,
-    close: 132.25
+    date: "2027-08-03",
+    min: 125.6,
+    q1: 130.1,
+    median: 133.4,
+    q3: 136.2,
+    max: 142.8
   },
   {
-    date: "2019-08-04",
-    open: 132.94,
-    high: 136.24,
-    low: 132.63,
-    close: 135.03
+    date: "2027-08-04",
+    min: 127.3,
+    q1: 131.8,
+    median: 134.0,
+    q3: 137.5,
+    max: 144.1
   },
   {
-    date: "2019-08-05",
-    open: 136.76,
-    high: 137.86,
-    low: 132.0,
-    close: 134.01
+    date: "2027-08-05",
+    min: 123.9,
+    q1: 129.2,
+    median: 131.7,
+    q3: 134.3,
+    max: 138.6
   },
   {
-    date: "2019-08-06",
-    open: 131.11,
-    high: 133.0,
-    low: 125.09,
-    close: 126.39
+    date: "2027-08-06",
+    min: 121.4,
+    q1: 127.5,
+    median: 130.3,
+    q3: 133.1,
+    max: 137.9
   },
   {
-    date: "2019-08-07",
-    open: 130.11,
-    high: 133.0,
-    low: 125.09,
-    close: 127.39
+    date: "2027-08-07",
+    min: 124.8,
+    q1: 130.6,
+    median: 133.9,
+    q3: 137.0,
+    max: 143.4
   },
   {
-    date: "2019-08-08",
-    open: 125.11,
-    high: 126.0,
-    low: 121.09,
-    close: 122.39
+    date: "2027-08-08",
+    min: 126.2,
+    q1: 131.4,
+    median: 134.6,
+    q3: 138.1,
+    max: 145.0
   },
   {
-    date: "2019-08-09",
-    open: 131.11,
-    high: 133.0,
-    low: 122.09,
-    close: 124.39
+    date: "2027-08-09",
+    min: 125.0,
+    q1: 130.2,
+    median: 132.8,
+    q3: 135.9,
+    max: 141.7
   }
 ];
 
-addMediana();
-
-function addMediana() {
-  for (var i = 0; i < data.length; i++) {
-    var dataItem = data[i];
-    dataItem.mediana =
-      Number(dataItem.low) + (Number(dataItem.high) - Number(dataItem.low)) / 2;
-  }
-}
-
 series.data.processor = am5.DataProcessor.new(root, {
   dateFields: ["date"],
   dateFormat: "yyyy-MM-dd"
 });
 
 series.data.setAll(data);
-medianaSeries.data.setAll(data);
+medianSeries.data.setAll(data);
 
 // Make stuff animate on load
 // https://www.amcharts.com/docs/v5/concepts/animations/
 series.appear(1000, 100);
-medianaSeries.appear(1000, 100);
-chart.appear(1000, 100);
+medianSeries.appear(1000, 100);
+chart.appear(1000, 100);
+
 ```
 
 ## HTML

package/extended/examples/candlestick-ohlc/candlestick-chart.md

@@ -2,7 +2,7 @@
 title: "Candlestick Chart"
 source: "https://www.amcharts.com/demos/candlestick-chart/"
 category: "candlestick-ohlc"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Candlestick chart is one of the most common ways to display financial data such as stock trading prices over time. Creating candlestick charts with amCharts is really easy and you get a lot of advanced features such as grouping right out of the box (try zooming in and out).
@@ -121,10 +121,7 @@ var series = chart.series.push(
     legendRangeValueText: "{valueYClose}",
     tooltip: am5.Tooltip.new(root, {
       pointerOrientation: "horizontal",
-      labelText: "open: {openValueY}
-low: {lowValueY}
-high: {highValueY}
-close: {valueY}"
+      labelText: "open: {openValueY}\nlow: {lowValueY}\nhigh: {highValueY}\nclose: {valueY}"
     })
   })
 );

package/extended/examples/candlestick-ohlc/ohlc-chart.md

@@ -2,7 +2,7 @@
 title: "OHLC Chart"
 source: "https://www.amcharts.com/demos/ohlc-chart/"
 category: "candlestick-ohlc"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 The OHLC chart is a very popular way to display financial (and other) data over time with open, high, low, and close values for periods.
@@ -115,10 +115,7 @@ var series = chart.series.push(am5xy.OHLCSeries.new(root, {
   legendRangeValueText: "{valueYClose}",
   tooltip: am5.Tooltip.new(root, {
     pointerOrientation: "horizontal",
-    labelText: "open: {openValueY}
-low: {lowValueY}
-high: {highValueY}
-close: {valueY}"
+    labelText: "open: {openValueY}\nlow: {lowValueY}\nhigh: {highValueY}\nclose: {valueY}"
   })
 }));
 
@@ -170,7 +167,7 @@ var sbseries = scrollbar.chart.series.push(am5xy.LineSeries.new(root, {
 
 // Add legend
 // https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
-var legend = yAxis.axisHeader.children.push(
+var legend = chart.plotContainer.children.push(
   am5.Legend.new(root, {})
 );
 

package/extended/examples/candlestick-ohlc/on-demand-data-loading.md

@@ -2,18 +2,18 @@
 title: "On-Demand Data Loading"
 source: "https://www.amcharts.com/demos/on-demand-data-loading/"
 category: "candlestick-ohlc"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 This demo shows a sample Stock chart setup which can load its data on-demand.
 Try panning the chart chart, zooming, switching granularity. The code will gracefully handle loading missing data from the backend.
 It relies on a few of the technologies implemented in amCharts 5:
- 	Incremental data loading
- 	CSV data loading and parsing
- 	Stacked axes
- 	Incremental on-demand data loading (commentary about the code behind this demo)
- 	Stacked axes
- 	XY chart
+Incremental data loading
+CSV data loading and parsing
+Stacked axes
+Incremental on-demand data loading (commentary about the code behind this demo)
+Stacked axes
+XY chart
 
 ## JavaScript
 

package/extended/examples/candlestick-ohlc/professional-candlesticks.md

@@ -2,7 +2,7 @@
 title: "Professional Candlesticks"
 source: "https://www.amcharts.com/demos/professional-candlesticks/"
 category: "candlestick-ohlc"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Professional candlestick chart is similar to the "regular" candlestick chart but applies different coloring logic. You may notice that some candlesticks are filled and some are hollow. More about this type of candlesticks can be found in the docs.
@@ -120,10 +120,7 @@ var series = chart.series.push(
     legendRangeValueText: "{valueYClose}",
     tooltip: am5.Tooltip.new(root, {
       pointerOrientation: "horizontal",
-      labelText: "open: {openValueY}
-low: {lowValueY}
-high: {highValueY}
-close: {valueY}"
+      labelText: "open: {openValueY}\nlow: {lowValueY}\nhigh: {highValueY}\nclose: {valueY}"
     })
   })
 );
@@ -183,7 +180,7 @@ var sbseries = scrollbar.chart.series.push(
 
 // Add legend
 // https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
-var legend = yAxis.axisHeader.children.push(am5.Legend.new(root, {}));
+var legend = chart.plotContainer.children.push(am5.Legend.new(root, {}));
 
 legend.data.push(series);
 

package/extended/examples/candlestick-ohlc/stock-chart-candlesticks.md

@@ -2,7 +2,7 @@
 title: "Stock Chart Candlesticks"
 source: "https://www.amcharts.com/demos/stock-chart-candlesticks/"
 category: "candlestick-ohlc"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 You can create your typical stock charts with amCharts XYChart. In this example we create a candlestick stock price graph and a volume graph under it.

package/extended/examples/column-bar/100-stacked-column-chart.md

@@ -2,15 +2,15 @@
 title: "100% Stacked Column Chart"
 source: "https://www.amcharts.com/demos/100-stacked-column-chart/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 100% stacked column or bar chart is a good way to display some categories of a whole changing over time. For example, a company may use 100% stacked column chart to display what product lines contributed to its revenue by calendar quarter. The downside is that in such a chart it is quite difficult to visually compare the changes over time (except for the first item/series).
 Key implementation details
 You don't need to perform percentage calculations in your code. You can pass your real values to amCharts and the chart will do the rest. For this purpose, we enable calculateTotals (more info here) on the value axis (the Y-axis in this case) and set its range to 0 to 100 (plus enforce it with strictMinMax to disable "smart" min/max features).
 Then, in our series we set the valueYField to our real value, as usual. But after that we take advantage of the "Display fields" feature in amCharts. Display fields allow us to reference derivative calculated values instead of raw values from our data set. In this case we want to set our respective display field (valueYFieldShow) to display the percentage share of our real value. For this we set it to the valueYTotalPercent calculated field.
- 	Calculated values on value axes
- 	Display fields - a way to show alternative values
+Calculated values on value axes
+Display fields - a way to show alternative values
 
 ## JavaScript
 

package/extended/examples/column-bar/bar-and-line-chart-mix.md

@@ -2,7 +2,7 @@
 title: "Bar and Line Chart Mix"
 source: "https://www.amcharts.com/demos/bar-and-line-chart-mix/"
 category: "column-bar"
-scraped: "2026-03-15"
+scraped: "2026-09-29"
 ---
 
 Mixing bar and line chart in the same visual is a good way to emphasize the difference between series while still maintaining their relationship.
@@ -40,13 +40,6 @@ var chart = root.container.children.push(am5xy.XYChart.new(root, {
 }));
 
 
-// Add legend
-// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
-var legend = chart.children.push(am5.Legend.new(root, {
-  centerX: am5.p50,
-  x: am5.p50
-}))
-
 var data = [{
   "year": "2005",
   "income": 23.5,
@@ -112,8 +105,7 @@ var series1 = chart.series.push(am5xy.ColumnSeries.new(root, {
   sequencedInterpolation: true,
   tooltip: am5.Tooltip.new(root, {
     pointerOrientation: "horizontal",
-    labelText: "[bold]{name}[/]
-{categoryY}: {valueX}"
+    labelText: "[bold]{name}[/]\n{categoryY}: {valueX}"
   })
 }));
 
@@ -131,8 +123,7 @@ var series2 = chart.series.push(am5xy.LineSeries.new(root, {
   sequencedInterpolation: true,
   tooltip: am5.Tooltip.new(root, {
     pointerOrientation: "horizontal",
-    labelText: "[bold]{name}[/]
-{categoryY}: {valueX}"
+    labelText: "[bold]{name}[/]\n{categoryY}: {valueX}"
   })
 }));