@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.
- package/content/SKILL.md +166 -8
- package/content/flow.md +4 -0
- package/content/hierarchy.md +21 -0
- package/content/map.md +75 -9
- package/content/pie.md +16 -0
- package/content/radar.md +1 -1
- package/content/stock.md +41 -1
- package/content/timeline.md +3 -3
- package/content/venn.md +4 -0
- package/content/wordcloud.md +92 -4
- package/content/xy.md +67 -1
- package/extended/charts/word-cloud.md +19 -3
- package/extended/concepts/colors-gradients-and-patterns/patterns.md +53 -0
- package/extended/concepts/events.md +32 -0
- package/extended/concepts/serializing/chart-serializer.md +17 -2
- package/extended/concepts/serializing.md +14 -0
- package/extended/concepts/themes.md +91 -0
- package/extended/reference/ibasecolumnseriesdataitem.md +1 -0
- package/extended/reference/ibasecolumnseriessettings.md +2 -0
- package/extended/reference/ichartserializersettings.md +1 -0
- package/extended/reference/imapchartsettings.md +2 -0
- package/extended/reference/imaplineseriesdataitem.md +1 -0
- package/extended/reference/imaplineseriessettings.md +2 -0
- package/extended/reference/iparsesettings.md +9 -3
- package/extended/reference/irectanglepatternsettings.md +1 -0
- package/extended/reference/irootsettings.md +4 -0
- package/extended/reference/iscrollbarsettings.md +1 -0
- package/extended/reference/iserialchartcontainersettings.md +16 -0
- package/extended/reference/iseriessettings.md +2 -0
- package/extended/reference/istarpatternsettings.md +38 -0
- package/extended/reference/itrianglepatternsettings.md +37 -0
- package/extended/reference/iwordcloudsettings.md +24 -8
- package/extended/reference/ixychartsettings.md +2 -0
- package/extended/reference/ixycursorsettings.md +1 -0
- package/extended/reference/mapchart.md +4 -0
- package/extended/reference/serialchart.md +1 -1
- package/extended/reference/serialchartcontainer.md +34 -0
- package/extended/reference/starpattern.md +51 -0
- package/extended/reference/trianglepattern.md +49 -0
- package/package.json +2 -1
- package/src/content-fs.js +10 -0
- package/src/tools.js +73 -21
package/content/wordcloud.md
CHANGED
|
@@ -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 | `
|
|
61
|
-
| `minFontSize` | number \| Percent | `
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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-
|
|
5
|
+
scraped: "2026-09-14"
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
-
|
|
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
|
-
|
|
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
|