@amcharts/amcharts5-mcp 1.3.2 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/content/SKILL.md +166 -8
  2. package/content/flow.md +4 -0
  3. package/content/hierarchy.md +21 -0
  4. package/content/map.md +75 -9
  5. package/content/pie.md +16 -0
  6. package/content/radar.md +1 -1
  7. package/content/stock.md +41 -1
  8. package/content/timeline.md +3 -3
  9. package/content/venn.md +4 -0
  10. package/content/wordcloud.md +92 -4
  11. package/content/xy.md +67 -1
  12. package/extended/charts/word-cloud.md +19 -3
  13. package/extended/concepts/colors-gradients-and-patterns/patterns.md +53 -0
  14. package/extended/concepts/events.md +32 -0
  15. package/extended/concepts/serializing/chart-serializer.md +17 -2
  16. package/extended/concepts/serializing.md +14 -0
  17. package/extended/concepts/themes.md +91 -0
  18. package/extended/reference/ibasecolumnseriesdataitem.md +1 -0
  19. package/extended/reference/ibasecolumnseriessettings.md +2 -0
  20. package/extended/reference/ichartserializersettings.md +1 -0
  21. package/extended/reference/imapchartsettings.md +2 -0
  22. package/extended/reference/imaplineseriesdataitem.md +1 -0
  23. package/extended/reference/imaplineseriessettings.md +2 -0
  24. package/extended/reference/iparsesettings.md +9 -3
  25. package/extended/reference/irectanglepatternsettings.md +1 -0
  26. package/extended/reference/irootsettings.md +4 -0
  27. package/extended/reference/iscrollbarsettings.md +1 -0
  28. package/extended/reference/iserialchartcontainersettings.md +16 -0
  29. package/extended/reference/iseriessettings.md +2 -0
  30. package/extended/reference/istarpatternsettings.md +38 -0
  31. package/extended/reference/itrianglepatternsettings.md +37 -0
  32. package/extended/reference/iwordcloudsettings.md +24 -8
  33. package/extended/reference/ixychartsettings.md +2 -0
  34. package/extended/reference/ixycursorsettings.md +1 -0
  35. package/extended/reference/mapchart.md +4 -0
  36. package/extended/reference/serialchart.md +1 -1
  37. package/extended/reference/serialchartcontainer.md +34 -0
  38. package/extended/reference/starpattern.md +51 -0
  39. package/extended/reference/trianglepattern.md +49 -0
  40. package/package.json +2 -1
  41. package/src/content-fs.js +10 -0
  42. package/src/tools.js +73 -21
@@ -57,15 +57,29 @@ series.appear(1000);
57
57
  |---------|------|---------|-------------|
58
58
  | `categoryField` | string | — | Data field for word text (required) |
59
59
  | `valueField` | string | — | Data field for word weight/size (required) |
60
- | `maxFontSize` | number \| Percent | `100` | Maximum font size (a `Percent` is relative to the smaller chart dimension) |
61
- | `minFontSize` | number \| Percent | `10` | Minimum font size (a `Percent` is relative to the smaller chart dimension) |
62
- | `angles` | number[] | `[0]` | Allowed rotation angles for words |
60
+ | `maxFontSize` | number \| Percent | `am5.percent(15)` | Maximum font size (a `Percent` is relative to the smaller chart dimension) |
61
+ | `minFontSize` | number \| Percent | `am5.percent(2)` | Minimum font size (a `Percent` is relative to the smaller chart dimension) |
62
+ | `angles` | number[] | `[0, -90]` | Allowed rotation angles for words. **Any angle works** as of 5.20.1 (e.g. `[0, -30, -45]`), not just `0`/`±90` as in earlier versions |
63
+ | `randomizeAngles` | boolean | `true` | `true` = each word picks a random angle from `angles`. `false` = words cycle through `angles` in order (word 0 → `angles[0]`, …) which, with `randomness: 0`, makes the layout reproducible. *(5.20.1)* |
63
64
  | `randomness` | number (0–1) | `0` | Layout randomness (0 = ordered by value, 1 = fully random) |
65
+ | `allowNesting` | boolean | `true` | `true` = small words tuck into the concavities of bigger ones (tight packing, bounding boxes may overlap). `false` = whole bounding boxes are packed so they never overlap — use this when labels have an opaque `background`. *(5.20.1)* |
64
66
  | `minWordLength` | number | `1` | Skip words shorter than this |
67
+ | `minValue` | number | — | Skip words occurring fewer times than this |
65
68
  | `maxCount` | number | — | Maximum number of words to display |
66
69
  | `excludeWords` | string[] | `[]` | Words to exclude |
67
70
  | `text` | string | — | Raw text to parse — words are extracted and weighted by frequency automatically |
68
71
  | `colors` | ColorSet | — | Color set for words |
72
+ | `fillField` | string | — | Data field holding a per-word label fill color |
73
+ | `autoFit` | boolean | `true` | Scale font sizes down so all words fit the available area |
74
+ | `step` | number | `15` | Step size used when searching for the next word placement |
75
+ | `svgPath` | string | — | Arrange words to fill this SVG path shape (experimental) *(5.20.1)* |
76
+ | `maskByShape` | boolean | `false` | Clip words to the `svgPath` outline for a crisp silhouette. Requires `svgPath`. *(5.20.1)* |
77
+ | `shapeTolerance` | number | `0` | Extra pixels a word may spill past the `svgPath` outline; negative pulls words inside, creating padding. Requires `svgPath`. *(5.20.1)* |
78
+ | `animationDuration` | number | — | Duration of word animation on chart resize |
79
+ | `sequencedInterpolation` | boolean | `true` | Stagger the word reveal instead of showing all at once |
80
+ | `sequencedDelay` | number | `15` | Milliseconds between words when `sequencedInterpolation` is on |
81
+
82
+ **Parser settings and `text`:** `minValue`, `maxCount`, `minWordLength` and `excludeWords` are consumed when `text` is parsed. Since **5.20.0** changing any of them on a live series re-parses `text` automatically. On older versions they only took effect on the next `text` assignment — set them **before** `text`, or re-assign `text` after changing them.
69
83
 
70
84
  ### excludeWords example
71
85
 
@@ -77,7 +91,81 @@ am5wc.WordCloud.new(root, {
77
91
  });
78
92
  ```
79
93
 
80
- **Note:** amCharts WordCloud does not support mask/shape rendering (words constrained to a custom shape). Words are arranged in a rectangular area.
94
+ ## Shaped word clouds — `svgPath` (5.20.1)
95
+
96
+ Words can be arranged to fill an arbitrary shape. The path is scaled proportionally to fit the plot area.
97
+
98
+ ```js
99
+ var series = root.container.children.push(
100
+ am5wc.WordCloud.new(root, {
101
+ categoryField: "tag",
102
+ valueField: "weight",
103
+ svgPath: "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z", // heart
104
+ maskByShape: true, // clip letters that overhang the outline
105
+ shapeTolerance: -4, // negative = padding inside the shape
106
+ angles: [0], // simple shapes fill better with fewer angles
107
+ minFontSize: am5.percent(2),
108
+ maxFontSize: am5.percent(12)
109
+ })
110
+ );
111
+ ```
112
+
113
+ The shape outline itself is drawn behind the words as `series.shape` (a `Graphics`), by default a faint 10%-opacity silhouette. Style or hide it:
114
+
115
+ ```js
116
+ series.shape.setAll({ fill: am5.color(0xff3366), fillOpacity: 0.08 });
117
+ series.shape.set("fillOpacity", 0); // no visible silhouette, words only
118
+ ```
119
+
120
+ Style `fill`/`stroke` only — the series manages the shape's geometry (`svgPath`, `scale`, `x`, `y`) and its `forceHidden` flag, so setting those is pointless. To hide the silhouette use `fillOpacity: 0`.
121
+
122
+ **Caveats:** this is an experimental feature and the fit is approximate. Favor simple, bold shapes over thin or highly concave ones, and tune `shapeTolerance`, `maskByShape`, `angles`, `minFontSize`/`maxFontSize` per shape. `shapeTolerance` affects placement only — the drawn outline never moves.
123
+
124
+ ## Diagonal angles (5.20.1)
125
+
126
+ Before 5.20.1 only `0`, `90` and `-90` were handled. The layout rewrite rasterizes each word and its collision mask at the word's actual angle, so arbitrary angles now work — and neighbors pack into the corners of a rotated word's footprint instead of reserving its full axis-aligned bounding box.
127
+
128
+ ```js
129
+ am5wc.WordCloud.new(root, {
130
+ categoryField: "tag",
131
+ valueField: "weight",
132
+ angles: [0, -30, -45, -60, -90]
133
+ });
134
+ ```
135
+
136
+ One caveat: if a word comes out very wide relative to the available area, the layout flips it to `0` or `±90` for a better fit — but only when that value is present in your `angles` array. Leave them out and your angles are used as given.
137
+
138
+ ## Reproducible layouts
139
+
140
+ By default word placement is randomized, so the cloud looks different on every render. For a stable layout:
141
+
142
+ ```js
143
+ am5wc.WordCloud.new(root, {
144
+ categoryField: "tag",
145
+ valueField: "weight",
146
+ randomness: 0, // order strictly by value
147
+ randomizeAngles: false // cycle `angles` in order instead of picking randomly
148
+ });
149
+ ```
150
+
151
+ ## Labels with opaque backgrounds
152
+
153
+ Nesting lets small words sit inside the gaps of larger ones, which looks wrong once labels have a solid background — the background rectangles slide over neighbors. Turn nesting off so whole bounding boxes are packed:
154
+
155
+ ```js
156
+ series.set("allowNesting", false);
157
+ series.labels.template.setAll({
158
+ background: am5.RoundedRectangle.new(root, { fill: am5.color(0x1f2933), fillOpacity: 1 })
159
+ });
160
+ ```
161
+
162
+ ## Breaking change in 5.20.1
163
+
164
+ The layout is now computed synchronously in a single pass instead of one word per animation frame — much faster for large clouds. Consequences for existing code:
165
+
166
+ - The per-data-item `ghostLabel` no longer exists — `dataItem.get("ghostLabel")` returns `undefined`.
167
+ - Labels are held in an internal container, so code walking `series.children` to find labels breaks. Use `series.labels` (the `ListTemplate`) or `dataItem.get("label")`.
168
+ - The reveal is staggered via `sequencedInterpolation`/`sequencedDelay` (defaults `true` / `15`ms) rather than by the layout itself.
81
169
 
82
170
  ## Customizing labels
83
171
 
package/content/xy.md CHANGED
@@ -95,6 +95,7 @@ chart.set("cursor", am5xy.XYCursor.new(root, {
95
95
  ### Scrollbar
96
96
  ```js
97
97
  chart.set("scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" }));
98
+ // opposite: true (5.20.2) puts scrollbarX below the plot / scrollbarY on the left
98
99
  ```
99
100
 
100
101
  ### Legend
@@ -191,6 +192,10 @@ const xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
191
192
  - `markUnitChange: true` — highlights when time unit changes on axis labels (e.g., new month)
192
193
  - `tooltipDateFormat` — format string for cursor tooltip
193
194
 
195
+ **Live updates — two settings that do not refresh on `set()`:**
196
+ - **Date format maps** (`dateFormats`, `periodChangeDateFormats`, `minorDateFormats`): after `axis.set("dateFormats", {...})` already-rendered labels keep their old text. `axis.markDirtyValues()` is not enough — call **`axis.markDirtySize()`** to make the axis re-run label formatting.
197
+ - **`groupIntervals`** (with `groupData: true`): amCharts only (re)computes grouping when a series' data is set, so changing the allowed intervals on an already-grouped axis does nothing until you re-set the data on every series bound to the axis: `series.data.setAll(series.data.values.slice())`.
198
+
194
199
  **Data format:**
195
200
  ```js
196
201
  series.data.setAll([
@@ -324,7 +329,12 @@ series.columns.template.setAll({
324
329
  width: am5.percent(80), // column width
325
330
  });
326
331
 
327
- // Individual column colors from data:
332
+ // Individual column colors (5.20.4) — declarative, serializes to JSON:
333
+ series.set("colorByDataItem", true); // each column takes the next color from series.get("colors")
334
+ // series.set("colors", am5.ColorSet.new(root, { colors: [...] })); // optional own palette (the series makes one if absent)
335
+ // Per-item color from data instead: templateField + a `fill` in each data item (see pie.md "Data-driven slice colors")
336
+
337
+ // Pre-5.20.4 fallback — an adapter (does NOT survive JSON serialization):
328
338
  series.columns.template.adapters.add("fill", (fill, target) => {
329
339
  return chart.get("colors").getIndex(series.columns.indexOf(target));
330
340
  });
@@ -382,6 +392,17 @@ chart.set("cursor", am5xy.XYCursor.new(root, { snapToSeries: [series] }));
382
392
 
383
393
  **Do NOT** pass `lineX`/`lineY` as constructor options to `XYCursor.new()`. Always access `cursor.lineX` / `cursor.lineY` after creation.
384
394
 
395
+ **Easier edge selections (`clickTolerance`, 5.20.0)** — by default a zoom/select drag can only begin inside the plot area, which makes selecting right up to an edge fiddly. `clickTolerance` widens the area where a press may *start*:
396
+
397
+ ```js
398
+ chart.set("cursor", am5xy.XYCursor.new(root, {
399
+ behavior: "selectX",
400
+ clickTolerance: 20 // px outside the plot area where a drag may start (default 0)
401
+ }));
402
+ ```
403
+
404
+ The selection itself still starts at the plot edge — the press point is clamped into the plot area.
405
+
385
406
  For timeline charts, use `am5timeline.CurveCursor` instead — see `references/timeline.md`.
386
407
 
387
408
  ## Scrollbar
@@ -392,6 +413,7 @@ Enables zooming/panning via scrollbar. Can optionally include a preview chart.
392
413
  // Simple scrollbar:
393
414
  chart.set("scrollbarX", am5.Scrollbar.new(root, {
394
415
  orientation: "horizontal"
416
+ // opposite: true // (5.20.2) place below the plot instead of above (scrollbarY: left instead of right)
395
417
  }));
396
418
 
397
419
  // Scrollbar with preview chart:
@@ -599,8 +621,13 @@ var series2 = chart.series.push(am5xy.LineSeries.new(root, {
599
621
  xAxis: xAxis, yAxis: yAxis2,
600
622
  valueYField: "units", valueXField: "date"
601
623
  }));
624
+
625
+ // Removing an axis — go through the list, NOT axis.dispose():
626
+ chart.yAxes.removeValue(yAxis2); // the list auto-disposes the removed axis
602
627
  ```
603
628
 
629
+ `axis.dispose()` marks the axis disposed but **leaves it in `chart.yAxes`/`chart.xAxes`** (unlike `series.dispose()`, which removes itself from `chart.series`). The stale entry keeps rendering in anything built from the list and makes `ChartSerializer` throw `Template is disposed`. Always use `removeValue(axis)` / `removeIndex(i)`.
630
+
604
631
  ## Axis titles
605
632
 
606
633
  ```js
@@ -675,6 +702,45 @@ am5xy.XYChart.new(root, {
675
702
  })
676
703
  ```
677
704
 
705
+ ## Distinguishing line series without color (5.20.0)
706
+
707
+ `XYChart` can cycle stroke widths and dash patterns across line series as they are added, exactly the way `colors` cycles series colors. Useful for print, for color-blind-safe output, or with the `Patterns` theme.
708
+
709
+ ```js
710
+ const chart = root.container.children.push(am5xy.XYChart.new(root, {
711
+ strokeWidths: [3, 2, 2], // px, cycled per line series
712
+ strokeDasharrays: [0, [6, 3], [2, 2]] // 0 or [] = solid line
713
+ }));
714
+ ```
715
+
716
+ Each added line series takes the next entry by position, wrapping around when the array runs out.
717
+
718
+ ## Series gradients (5.20.0)
719
+
720
+ `Series` accepts `fillGradient` and `strokeGradient`:
721
+
722
+ ```js
723
+ series.set("fillGradient", am5.LinearGradient.new(root, {
724
+ stops: [{ opacity: 0.6 }, { opacity: 0 }],
725
+ rotation: 90
726
+ }));
727
+ ```
728
+
729
+ A bullet `Graphics` that sets none of `fill`, `fillGradient`, `fillPattern`, `stroke`, `strokeGradient` now inherits all of them from its series, so bullets pick up series gradients and patterns automatically.
730
+
731
+ ## Changing fields and axes after creation (5.20.0)
732
+
733
+ ```js
734
+ // Swap which data field a series plots — then re-set the data
735
+ series.set("valueYField", "profit");
736
+ series.data.setAll(data);
737
+
738
+ // Move a series to a different axis
739
+ series.set("yAxis", secondaryYAxis);
740
+ ```
741
+
742
+ Both were previously fixed at creation time. Re-setting the series data is required for a value-field change to take effect.
743
+
678
744
  ---
679
745
 
680
746
  # amCharts 5 XY Charts — Working Examples
@@ -2,6 +2,8 @@
2
2
  title: "Word cloud"
3
3
  source: "https://www.amcharts.com/docs/v5/charts/word-cloud/"
4
4
  scraped: "2026-03-15"
5
+ updated: "2026-08-05"
6
+ updatedFor: "@amcharts/amcharts5@5.20.1"
5
7
  ---
6
8
 
7
9
  [Word clouds](https://en.wikipedia.org/wiki/Tag_cloud) (or tag clouds) help visualize weight or importance of individual words from a keyword list or a free-form text.
@@ -247,13 +249,27 @@ Series setting responsible for identifying possible angles is named `angles`.
247
249
 
248
250
  It's an array of numbers, and the default is `[0, -90]` meaning that words can come at zero (horizontal) or 90 (vertical) angle.
249
251
 
250
- The only supported values are `0`, `90`, and `-90`.
251
-
252
252
  To make all words horizontal, set it to `[0]`. To make all vertical, use `[90]`.
253
253
 
254
+ **Any angle is supported as of 5.20.1.** Earlier versions only handled `0`, `90` and `-90`; the layout rewrite in 5.20.1 rasterizes each word and its collision mask at the word's actual angle, so diagonal values work and neighboring words pack into the corners of a rotated word's footprint rather than reserving its full axis-aligned bounding box.
255
+
256
+ ```javascript
257
+ am5wc.WordCloud.new(root, {
258
+ categoryField: "tag",
259
+ valueField: "weight",
260
+ angles: [0, -30, -45, -60, -90] // arbitrary angles, not just 0/±90
261
+ });
262
+ ```
263
+
264
+ NOTE There is one place where `0` and `±90` still get special treatment: if a word comes out very wide relative to the available area, the layout will flip it to `0` or `±90` for a better fit — but only if that value is present in your `angles` array. Omit them and your angles are used as given.
265
+
266
+ #### Choosing angles
267
+
268
+ `randomizeAngles` (default `true`) picks a random entry from `angles` for each word. Set it to `false` to cycle through `angles` in order — combined with `randomness: 0` this produces a reproducible layout.
269
+
254
270
  #### Rotating whole series
255
271
 
256
- Even though non-horizontal/vertical angles are not supported, the whole series can easily be rotated to achieve intermediate angle effect by `rotation` and relative centering settings to the series itself.
272
+ Instead of (or in addition to) rotating individual words, the whole series can be rotated using `rotation` and relative centering settings on the series itself.
257
273
 
258
274
  let series = root.container.children.push(
259
275
  am5wc.WordCloud.new(root, {
@@ -2,6 +2,8 @@
2
2
  title: "Patterns"
3
3
  source: "https://www.amcharts.com/docs/v5/concepts/colors-gradients-and-patterns/patterns/"
4
4
  scraped: "2026-03-15"
5
+ updated: "2026-08-05"
6
+ updatedFor: "@amcharts/amcharts5@5.20.1"
5
7
  ---
6
8
 
7
9
  This tutorial looks at how we can create patterns to use for element fills ant outlines.
@@ -43,8 +45,57 @@ Example
43
45
 
44
46
  `[PathPattern](https://www.amcharts.com/docs/v5/reference/pathpattern/)`
45
47
 
48
+ `[StarPattern](https://www.amcharts.com/docs/v5/reference/starpattern/)` (5.20.0)
49
+
50
+ `[TrianglePattern](https://www.amcharts.com/docs/v5/reference/trianglepattern/)` (5.20.0)
51
+
46
52
  Patterns can be customized by applying rotation, gap, stroke, and other settings, which we'll explore in a bit.
47
53
 
54
+ ### Star and triangle patterns (5.20.0)
55
+
56
+ `StarPattern` and `TrianglePattern` work like `RectanglePattern`/`CirclePattern` — a grid of shapes with a `gap` between them, and an optional `checkered` mode that places only every second shape.
57
+
58
+ ```javascript
59
+ columnSeries.columns.template.set("fillPattern", am5.StarPattern.new(root, {
60
+ color: am5.color(0xffffff),
61
+ radius: 5, // outer radius of the star, in pixels. Default: 5
62
+ innerRadius: am5.percent(50), // inner radius: pixels or a percent of `radius`. Default: 50%
63
+ spikes: 5, // number of spikes. Default: 5
64
+ gap: 6, // gap between stars, in pixels. Default: 6
65
+ checkered: false, // place every second star. Default: false
66
+ centered: true // center stars in their grid cell. Default: true
67
+ }));
68
+
69
+ columnSeries.columns.template.set("fillPattern", am5.TrianglePattern.new(root, {
70
+ color: am5.color(0xffffff),
71
+ maxWidth: 8, // width of the triangle, in pixels. Default: 8
72
+ maxHeight: 8, // height of the triangle, in pixels. Default: 8
73
+ gap: 6, // gap between triangles, in pixels. Default: 6
74
+ checkered: false,
75
+ centered: true
76
+ }));
77
+ ```
78
+
79
+ ### `rotateShapes` (5.20.0)
80
+
81
+ `RectanglePattern`, `StarPattern` and `TrianglePattern` accept a `rotateShapes` setting (default `false`).
82
+
83
+ When `false`, `rotation` rotates the whole pattern grid. That does not tile periodically on an axis-aligned tile, so you usually have to enlarge `width`/`height` and tweak `gap` to avoid seams — expensive on large tiles.
84
+
85
+ When `true`, `rotation` instead rotates **each shape around its own center** while the grid stays axis-aligned. This tiles seamlessly (a small `width`/`height` is enough) and is significantly faster.
86
+
87
+ ```javascript
88
+ columnSeries.columns.template.set("fillPattern", am5.RectanglePattern.new(root, {
89
+ color: am5.color(0xffffff),
90
+ rotation: 45,
91
+ rotateShapes: true // rotate each rectangle, not the whole grid
92
+ }));
93
+ ```
94
+
95
+ NOTE Star, triangle, rectangle and circle patterns normalize an oversized `width`/`height` down to a single repeat cell (2×2 cells when `checkered`), since the grid repeats every cell anyway. This optimization is skipped when a whole-pattern `rotation` is set — another reason to prefer `rotateShapes`.
96
+
97
+ NOTE As of 5.20.0, `PathPattern` repeats its `svgPath` as a grid itself instead of drawing once and letting the rendering engine repeat it.
98
+
48
99
  ## Setting pattern
49
100
 
50
101
  To set a pattern fill on an element, we need to assign it to element's `fillPattern` setting.
@@ -243,6 +294,8 @@ For more configuration options, visit following class references:
243
294
  - [`RectanglePattern` settings](https://www.amcharts.com/docs/v5/reference/linepattern/#Settings)
244
295
  - [`CirclePattern` settings](https://www.amcharts.com/docs/v5/reference/linepattern/#Settings)
245
296
  - [`PathPattern` settings](https://www.amcharts.com/docs/v5/reference/pathpattern/#Settings)
297
+ - [`StarPattern` settings](https://www.amcharts.com/docs/v5/reference/starpattern/#Settings)
298
+ - [`TrianglePattern` settings](https://www.amcharts.com/docs/v5/reference/trianglepattern/#Settings)
246
299
 
247
300
  ## Examples
248
301
 
@@ -2,6 +2,8 @@
2
2
  title: "Events"
3
3
  source: "https://www.amcharts.com/docs/v5/concepts/events/"
4
4
  scraped: "2026-03-15"
5
+ updated: "2026-08-05"
6
+ updatedFor: "@amcharts/amcharts5@5.20.1"
5
7
  ---
6
8
 
7
9
  ## User interactions
@@ -82,6 +84,22 @@ For example, a Scrollbar might invoke a `rangechanged` event when its selection
82
84
 
83
85
  For a complete list of element's events, see "Events" section in its class reference. Here's a [link](https://www.amcharts.com/docs/v5/reference/scrollbar/#Events) to `Scrollbar` events as an example.
84
86
 
87
+ ## Global pointer events
88
+
89
+ Regular pointer events like `pointerdown` fire only when the pointer is over the element itself. The "global" variants fire on **every** element for a pointer action anywhere on the chart surface, which is what you need for drag-style interactions that must keep tracking once the pointer leaves the element.
90
+
91
+ Available on all elements:
92
+
93
+ - `globalpointermove`
94
+ - `globalpointerup`
95
+ - `globalpointerdown` — added in 5.20.0
96
+
97
+ ```javascript
98
+ series.columns.template.events.on("globalpointerdown", function(ev) {
99
+ // fires on a press anywhere on the chart surface
100
+ });
101
+ ```
102
+
85
103
  ## Debounced events
86
104
 
87
105
  Starting with version `5.14`, we can create debounced events, i.e. ensuring that event handler will be invoked only once during specific timeframe.
@@ -148,6 +166,20 @@ xAxis.onPrivate("selectionMax", function(value, target) {
148
166
  console.log("End date changed:", end);
149
167
  });
150
168
 
169
+ ### One-shot handlers (5.20.4)
170
+
171
+ `once(key, callback)` works like `on()` but fires only the first time that setting changes (or is set), then removes itself. `onceDebounced(key, callback, delay)` is the debounced version. Both return an `IDisposer`.
172
+
173
+ series.once("visible", function(visible, target) {
174
+ console.log("First visibility change", visible);
175
+ });
176
+
177
+ xAxis.onceDebounced("start", function(start) {
178
+ console.log("Zoom settled at", start);
179
+ }, 300);
180
+
181
+ (Do not confuse with `events.once("eventName", …)`, which has existed for regular events all along.)
182
+
151
183
  ### Removing
152
184
 
153
185
  Turning off value change events are similar to regular events: we can just use `off()` or `offPrivate()` methods.
@@ -92,6 +92,16 @@ Include adapters in the output.
92
92
 
93
93
  Export functions as references or stringify them.
94
94
 
95
+ `includeRoot`
96
+
97
+ `boolean`
98
+
99
+ `false`
100
+
101
+ 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)*
102
+
103
+ **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.
104
+
95
105
  The below instructs serializer to include both states and adapters in the output:
96
106
 
97
107
  const serializer = am5plugins\_json.ChartSerializer.new(root, {
@@ -137,13 +147,17 @@ pieSeries.children.push(am5.Label.new(root, {
137
147
  - Venn
138
148
  - WordCloud
139
149
  - MapChart
150
+ - Gantt *(5.20.3)*
140
151
 
141
152
  ## Limitations
142
153
 
143
154
  ### Limited functionality
144
155
 
145
- - 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)
156
+ - 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.
146
157
  - Bullets or adapters that rely on global variables. Parser runs in a different scope, thus global variables might not be available.
158
+ - **Adapters do not round-trip.** With `includeAdapters: true` 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`).
159
+ - **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.
160
+ - A bullet heat rule's throwaway sprite (created while the serializer introspects the bullet factory) has no `dataItem`; as of 5.20.5 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.
147
161
 
148
162
  ### Unsupported features
149
163
 
@@ -153,8 +167,9 @@ pieSeries.children.push(am5.Label.new(root, {
153
167
  - Templates: `setup` function
154
168
  - Custom draw functions
155
169
  - Events
170
+ - `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.
171
+ - Venn: `hoverGraphics` and slice-template `states` are not serialized — re-apply a custom hover in code after parsing.
156
172
 
157
173
  ### Unsupported chart types
158
174
 
159
- - Gantt
160
175
  - StockChart
@@ -659,6 +659,8 @@ Since adapters are functions, they can't technically be part of a serialized JSO
659
659
  }\]
660
660
  }
661
661
 
662
+ **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`.
663
+
662
664
  ## Parsing
663
665
 
664
666
  To parse serialized configs, we'll need:
@@ -679,6 +681,18 @@ parser.parse({
679
681
  // ...
680
682
  });
681
683
 
684
+ ### Parse options (`IParseSettings`)
685
+
686
+ The second argument of `parse()` is an options object — these are **not** settings of the parser itself:
687
+
688
+ - `parent` — a `Container` to place the parsed chart into.
689
+ - `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.
690
+
691
+ var parser = am5plugins\_json.JsonParser.new(root);
692
+ parser.parse(config, { parent: root.container, updateTargets: "soft" });
693
+
694
+ 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`).
695
+
682
696
  ### Post-parse handler
683
697
 
684
698
  The `parse()` method is asynchronous and returns a `Promise`.
@@ -2,6 +2,8 @@
2
2
  title: "Themes"
3
3
  source: "https://www.amcharts.com/docs/v5/concepts/themes/"
4
4
  scraped: "2026-03-15"
5
+ updated: "2026-08-05"
6
+ updatedFor: "@amcharts/amcharts5@5.20.1"
5
7
  ---
6
8
 
7
9
  Themes can be used to apply a collection of settings to chart's elements easily, with a a single line of code.
@@ -62,6 +64,95 @@ A theme that can be used to enable responsive features of the chart - adapting s
62
64
 
63
65
  A theme that adds alternative default colors.
64
66
 
67
+ ## Themes added in 5.20.0
68
+
69
+ The list above is the pre-5.20 set. Version 5.20.0 added a large batch of palette themes, dark variants, and two parameterized themes. All live in `/themes` and load exactly like the others.
70
+
71
+ ### New palette themes
72
+
73
+ Theme name
74
+
75
+ Comment
76
+
77
+ `Colorblind`
78
+
79
+ A color-blindness-safe palette based on the Okabe-Ito color set.
80
+
81
+ `Ember`
82
+
83
+ A warm, fire-oriented palette.
84
+
85
+ `Midnight`
86
+
87
+ A dark theme.
88
+
89
+ `Nord`
90
+
91
+ A palette based on the Nord color scheme.
92
+
93
+ `Pastel`
94
+
95
+ A soft, low-saturation palette.
96
+
97
+ `Patterns`
98
+
99
+ Uses pattern fills instead of flat colors — useful for print, monochrome output, and accessibility.
100
+
101
+ `Petroleum`
102
+
103
+ A deep blue-green palette.
104
+
105
+ `Savanna`
106
+
107
+ A warm, earthy palette.
108
+
109
+ ### New dark variants
110
+
111
+ Dark counterparts were added for most palette themes: `ColorblindDark`, `DatavizDark`, `FrozenDark`, `KellyDark`, `MaterialDark`, `MoonriseDark`, `NordDark`, `PastelDark`, `PatternsDark`, `SpiritedDark`.
112
+
113
+ Each already carries dark background and interface colors, so you should NOT additionally apply the `Dark` theme when using one.
114
+
115
+ ### Parameterized themes: `Monochrome` and `Adaptive`
116
+
117
+ These two themes generate their palette from colors you supply, using OKLCH so the result stays perceptually balanced (even lightness/chroma, evenly spread hues). Because a theme cannot take constructor parameters, they ship as **factory functions** — call them with `(root, settings)`. A `.new(root, settings)` alias also works.
118
+
119
+ Both are additive: they do not modify any built-in theme.
120
+
121
+ `Monochrome` — a single-hue lightness ramp:
122
+
123
+ ```javascript
124
+ import am5themes_Monochrome from "@amcharts/amcharts5/themes/Monochrome";
125
+
126
+ root.setThemes([
127
+ am5themes_Animated.new(root),
128
+ am5themes_Monochrome(root, {
129
+ color: 0x2c6e91, // base color of the ramp; hex number, CSS string, or Color. Default: #2e7c9e (blue)
130
+ accent: 0xff7f0e, // optional: applied to the FIRST series only, so one series stands out
131
+ count: 7, // number of steps in the ramp. Default: 7
132
+ dark: false // true = dark background + interface colors, ramp runs light-to-mid. Default: false
133
+ })
134
+ ]);
135
+ ```
136
+
137
+ `Adaptive` — a full palette generated from one or two base colors:
138
+
139
+ ```javascript
140
+ import am5themes_Adaptive from "@amcharts/amcharts5/themes/Adaptive";
141
+
142
+ root.setThemes([
143
+ am5themes_Animated.new(root),
144
+ am5themes_Adaptive(root, {
145
+ baseColor: 0x2c6e91, // primary base color. The FIRST generated color is this color,
146
+ // so a brand color always appears in the chart.
147
+ // Default: green-to-yellow (#4b8e39 first, #ffdd00 last)
148
+ baseColor2: 0xffdd00, // optional: palette spans the two colors, interpolated in OKLCH,
149
+ // instead of fanning out from a single hue
150
+ count: 10, // number of series colors to generate. Default: 10
151
+ dark: false // true = faintly base-tinted dark background + matching interface colors
152
+ })
153
+ ]);
154
+ ```
155
+
65
156
  ## Applying
66
157
 
67
158
  Each chart can have multiple themes applied to it.
@@ -337,3 +337,4 @@ Extended by: IColumnSeriesDataItem, IRadarColumnSeriesDataItem, ICurveColumnSeri
337
337
  - **graphics** (`Graphics`) — An actual Graphics element (Column/Slice/Candlestick/OHLC).
338
338
  - **legendDataItem** (`DataItem`) — If data items from this series are used to feed a Legend, this will hold a reference to the equivalent Legend data item. Click here for more info
339
339
  - **rangeGraphics** (`Array`) — In case axis ranges are added to the series, it creates a separate element (Graphics) for each axis range. This array holds them all.
340
+ - **fill** (`Color`) — Color of the column, when the series colors each data item separately (colorByDataItem). @since 5.20.4
@@ -86,3 +86,5 @@ Extended by: IColumnSeriesSettings, IRadarColumnSeriesSettings, ICurveColumnSeri
86
86
  - **adjustBulletPosition** (`undefined | false | true`) — Default true Whether positions of bullets should be calculated based on portion of column currently visual (true) or the whole length/height of the column (false).
87
87
  - **clustered** (`undefined | false | true`) — Default true Indicates if series must divvy up available space with other column series (true; default) or take up the whole available space (false). Click here for more info
88
88
  - **useLastColorForLegendMarker** (`undefined | false | true`) — If set to true will use color of the last visible column for legend marker. Otherwise, series fill/stroke will be used. @since 5.1.13
89
+ - **colorByDataItem** (`undefined | false | true`) — Default false If set to true, each column gets its own color from `colors`, instead of the whole series sharing one color. @since 5.20.4
90
+ - **colors** (`ColorSet`) — A ColorSet to take colors from when colorByDataItem is set. The series makes its own if none is given, rather than taking the chart's: the chart's palette is stepped once per series, and one palette per series also means editing one does not change the others. @since 5.20.4
@@ -175,3 +175,4 @@ Extends: ISerializerSettings
175
175
 
176
176
  - **includeProjection** (`undefined | false | true`) — Default false Include projection settings in the output. If enabled, the projection function will be included in the output, according to the functionsAs setting.
177
177
  - **removeEmptyObjects** (`undefined | false | true`) — Default true Remove empty objects from the output.
178
+ - **includeRoot** (`undefined | false | true`) — Default false If set to true, adds a top-level `root` section with the Root object's settings and properties (interfaceColors, formatters, utc, fps, tabindex) to the serialized output. JsonParser applies a `root` section before parsing the chart. @since 5.20.2
@@ -75,3 +75,5 @@ Extends: ISerialChartSettings
75
75
  - **zoomControl** (`ZoomControl`) — A ZoomControl instance. Click here for more info
76
76
  - **zoomLevel** (`undefined | number`) — Current zoom level.
77
77
 
78
+ - **boxZoom** (`"none" | "drag" | "shift" | "ctrl" | "alt"`) — Default "none" Allows zooming the map to an area drawn with a pointer. The value is the key that must be held while dragging; "drag" means no key is needed — since a plain drag pans the map, use "drag" with panX/panY set to "none". The drawn area is represented by the boxZoomSelection element. NOT a boolean. @since 5.20.2
79
+ - **doubleClickZoom** (`undefined | false | true`) — Default true Setting true will make map zoom in on a double click (or double tap), and zoom out on a shift + double click. On maps panned by rotating (panX: "rotateX" and/or panY: "rotateY") the clicked location is rotated to the center of the map; otherwise it stays under the pointer. @since 5.20.2
@@ -20,3 +20,4 @@ Extended by: IGraticuleSeriesDataItem
20
20
  - **lineType** (`"curved" | "straight"`) — Default "curved" A line type. "curved" (default) - connects points using shortest distance, which will result in curved lines based on map projection. "straight" - connects points using visually straight lines, and will not cross the -180/180 longitude. @since 5.2.32
21
21
  - **mapLine** (`MapLine`) — Related MapLine object.
22
22
  - **pointsToConnect** (`Array`) — An array of data items from MapPointSeries to use as line end-points. Note, fixed points can not be used here.
23
+ - **pointIds** (`Array<string>`) — Ids of the points (data items of the series set in pointSeries, matched by their id) a line connects, e.g. `{ pointIds: ["JFK", "LAX"] }`. The line waits for every id to match a point before it is drawn, so it is never drawn short. Fixed points cannot be used, same as with pointsToConnect. Ignored if pointsToConnect is set on the same data item. @since 5.20.3
@@ -88,3 +88,5 @@ Extended by: IGraticuleSeriesSettings
88
88
 
89
89
  - **clipBack** (`undefined | false | true`) — If set to true will hide line segments that are in the invisible range of the map. For example on the side of the globe facing away from the viewer when used with Orthographic projection. NOTE: not all projections have invisible side.
90
90
  - **lineType** (`"curved" | "straight"`) — Default "curved" A line type. "curved" (default) - connects points using shortest distance, which will result in curved lines based on map projection. "straight" - connects points using visually straight lines, and will not cross the -180/180 longitude. @since 5.2.24
91
+ - **pointIdsField** (`undefined | string`) — Default "pointIds" A field in data that holds ids of the points a line connects. @since 5.20.3
92
+ - **pointSeries** (`MapPointSeries`) — A MapPointSeries the pointIds of a data item are looked up in. @since 5.20.3
@@ -2,11 +2,17 @@
2
2
  title: "IParseSettings"
3
3
  type: "interface"
4
4
  source: "https://www.amcharts.com/docs/v5/reference/iparsesettings/"
5
- scraped: "2026-03-15"
5
+ scraped: "2026-09-14"
6
6
  ---
7
7
 
8
- Inheritance
8
+ Options object passed as the **second argument** of `JsonParser.parse(config, options)`. These are not settings of the parser object itself.
9
9
 
10
- ## Properties
10
+ ```javascript
11
+ const parser = am5plugins_json.JsonParser.new(root);
12
+ const chart = await parser.parse(config, { parent: root.container, updateTargets: "soft" });
13
+ ```
11
14
 
15
+ ## Properties
12
16
 
17
+ - **parent** (`Container`) — Parent container to place the parsed chart into.
18
+ - **updateTargets** (`"strict" | "soft"`) — Default "strict" If set to "strict" and source object has `type` set, a new object of that type will be created and used in place of existing one. In case of "soft", parser will check if source and target objects are of the same type and overwrite only if types differ. Otherwise only settings will be applied, just like if the `type` was not specified at all. @since 5.20.3