@amcharts/amcharts5-mcp 1.5.0 → 1.6.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 +59 -11
- package/content/flow.md +3 -0
- package/content/map.md +35 -1
- package/content/pie.md +6 -0
- package/content/venn.md +3 -1
- package/content/xy.md +15 -1
- package/extended/charts/map-chart/map-line-series.md +110 -1
- package/extended/charts/map-chart/map-point-series.md +110 -1
- package/extended/charts/map-chart/map-polygon-series.md +47 -0
- package/extended/charts/xy-chart/axes/category-axis.md +2 -0
- package/extended/concepts/animations.md +136 -2
- package/extended/concepts/data.md +2 -0
- package/extended/concepts/serializing/chart-serializer.md +50 -25
- package/extended/concepts/serializing.md +3 -0
- package/extended/concepts/settings/template-fields.md +24 -0
- package/extended/examples/candlestick-ohlc/box-plot-chart.md +78 -73
- package/extended/examples/candlestick-ohlc/candlestick-chart.md +2 -5
- package/extended/examples/candlestick-ohlc/ohlc-chart.md +3 -6
- package/extended/examples/candlestick-ohlc/on-demand-data-loading.md +7 -7
- package/extended/examples/candlestick-ohlc/professional-candlesticks.md +3 -6
- package/extended/examples/candlestick-ohlc/stock-chart-candlesticks.md +1 -1
- package/extended/examples/column-bar/100-stacked-column-chart.md +3 -3
- package/extended/examples/column-bar/bar-and-line-chart-mix.md +3 -12
- package/extended/examples/column-bar/bar-chart-race.md +4 -11
- package/extended/examples/column-bar/bars-with-moving-bullets.md +1 -1
- package/extended/examples/column-bar/bullet-chart.md +1 -1
- package/extended/examples/column-bar/carbon-zero-progress.md +2 -3
- package/extended/examples/column-bar/clustered-bar-chart.md +3 -13
- package/extended/examples/column-bar/clustered-column-chart.md +2 -2
- package/extended/examples/column-bar/column-and-line-mix.md +1 -1
- package/extended/examples/column-bar/column-chart-images-top.md +4 -10
- package/extended/examples/column-bar/column-with-rotated-series.md +4 -11
- package/extended/examples/column-bar/columns-with-grainy-gradients.md +4 -5
- package/extended/examples/column-bar/columns-with-moving-bullets.md +1 -1
- package/extended/examples/column-bar/curved-columns.md +4 -10
- package/extended/examples/column-bar/divergent-stacked-bars.md +1 -10
- package/extended/examples/column-bar/drag-and-change-column-value.md +4 -11
- package/extended/examples/column-bar/drag-ordering-of-bars.md +1 -1
- package/extended/examples/column-bar/dumbbell-plot.md +1 -1
- package/extended/examples/column-bar/floating-bar-chart.md +2 -3
- package/extended/examples/column-bar/grouped-and-sorted-columns.md +4 -10
- package/extended/examples/column-bar/grouped-stacks.md +1 -1
- package/extended/examples/column-bar/heat-map-with-legend.md +8 -8
- package/extended/examples/column-bar/horizontal-dumbbell-plot.md +1 -1
- package/extended/examples/column-bar/images-as-categories.md +16 -18
- package/extended/examples/column-bar/layered-column-chart.md +1 -1
- package/extended/examples/column-bar/lollipop-chart.md +1 -1
- package/extended/examples/column-bar/pareto-diagram.md +4 -7
- package/extended/examples/column-bar/partitioned-bar-chart.md +1 -1
- package/extended/examples/column-bar/pictorial-column-chart.md +1 -1
- package/extended/examples/column-bar/real-time-data-sorting.md +4 -11
- package/extended/examples/column-bar/risk-heatmap.md +9 -9
- package/extended/examples/column-bar/simple-column-chart.md +3 -3
- package/extended/examples/column-bar/sorted-bar-chart.md +4 -12
- package/extended/examples/column-bar/stacked-bar-chart-with-negative-values.md +1 -1
- package/extended/examples/column-bar/stacked-bar-chart.md +1 -1
- package/extended/examples/column-bar/stacked-clustered-column-chart.md +1 -1
- package/extended/examples/column-bar/stacked-column-chart.md +1 -1
- package/extended/examples/column-bar/stacked-waterfall-chart.md +1 -1
- package/extended/examples/column-bar/step-count-chart.md +1 -1
- package/extended/examples/column-bar/variance-indicators.md +1 -1
- package/extended/examples/column-bar/waffle-chart.md +1 -1
- package/extended/examples/column-bar/waterfall-chart.md +1 -1
- package/extended/examples/dashboards/maps-and-charts-dashboard.md +1 -1
- package/extended/examples/dashboards/road-trip-dashboard-with-map.md +24 -23
- package/extended/examples/flow/animated-sankey-diagram.md +200 -202
- package/extended/examples/flow/chord-diagram-with-animated-bullets.md +4 -2
- package/extended/examples/flow/chord-diagram.md +6 -4
- package/extended/examples/flow/horizontal-arc-diagram.md +4 -2
- package/extended/examples/flow/non-ribbon-chord-diagram.md +6 -4
- package/extended/examples/flow/sankey-diagram.md +4 -2
- package/extended/examples/flow/toggleable-chord-diagram.md +4 -2
- package/extended/examples/flow/traceable-sankey-diagram.md +4 -2
- package/extended/examples/flow/vertical-arc-diagram.md +4 -2
- package/extended/examples/flow/vertical-sankey-diagram.md +11 -19
- package/extended/examples/funnel-pyramid/funnel-chart-with-rounded-corners.md +1 -1
- package/extended/examples/funnel-pyramid/funnel-chart.md +1 -1
- package/extended/examples/funnel-pyramid/funnel-with-gradient-fill.md +1 -1
- package/extended/examples/funnel-pyramid/horizontal-funnel.md +1 -1
- package/extended/examples/funnel-pyramid/horizontal-pictorial-chart.md +1 -1
- package/extended/examples/funnel-pyramid/pictorial-chart.md +1 -1
- package/extended/examples/funnel-pyramid/pictorial-fraction-chart.md +1 -1
- package/extended/examples/funnel-pyramid/pictorial-stacked-chart.md +1 -1
- package/extended/examples/funnel-pyramid/pyramid-chart.md +1 -1
- package/extended/examples/gantt/editable-multilevel-gantt-chart.md +1 -1
- package/extended/examples/gantt/gantt-chart-dates.md +1 -1
- package/extended/examples/gantt/gantt-chart-in-read-only-mode.md +1 -1
- package/extended/examples/gantt/gantt-chart-playground.md +4 -3
- package/extended/examples/gantt/gantt-chart.md +1 -1
- package/extended/examples/gantt/gantt-with-hundreds-of-items.md +1 -1
- package/extended/examples/gauges/angular-gauge-with-two-axes.md +1 -1
- package/extended/examples/gauges/angular-gauge.md +1 -1
- package/extended/examples/gauges/animated-gauge.md +1 -1
- package/extended/examples/gauges/clock-with-two-faces.md +1 -1
- package/extended/examples/gauges/clock.md +1 -1
- package/extended/examples/gauges/compass-chart.md +1 -1
- package/extended/examples/gauges/gauge-with-bands.md +1 -1
- package/extended/examples/gauges/gauge-with-gradient-fill.md +1 -1
- package/extended/examples/gauges/multi-part-gauge.md +1 -1
- package/extended/examples/gauges/solid-gauge.md +1 -1
- package/extended/examples/gauges/yes-and-no-gauge.md +1 -1
- package/extended/examples/hierarchy/collapsible-force-directed-tree.md +3 -3
- package/extended/examples/hierarchy/drill-down-sunburst-chart.md +4 -4
- package/extended/examples/hierarchy/drill-down-treemap.md +5 -5
- package/extended/examples/hierarchy/dynamic-data-updates-on-treemap.md +4 -4
- package/extended/examples/hierarchy/force-directed-adding-links.md +4 -4
- package/extended/examples/hierarchy/force-directed-network.md +4 -4
- package/extended/examples/hierarchy/force-directed-tree-with-animated-bullets.md +11 -10
- package/extended/examples/hierarchy/force-directed-tree.md +3 -3
- package/extended/examples/hierarchy/horizontal-partition-chart.md +3 -3
- package/extended/examples/hierarchy/multilevel-tree-map.md +11 -10
- package/extended/examples/hierarchy/packed-circle-chart.md +3 -3
- package/extended/examples/hierarchy/rectangular-voronoi-tree-map.md +4 -2
- package/extended/examples/hierarchy/simple-treemap.md +4 -4
- package/extended/examples/hierarchy/single-level-packed-circles.md +11 -10
- package/extended/examples/hierarchy/sunburst-chart.md +3 -3
- package/extended/examples/hierarchy/sunburst-flavor-wheel.md +18 -21
- package/extended/examples/hierarchy/tree-chart.md +11 -10
- package/extended/examples/hierarchy/vertical-partition-chart.md +3 -3
- package/extended/examples/hierarchy/voronoi-treemap.md +11 -10
- package/extended/examples/hierarchy/zoomable-force-directed-tree.md +11 -10
- package/extended/examples/line-area/100-stacked-area-chart.md +3 -4
- package/extended/examples/line-area/animated-bullet-at-the-end-of-the-series.md +1 -1
- package/extended/examples/line-area/area-with-time-based-data.md +2 -3
- package/extended/examples/line-area/chart-with-gaps-in-data.md +2 -3
- package/extended/examples/line-area/comparing-different-date-values-google-analytics-style.md +2 -3
- package/extended/examples/line-area/control-chart.md +1 -1
- package/extended/examples/line-area/data-grouping-50k-points.md +1 -2
- package/extended/examples/line-area/date-axis-with-labels-near-minor-grid-lines.md +1 -1
- package/extended/examples/line-area/date-based-data.md +1 -1
- package/extended/examples/line-area/date-based-line-chart.md +4 -4
- package/extended/examples/line-area/divergent-lines.md +2 -3
- package/extended/examples/line-area/draggable-range-with-close-button.md +1 -1
- package/extended/examples/line-area/drawing-chart-series-with-mouse-or-touch.md +1 -1
- package/extended/examples/line-area/duration-on-value-axis.md +8 -8
- package/extended/examples/line-area/error-chart.md +2 -3
- package/extended/examples/line-area/evenly-spaced-date-axis.md +1 -1
- package/extended/examples/line-area/highlighting-line-chart-series-on-legend-hover.md +1 -1
- package/extended/examples/line-area/line-chart-adding-data-every-second.md +1 -1
- package/extended/examples/line-area/line-chart-with-horizontal-target.md +1 -1
- package/extended/examples/line-area/line-chart-with-range-slider.md +1 -1
- package/extended/examples/line-area/line-chart-with-scroll-and-zoom.md +1 -1
- package/extended/examples/line-area/line-different-colors-ups-downs.md +1 -1
- package/extended/examples/line-area/line-graph.md +1 -1
- package/extended/examples/line-area/line-with-changing-color.md +1 -1
- package/extended/examples/line-area/line-with-custom-bullets.md +21 -18
- package/extended/examples/line-area/line-with-data-labels.md +1 -1
- package/extended/examples/line-area/live-data.md +1 -1
- package/extended/examples/line-area/live-order-book-depth-chart.md +9 -15
- package/extended/examples/line-area/logarithmic-scale.md +1 -1
- package/extended/examples/line-area/manipulate-chart-data-with-mouse.md +1 -1
- package/extended/examples/line-area/mixed-daily-and-intra-day-chart.md +1 -1
- package/extended/examples/line-area/multiple-date-axes.md +1 -1
- package/extended/examples/line-area/multiple-value-axes.md +1 -1
- package/extended/examples/line-area/no-gap-date-axis.md +1 -1
- package/extended/examples/line-area/process-control-chart.md +1 -1
- package/extended/examples/line-area/range-area-chart.md +1 -1
- package/extended/examples/line-area/range-chart-with-different-fill-colors.md +2 -2
- package/extended/examples/line-area/reversed-value-axis.md +2 -3
- package/extended/examples/line-area/selecting-and-marking-multiple-ranges.md +1 -2
- package/extended/examples/line-area/show-percentage-change.md +1 -1
- package/extended/examples/line-area/smoothed-line-chart.md +1 -1
- package/extended/examples/line-area/smoothed-stacked-area.md +2 -3
- package/extended/examples/line-area/spline-graph.md +1 -1
- package/extended/examples/line-area/stacked-area.md +2 -3
- package/extended/examples/line-area/step-line-chart.md +1 -1
- package/extended/examples/line-area/step-line-without-risers.md +1 -1
- package/extended/examples/line-area/stream-chart.md +2 -3
- package/extended/examples/line-area/trend-lines.md +1 -1
- package/extended/examples/line-area/vertical-line-chart.md +1 -1
- package/extended/examples/line-area/zoomable-value-axis.md +6 -6
- package/extended/examples/maps/animations-along-lines.md +34 -28
- package/extended/examples/maps/approximate-working-hours-map.md +9 -1
- package/extended/examples/maps/capitals-map.md +363 -911
- package/extended/examples/maps/changing-map-projection.md +7 -6
- package/extended/examples/maps/day-and-night-world-map.md +172 -532
- package/extended/examples/maps/drill-down-congressional-map.md +2 -2
- package/extended/examples/maps/drill-down-map.md +4 -4
- package/extended/examples/maps/drill-down-to-countries.md +6 -6
- package/extended/examples/maps/flight-routes-map.md +9 -1
- package/extended/examples/maps/grouped-countries-map.md +2 -3
- package/extended/examples/maps/location-sensitive-map.md +2 -1
- package/extended/examples/maps/map-bubbles.md +11 -3
- package/extended/examples/maps/map-dynamic-pie-charts.md +1 -1
- package/extended/examples/maps/map-image-drill-down.md +14 -15
- package/extended/examples/maps/map-sankey-series.md +22 -0
- package/extended/examples/maps/map-timeline.md +1 -1
- package/extended/examples/maps/map-using-d3-projections.md +1 -1
- package/extended/examples/maps/map-with-animated-bubbles.md +4 -2
- package/extended/examples/maps/map-with-animated-lines.md +38 -26
- package/extended/examples/maps/map-with-curved-lines.md +35 -25
- package/extended/examples/maps/map-with-patterns.md +9 -4
- package/extended/examples/maps/map-with-pulsating-bullets.md +9 -13
- package/extended/examples/maps/map-with-sized-pin-bullets.md +1 -1
- package/extended/examples/maps/multi-series-map.md +5 -4
- package/extended/examples/maps/pacific-centered-map.md +2 -1
- package/extended/examples/maps/rotate-globe-to-a-selected-country.md +200 -29
- package/extended/examples/maps/rotating-globe-with-circles.md +19 -2
- package/extended/examples/maps/rotating-globe.md +77 -20
- package/extended/examples/maps/selecting-multiple-areas-map.md +1 -1
- package/extended/examples/maps/solar-eclipse-map.md +12 -7
- package/extended/examples/maps/trumps-reciprocal-tariffs-map.md +1 -1
- package/extended/examples/maps/us-congressional-districts.md +19 -10
- package/extended/examples/maps/us-heat-map.md +1 -1
- package/extended/examples/maps/weather-map.md +1 -1
- package/extended/examples/maps/world-map-with-clustered-points.md +2 -1
- package/extended/examples/maps/world-time-zone-map.md +2 -1
- package/extended/examples/maps/zooming-to-countries-map.md +91 -15
- package/extended/examples/miscellaneous/annotating-charts.md +3 -3
- package/extended/examples/miscellaneous/changing-data-word-cloud.md +4 -2
- package/extended/examples/miscellaneous/combined-bullet-column-line-chart.md +1 -1
- package/extended/examples/miscellaneous/complex-venn-diagram.md +9 -22
- package/extended/examples/miscellaneous/exporting-chart-to-image.md +1 -1
- package/extended/examples/miscellaneous/forest-plot.md +5 -5
- package/extended/examples/miscellaneous/historical-population-pyramid.md +2 -4
- package/extended/examples/miscellaneous/honeycomb-tile-map.md +1 -1
- package/extended/examples/miscellaneous/horizontally-stacked-axes.md +1 -1
- package/extended/examples/miscellaneous/hybrid-drill-down-pie-bar-chart.md +4 -4
- package/extended/examples/miscellaneous/infographic.md +1 -1
- package/extended/examples/miscellaneous/mekko.md +1 -1
- package/extended/examples/miscellaneous/micro-charts-sparklines.md +1 -1
- package/extended/examples/miscellaneous/pictogram.md +3 -5
- package/extended/examples/miscellaneous/population-pyramid.md +1 -1
- package/extended/examples/miscellaneous/progress-chart.md +2 -2
- package/extended/examples/miscellaneous/range-bullet-chart.md +1 -1
- package/extended/examples/miscellaneous/sentence-cloud.md +10 -19
- package/extended/examples/miscellaneous/spectrum-chart.md +4 -4
- package/extended/examples/miscellaneous/strip-plot.md +1 -1
- package/extended/examples/miscellaneous/tag-cloud.md +5 -4
- package/extended/examples/miscellaneous/tile-map.md +1 -1
- package/extended/examples/miscellaneous/venn-diagram-with-patterns.md +8 -8
- package/extended/examples/miscellaneous/venn-diagram.md +8 -8
- package/extended/examples/miscellaneous/vertically-stacked-axes-chart.md +1 -1
- package/extended/examples/miscellaneous/violin-chart.md +1 -1
- package/extended/examples/miscellaneous/word-cloud.md +11 -10
- package/extended/examples/pie-donut/animated-time-line-pie-chart.md +1 -1
- package/extended/examples/pie-donut/donut-chart.md +1 -1
- package/extended/examples/pie-donut/donut-with-radial-gradient.md +2 -2
- package/extended/examples/pie-donut/dragging-pie-slices.md +1 -1
- package/extended/examples/pie-donut/grained-gradient-pie.md +1 -1
- package/extended/examples/pie-donut/nested-donut-chart.md +4 -4
- package/extended/examples/pie-donut/pie-chart-broken-slices.md +1 -1
- package/extended/examples/pie-donut/pie-chart-with-legend.md +1 -1
- package/extended/examples/pie-donut/pie-chart.md +3 -3
- package/extended/examples/pie-donut/pie-of-a-pie.md +1 -1
- package/extended/examples/pie-donut/semi-circle-pie-chart.md +1 -1
- package/extended/examples/pie-donut/simple-pie-chart.md +4 -3
- package/extended/examples/pie-donut/two-level-pie-chart.md +1 -1
- package/extended/examples/pie-donut/two-pie-charts-with-single-legend.md +1 -1
- package/extended/examples/pie-donut/variable-radius-nested-donut-chart.md +2 -3
- package/extended/examples/pie-donut/variable-radius-nested-pie.md +1 -1
- package/extended/examples/pie-donut/variable-radius-pie-chart.md +1 -1
- package/extended/examples/radar-polar/flower-chart.md +1 -1
- package/extended/examples/radar-polar/live-sorting-of-radar-columns.md +4 -11
- package/extended/examples/radar-polar/polar-area-chart.md +1 -1
- package/extended/examples/radar-polar/polar-chart.md +1 -1
- package/extended/examples/radar-polar/polar-scatter.md +1 -1
- package/extended/examples/radar-polar/radar-chart-visualizing-yearly-activities.md +3 -4
- package/extended/examples/radar-polar/radar-chart.md +1 -1
- package/extended/examples/radar-polar/radar-heat-map.md +1 -1
- package/extended/examples/radar-polar/radar-timeline.md +1 -1
- package/extended/examples/radar-polar/radar-with-date-axis.md +1 -1
- package/extended/examples/radar-polar/radial-bar-chart.md +1 -1
- package/extended/examples/radar-polar/radial-histogram.md +4 -12
- package/extended/examples/radar-polar/radial-line-graph.md +1 -1
- package/extended/examples/radar-polar/stacked-area-radar.md +2 -3
- package/extended/examples/radar-polar/variable-radius-radar.md +1 -1
- package/extended/examples/radar-polar/wheel-of-life.md +1 -1
- package/extended/examples/radar-polar/zoomable-radar.md +1 -1
- package/extended/examples/stock/changing-data-granularity.md +1 -1
- package/extended/examples/stock/live-stock-data.md +1 -1
- package/extended/examples/stock/separate-volume-panel.md +1 -1
- package/extended/examples/stock/stock-chart-comparing-prices.md +1 -1
- package/extended/examples/stock/stock-chart-with-bollinger-bands-indicator.md +1 -1
- package/extended/examples/stock/stock-chart-with-relative-strength-index.md +1 -1
- package/extended/examples/stock/stock-chart-with-volume-profile.md +1 -1
- package/extended/examples/stock/stock-chart.md +1 -1
- package/extended/examples/stock/stock-data-grouping.md +1 -1
- package/extended/examples/stock/stock-intraday-data.md +1 -1
- package/extended/examples/timeline/horizontal-serpentine-timeline.md +4 -6
- package/extended/examples/timeline/infinity-timeline.md +3 -3
- package/extended/examples/timeline/linear-process-diagram.md +1 -1
- package/extended/examples/timeline/serpentine-timeline-chart.md +4 -6
- package/extended/examples/timeline/spiral-timeline.md +3 -6
- package/extended/examples/timeline/stadium-track-chart.md +1 -1
- package/extended/examples/xy-bubble/animated-xy-bubble-timeline-chart.md +1 -1
- package/extended/examples/xy-bubble/beeswarm.md +1 -1
- package/extended/examples/xy-bubble/bubble-based-heat-map.md +4 -4
- package/extended/examples/xy-bubble/bubble-chart-with-pie-bullets.md +1 -1
- package/extended/examples/xy-bubble/bubble-chart.md +1 -1
- package/extended/examples/xy-bubble/irregular-interval-xy.md +1 -1
- package/extended/examples/xy-bubble/motion-chart.md +2 -5
- package/extended/examples/xy-bubble/scatter-chart.md +1 -1
- package/extended/examples/xy-bubble/scatter-plot-with-tens-of-thousands-points.md +7 -5
- package/extended/examples/xy-bubble/xy-chart-date-based-axis.md +1 -1
- package/extended/examples/xy-bubble/xy-chart-fills-axis.md +1 -1
- package/extended/examples/xy-bubble/xy-chart-value-based-line-graphs.md +1 -1
- package/extended/examples/xy-bubble/xy-error-chart.md +2 -5
- package/extended/examples/xy-bubble/zoomable-bubble-chart.md +2 -5
- package/extended/reference/animationoptions.md +1 -0
- package/extended/reference/chartserializer.md +10 -1
- package/extended/reference/entity.md +5 -2
- package/extended/reference/ichartserializersettings.md +12 -16
- package/extended/reference/ideclaredanimation.md +57 -0
- package/extended/reference/ieasinginfo.md +29 -0
- package/extended/reference/ientitysettings.md +5 -2
- package/extended/reference/imappointseriesdataitem.md +4 -2
- package/extended/reference/imappointseriessettings.md +7 -3
- package/extended/reference/iserializersettings.md +2 -1
- package/extended/reference/iseriesdataitem.md +1 -0
- package/extended/reference/iseriessettings.md +2 -0
- package/extended/reference/mappointseries.md +7 -3
- package/extended/reference/serializer.md +2 -1
- package/extended/reference/series.md +2 -0
- package/package.json +5 -2
package/content/SKILL.md
CHANGED
|
@@ -349,7 +349,7 @@ Rules that make bullet heat rules work (each failure is **silent** — every bul
|
|
|
349
349
|
- `dataField` is the data item **property key** (`"valueY"`, `"valueX"`, `"value"`, …), **not** the raw column name. To size XY bullets by a column that is not already an axis value, register it as the base value field: `series.set("valueField", "population")` and use `dataField: "value"`.
|
|
350
350
|
- `calculateAggregates: true` is required (unless `minValue`/`maxValue` are given) — without it `valueLow`/`valueHigh` are never computed and every bullet gets the midpoint size.
|
|
351
351
|
- Setting `valueField` (or any `*Field`) **after** the series has processed data does not re-read the data — re-set it: `series.data.setAll(series.data.values.slice())`.
|
|
352
|
-
- `ChartSerializer` calls the bullet factory with a sample data item to introspect the sprite. That throwaway sprite joins the template but has no `dataItem`, and (as of 5.20.
|
|
352
|
+
- `ChartSerializer` calls the bullet factory with a sample data item to introspect the sprite. That throwaway sprite joins the template but has no `dataItem`, and (as of 5.20.8) the heat-rule loop then throws on `target.dataItem` — on a `LineSeries` the stroke silently disappears. If you serialize charts that have bullet heat rules, have the factory call `sprite._setDataItem(dataItem)` itself, or serialize before adding the rule.
|
|
353
353
|
|
|
354
354
|
**HeatLegend:**
|
|
355
355
|
|
|
@@ -377,6 +377,24 @@ series.appear(1000); // duration in ms
|
|
|
377
377
|
chart.appear(1000, 100); // duration, delay
|
|
378
378
|
```
|
|
379
379
|
|
|
380
|
+
**Declared animations — the `animations` setting (5.20.8; typings say `@since 5.21.0`).** Every element can carry its own animations as data, so they live in a JSON config and survive `ChartSerializer` — prefer this over `sprite.animate({ loops: Infinity })` for endless effects:
|
|
381
|
+
|
|
382
|
+
```js
|
|
383
|
+
series.bullets.push(function (root, series, dataItem) {
|
|
384
|
+
return am5.Bullet.new(root, {
|
|
385
|
+
sprite: am5.Circle.new(root, {
|
|
386
|
+
radius: 6,
|
|
387
|
+
animations: [ // loops: 0 = forever; yoyo goes back to `from`; easing is a NAME
|
|
388
|
+
{ key: "scale", from: 1, to: 1.6, duration: 800, loops: 0, yoyo: true, easing: "sine" },
|
|
389
|
+
{ key: "opacity", from: 1, to: 0.3, duration: 800, loops: 0, yoyo: true }
|
|
390
|
+
]
|
|
391
|
+
})
|
|
392
|
+
});
|
|
393
|
+
});
|
|
394
|
+
```
|
|
395
|
+
|
|
396
|
+
Entry (`IDeclaredAnimation`) fields: `key`, `to`, `duration` (required; with `yoyo` one way), `from` (default: current value), `delay` (`0`), `loops` (`1`; `0` = forever), `yoyo` (`false`), `easing` (`"linear"` — one of the 8 names under "Easing functions"; unknown names silently become linear), `ease` (`"in"` default, `"out"`, `"inOut"`), `target` (`"self"` default, or `"dataItem"` for a data-item value such as a map point's `positionOnLine`). They start when set, restart when changed, stop on dispose. **Give `from` explicitly** unless the setting has a theme default (`scale`/`opacity`/`rotation` do; `dx`, `fill`, a data item's `positionOnLine` may not) — with `from` omitted and an `undefined` current value it jumps straight to `to`, no animation. In JSON, colors/percents in `from`/`to` are `{ "type": "Color", "value": "#f00" }` / `{ "type": "Percent", "value": 50 }`.
|
|
397
|
+
|
|
380
398
|
## Events
|
|
381
399
|
|
|
382
400
|
```js
|
|
@@ -413,6 +431,8 @@ const disposer = sprite.events.on("click", handler);
|
|
|
413
431
|
disposer.dispose(); // removes the listener
|
|
414
432
|
```
|
|
415
433
|
|
|
434
|
+
**Opening a link on click needs no handler (5.20.7):** `series.set("urlField", "url")` makes each item's bullet, column, slice, Venn slice, map polygon or map line open the URL in its data row (`linkTarget`, default `"_self"`) — see "Recent API changes". Hierarchy nodes, flow nodes/links and word-cloud labels are not linked; keep a `click` handler there.
|
|
435
|
+
|
|
416
436
|
## Settings API
|
|
417
437
|
|
|
418
438
|
```js
|
|
@@ -434,7 +454,7 @@ const cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
|
|
|
434
454
|
|
|
435
455
|
## Settings that already equal the default — omit them
|
|
436
456
|
|
|
437
|
-
Generated code routinely spells out settings that equal the amCharts default (verified against the default themes of 5.20.
|
|
457
|
+
Generated code routinely spells out settings that equal the amCharts default (verified against the default themes of 5.20.8). They add noise and mislead readers into thinking they matter. Do not emit these unless changing them:
|
|
438
458
|
|
|
439
459
|
| Class | Setting(s) that are already the default |
|
|
440
460
|
|-------|------------------------------------------|
|
|
@@ -600,7 +620,7 @@ colors.set("colors", [
|
|
|
600
620
|
]);
|
|
601
621
|
```
|
|
602
622
|
|
|
603
|
-
**A `ColorSet` must always hold at least one color.** `colorSet.set("colors", [])` crashes the next `next()`/`getIndex()` call (`Cannot read properties of undefined (reading 'toHSL')` inside `generateColors`) as soon as a series iterates the palette — as of 5.20.
|
|
623
|
+
**A `ColorSet` must always hold at least one color.** `colorSet.set("colors", [])` crashes the next `next()`/`getIndex()` call (`Cannot read properties of undefined (reading 'toHSL')` inside `generateColors`) as soon as a series iterates the palette — as of 5.20.8 the empty list is not guarded. To "reset" a palette, swap in a fresh `am5.ColorSet.new(root, {})` instead of emptying the list. The theme's `baseColor` also resolves lazily, so a **synchronous** re-color right after swapping a `ColorSet` can read a transient value (sprites momentarily black); re-set the series data and let amCharts' own data pass recolor the sprites.
|
|
604
624
|
|
|
605
625
|
## Data processor
|
|
606
626
|
|
|
@@ -621,10 +641,11 @@ series.data.processor = am5.DataProcessor.new(root, {
|
|
|
621
641
|
`am5plugins_json.ChartSerializer` turns a live chart into a JSON config and `am5plugins_json.JsonParser` rebuilds it (`await parser.parse(config, { parent: root.container })`). Rules that keep round-trips working:
|
|
622
642
|
|
|
623
643
|
- **Serialize the chart's top-level container child, never a bare series.** `serializer.serializeAll(root.container.children.getIndex(0))`. Serializing an unwrapped series whose settings point back at itself (`selectedDataItem` holds a `DataItem` whose `component` is the series) produces a cycle: `_pruneEmptyObjects` overflows the stack (`removeEmptyObjects: true`, the default) or `JSON.stringify` throws "Converting circular structure". With the container as root the series becomes a `#series-0` reference and the cycle disappears.
|
|
624
|
-
- **Adapters do not round-trip.** `includeAdapters
|
|
644
|
+
- **Adapters do not round-trip.** `includeAdapters` (default `true`) writes each adapter as `{ key, callback: "function (…) {…}" }`; the parser does not turn that string back into a function (and the closure's `chart`/`series`/`root` would not exist anyway). 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. Either way the effect is lost — replace palette-coloring adapters with declarative equivalents: `colorByDataItem: true` on column series (5.20.4), a per-item `fill` data field + `templateField`, or `heatRules`.
|
|
625
645
|
- **Only user-set settings are serialized (5.20.3)** — theme and library defaults are left out, so a serialized config is much smaller than before and a value you never set will not appear in it. Add `includeRoot: true` (5.20.2) to also write a top-level `root` section (Root settings/properties, `interfaceColors`, formatters).
|
|
626
646
|
- **Re-parsing into an existing chart:** `parser.parse(config, { updateTargets: "soft" })` (5.20.3) applies settings onto an existing object of the same `type` instead of replacing it. The default `"strict"` replaces.
|
|
627
|
-
- **
|
|
647
|
+
- **Also saved (5.20.6 – 5.20.8):** `themeTags` you pass to `.new()` (5.20.6 — e.g. a `Button` with `themeTags: ["switch"]` keeps its look; tags the library adds are left out); a legend inside an `axisHeader` (5.20.7); declared `animations` (5.20.8, see "Animations"); and animations started in code that **loop forever** (`loops: Infinity`) with a nameable `am5.ease` easing — written as `animations` entries. `runningAnimations` (5.20.8, default `true`) controls the latter: `am5plugins_json.ChartSerializer.new(root, { runningAnimations: false })` turns it off. Never saved: finite animations (`appear()`, states, zoom) and loops with a custom-function or `pow` easing.
|
|
648
|
+
- **Not captured by `ChartSerializer` (as of 5.20.8)** — re-apply these in code after `parse()`: a `ZoomableContainer`'s `contents.children` and its `ZoomTools` (the serialized container comes back empty — track "chart is zoomable" out-of-band, or use `am5.SerialChartContainer` which builds the zoomable wrapper itself); Venn `hoverGraphics` and Venn slice-template `states` (a custom Venn hover cannot be expressed in JSON); custom elements without `themeTags: ["serialize"]`; a loop started on a **data item** in code (`dataItem.animate({ key: "positionOnLine", loops: Infinity })`) — declare it as a bullet-sprite `animations` entry with `target: "dataItem"` instead; data items added with `pushDataItem()` (only `series.data` rows are written — map points on lines can be data rows since 5.20.6, see `references/map.md`).
|
|
628
649
|
- **Bullets** are captured by calling the factory with a sample data item — write factories as `function(root, series, dataItem)` (pitfall #36) and see the heat-rule caveat under "Heat rules".
|
|
629
650
|
|
|
630
651
|
## Accessibility
|
|
@@ -773,7 +794,7 @@ onUnmounted(() => { root.dispose(); });
|
|
|
773
794
|
25. **`MapChart` has NO `"colors"` setting** — `chart.get("colors")` returns `undefined` on `MapChart`. Only XY, Radar, and Percent charts auto-create a ColorSet. For maps, create your own: `am5.ColorSet.new(root, {})`.
|
|
774
795
|
26. **`VoronoiTreemap` has NO `.rectangles` property** — Unlike `Treemap` (which has `series.rectangles.template`), `VoronoiTreemap` renders organic polygon cells. Style via `series.nodes.template` and its children, not `.rectangles`.
|
|
775
796
|
27. **Labels with data placeholders need `populateText: true`** — When a Label uses data field placeholders like `text: "{name}"`, you MUST also set `populateText: true`. Without it, the placeholder is not resolved and the label appears blank. This applies everywhere Labels display dynamic data — bullet labels, map point labels, etc. Example: `am5.Label.new(root, { text: "{name}", populateText: true, ... })`.
|
|
776
|
-
28. **Easing: `am5.ease.in()` does NOT exist** — amCharts 5 provides base easing functions (`am5.ease.cubic`, `am5.ease.bounce`, `am5.ease.elastic`, `am5.ease.linear`, `am5.ease.quad`, `am5.ease.sine`, `am5.ease.circle`, `am5.ease.exp
|
|
797
|
+
28. **Easing: `am5.ease.in()` does NOT exist** — amCharts 5 provides base easing functions (`am5.ease.cubic`, `am5.ease.bounce`, `am5.ease.elastic`, `am5.ease.linear`, `am5.ease.quad`, `am5.ease.sine`, `am5.ease.circle`, `am5.ease.exp`; `am5.ease.pow(t, e)` takes an exponent, so it is only usable wrapped: `(t) => am5.ease.pow(t, 3)`) and three modifiers: `am5.ease.out()`, `am5.ease.inOut()`, `am5.ease.yoyo()`. Usage: `am5.ease.cubic` (ease-in by default), `am5.ease.out(am5.ease.cubic)` (ease-out), `am5.ease.inOut(am5.ease.cubic)` (ease in+out). There is NO `am5.ease.in()` — using it throws a runtime error. The base functions already ease-in by default.
|
|
777
798
|
29. **`forceHidden` vs `visible`** — `forceHidden: true` ALWAYS hides an element, immune to states, themes/library and even `show()`. `visible` is weaker: amCharts re-manages it on many elements (notably cursor lines, but also labels, ticks, tooltips, grid) in response to interaction or data changes, so a `visible: false` you set may be flipped back to `true`. Rules of thumb: for a **persistent hide**, use `forceHidden: true` (`cursor.lineX.set("forceHidden", true)`, `yRenderer.labels.template.set("forceHidden", true)`, `xRenderer.grid.template.set("forceHidden", true)`). To **reveal** an element that defaults hidden — notably **axis ticks** (`ticks.template` defaults to `visible:false`) — you must raise `visible: true`; flipping `forceHidden` alone won't show it. For cursor lines specifically, always access `cursor.lineX`/`cursor.lineY` after creation — do NOT pass them as constructor options.
|
|
778
799
|
30. **`snapTooltip: true` on series for cursor tooltip snapping** — When using a cursor and you want tooltips to snap to data points, set `snapTooltip: true` on the series in addition to (or instead of) `snapToSeries` on the cursor. This is especially useful for timeline/curve charts.
|
|
779
800
|
31. **Globe rotation uses negative coordinates** — To center the globe (`geoOrthographic`) on a geographic point, set `rotationX` to **-longitude** and `rotationY` to **-latitude**. E.g., to center on Paris (48.86°N, 2.35°E): `chart.animate({ key: "rotationX", to: -2.35 }); chart.animate({ key: "rotationY", to: -48.86 });`. Using positive values rotates the globe the wrong way.
|
|
@@ -789,10 +810,13 @@ onUnmounted(() => { root.dispose(); });
|
|
|
789
810
|
amCharts 5 easing functions live under `am5.ease`:
|
|
790
811
|
|
|
791
812
|
```js
|
|
792
|
-
// Base functions (ease-in by default):
|
|
813
|
+
// Base functions (ease-in by default) — these 8 are also the names `animations` / byName() accept:
|
|
793
814
|
am5.ease.linear am5.ease.quad am5.ease.cubic
|
|
794
815
|
am5.ease.sine am5.ease.circle am5.ease.exp
|
|
795
|
-
am5.ease.
|
|
816
|
+
am5.ease.bounce am5.ease.elastic
|
|
817
|
+
|
|
818
|
+
// pow(t, e) needs an exponent — passing am5.ease.pow directly gives NaN. Wrap it:
|
|
819
|
+
(t) => am5.ease.pow(t, 3)
|
|
796
820
|
|
|
797
821
|
// Modifiers — wrap a base function:
|
|
798
822
|
am5.ease.out(am5.ease.cubic) // ease-out
|
|
@@ -804,9 +828,13 @@ sprite.animate({
|
|
|
804
828
|
key: "y", to: 100, duration: 400,
|
|
805
829
|
easing: am5.ease.out(am5.ease.cubic)
|
|
806
830
|
});
|
|
831
|
+
|
|
832
|
+
// Name <-> function (5.20.8; typings say @since 5.21.0)
|
|
833
|
+
am5.ease.byName("cubic", "out"); // same as am5.ease.out(am5.ease.cubic); unknown name -> linear
|
|
834
|
+
am5.ease.easingInfo(am5.ease.yoyo(am5.ease.sine)); // { easing: "sine", yoyo: true }
|
|
807
835
|
```
|
|
808
836
|
|
|
809
|
-
**There is NO `am5.ease.in()`** — the base functions already ease-in by default.
|
|
837
|
+
**There is NO `am5.ease.in()`** — the base functions already ease-in by default. `easingInfo()` returns `undefined` for custom functions, `pow`, and combinations it cannot name (e.g. `out(yoyo(x))`) — such easings cannot go into an `animations` entry, and a code-started endless loop using one is not serialized.
|
|
810
838
|
|
|
811
839
|
## Validate generated code (if you can execute commands)
|
|
812
840
|
|
|
@@ -820,7 +848,7 @@ Skip this step entirely if you cannot execute code (e.g., chat-only context with
|
|
|
820
848
|
|
|
821
849
|
## Recent API changes (newer than the bundled class reference)
|
|
822
850
|
|
|
823
|
-
The bundled per-class API reference was snapshotted on **2026-03-15**, so it predates the changes below. Latest release covered here: **5.20.
|
|
851
|
+
The bundled per-class API reference was snapshotted on **2026-03-15**, so it predates the changes below. Latest release covered here: **5.20.8** (2026-09-23). Prefer these names/settings; for anything newer, verify against the live docs (see next section).
|
|
824
852
|
|
|
825
853
|
**Renamed settings (old name still works but is deprecated — use the new one):**
|
|
826
854
|
|
|
@@ -837,8 +865,24 @@ am5hierarchy.VoronoiTreemap.new(root, { shapeType: "rectangle" }); // was: type
|
|
|
837
865
|
|
|
838
866
|
**Breaking change — WordCloud internals (5.20.1):** the layout is now computed synchronously in one pass (much faster). The per-data-item `ghostLabel` is gone and labels live in an internal container, so `dataItem.get("ghostLabel")` and any code walking `series.children` to find labels must be updated — use `series.labels` / `dataItem.get("label")` instead.
|
|
839
867
|
|
|
868
|
+
**Behavior changes / fixes (5.20.6 – 5.20.8)** — no workaround needed any more:
|
|
869
|
+
- `CategoryAxis` (5.20.6): series data no longer has to follow the axis-category order for every item to be drawn (e.g. Gantt-like column charts sorted by date). Line series still connect points in data order.
|
|
870
|
+
- Logarithmic `ValueAxis` over a wide range labels its grid with round powers of ten (5.20.6).
|
|
871
|
+
- Content added to an `axisHeader` after the chart is built (e.g. a legend) now makes the axis leave room instead of covering it (5.20.7).
|
|
872
|
+
- A `Container`'s `background` with its own `templateField` now reads the container's data item (5.20.7), so a per-bullet label background works: `am5.Label.new(root, { text: "{valueY}", populateText: true, background: am5.RoundedRectangle.new(root, { templateField: "labelBg" }) })` with `labelBg: { fill: am5.color(0xff0000) }` in the data row.
|
|
873
|
+
- `am5.CSVParser.parse("")` no longer loops until "Invalid array length" (5.20.7) — an empty server response is safe. It returns `[]` with `useColumnNames: true`, but `[{}]` (one empty row) with default options, so check for that before `data.setAll()`.
|
|
874
|
+
- JSON: `JsonParser` resolves references that point further down the config, and user `themeTags` are serialized — see *JSON config / serialization* below.
|
|
875
|
+
|
|
840
876
|
**New settings / methods worth knowing:**
|
|
841
877
|
|
|
878
|
+
*Declared animations, links, map points on lines (5.20.6 – 5.20.8)*
|
|
879
|
+
- `animations` setting on **every** element (5.20.8 — the typings/API reference say `@since 5.21.0`, but it ships in 5.20.8): an array of `IDeclaredAnimation` entries `{ key, from?, to, duration, delay?, loops?, yoyo?, easing?, ease?, target? }` — animations described as data (`loops: 0` = forever, `easing` by **name**, `target: "dataItem"` for data-item values). Round-trips through JSON. `IDeclaredAnimation` is not exported from the package index. See "Animations" above for the snippet, defaults and the `from` caveat.
|
|
880
|
+
- `am5.ease.byName(name, mode?)` / `am5.ease.easingInfo(fn)` (5.20.8) — easing function ↔ name; only the 8 named base easings (and `out`/`inOut`/`yoyo` of them) have names. See "Easing functions" above.
|
|
881
|
+
- `ChartSerializer`: `runningAnimations` (5.20.8, default `true`) — saves endless code-started loops as `animations` entries. See "Serializing to JSON" above.
|
|
882
|
+
- `Series` links (5.20.7): `urlField` (no default — links are off until set) names the data field holding a URL; the data item's `url` field gets it. Clicking the item's bullet (any series), column (`ColumnSeries`, candlestick, OHLC, Gantt…), slice (pie, funnel, pyramid, pictorial, Venn), `MapPolygon` or `MapLine` opens it in `linkTarget` (default `"_self"`; `"_blank"` opens with `noopener`; a chart inside an iframe usually wants `"_blank"` or `"_top"`). `cursorOverStyle: "pointer"` is set automatically unless you set one. `javascript:`/`data:`/`vbscript:` URLs are never opened. Override `series.openUrl(dataItem)` to intercept clicks. `urlField` can be set after the data, and a URL added later (`data.setIndex()`) links too. **Not linked:** hierarchy nodes, flow nodes/links, word-cloud labels, `MapSankeySeries` nodes.
|
|
883
|
+
- `MapPointSeries` (5.20.6): `lineIdField` (default `"lineId"`), `positionOnLineField` (`"positionOnLine"`), `autoRotateField` (`"autoRotate"`), `autoRotateAngleField` (`"autoRotateAngle"`) — a point on a line can be a plain data row `{ lineId: "jfk-lhr", positionOnLine: 0.5, autoRotate: true }` instead of `pushDataItem({ lineDataItem, positionOnLine })`, so it is saved by `ChartSerializer`. Data values of `autoRotate`/`autoRotateAngle` win over the bullet's. See `references/map.md`.
|
|
884
|
+
- `MapPointSeries` (5.20.8): an auto-rotating point turns round to face its travel direction on the way back — **only** while a bullet-sprite `animations` entry (`target: "dataItem"`, `key: "positionOnLine"`, e.g. with `yoyo: true`) moves it toward the line start. A point moved by `dataItem.animate()` in code is not flipped; that code must turn it.
|
|
885
|
+
|
|
842
886
|
*Themes & styling*
|
|
843
887
|
- 20+ new themes (5.20.0): `Midnight`, `Ember`, `Nord`, `Pastel`, `Colorblind`, `Patterns`, `Petroleum`, `Savanna`, plus `*Dark` variants of most palettes. Two parameterized factory themes, `Monochrome` and `Adaptive` — see "Parameterized themes" above.
|
|
844
888
|
- New fill patterns (5.20.0): `am5.StarPattern` (`radius`, `innerRadius`, `spikes`, `gap`, `checkered`) and `am5.TrianglePattern` (`maxWidth`, `maxHeight`, `gap`, `checkered`).
|
|
@@ -866,12 +910,16 @@ am5hierarchy.VoronoiTreemap.new(root, { shapeType: "rectangle" }); // was: type
|
|
|
866
910
|
- `Root` (5.20.2): `fontFamily`, `fontSize` (number or string) and `fontWeight` (`"normal" | "bold" | "bolder" | "lighter" | "100"…`"900"`) settings — defaults for **all** text elements unless overridden on an element. Set them in `am5.Root.new("chartdiv", { fontFamily: "Inter" })` or `root.setAll({...})` instead of a custom theme rule on `Label`.
|
|
867
911
|
- `am5.SerialChartContainer` (5.20.2) — a directly usable `SerialChart` whose `seriesContainer` sits inside a `ZoomableContainer` (exposed as `chart.zoomableContainer`), so series such as `ForceDirected` can be zoomed and panned. Exported from the **`am5` root module**, not a chart package. Optional `zoomTools` setting takes a `ZoomTools` instance whose `target` is pointed at the series container automatically. Bullets added to its series are drawn (5.20.4) and flow-chart bullets are placed correctly inside it (5.20.5). See `references/hierarchy.md`.
|
|
868
912
|
|
|
869
|
-
*JSON config / serialization (5.20.2 – 5.20.
|
|
913
|
+
*JSON config / serialization (5.20.2 – 5.20.8)*
|
|
870
914
|
- `ChartSerializer` now emits **only user-set settings** (5.20.3) — theme and library defaults are left out. Anything diffing or post-processing serializer output must expect much smaller configs.
|
|
871
915
|
- A JSON config may carry a top-level **`root`** section (5.20.2) that applies settings and properties to the `Root` object before the chart is parsed; `ChartSerializer` writes it when `includeRoot: true` (default `false`). A `Root`'s `interfaceColors`, `utc`, `fps`, formatters and `tabindex` round-trip through it (5.20.3).
|
|
872
916
|
- `JsonParser.parse(config, { updateTargets: "soft" })` (5.20.3) — an option on the **second argument of `parse()`**, not a parser setting. `"soft"` applies settings onto an existing object of the same `type` instead of replacing it; default `"strict"` replaces. `parse()` is async and returns a Promise.
|
|
873
917
|
- Gantt charts are now serializable/parsable (5.20.3). Cross-references are written as references (`"@series.get('fill')"`) instead of copies; large values (a map's `geoJSON`, a `Root`'s locale) are written as the name of the pack they came from and rebuilt on parse.
|
|
874
918
|
- An adapter whose callback did not survive the JSON round-trip is now **skipped** on parse instead of breaking the chart (5.20.4) — adapters still do not round-trip, see "Serializing to JSON" above.
|
|
919
|
+
- `ChartSerializer` writes user **`themeTags`** (5.20.6) — only tags passed to `.new()`; tags set later with `set("themeTags", …)` and tags the library adds are left out. On parse the tags are merged into an existing element's.
|
|
920
|
+
- `JsonParser` resolves **forward references** (5.20.7): a setting/property naming a ref defined further down the config is resolved after the rest instead of throwing "Could not find ref" — a legend inside an `axisHeader` naming a series now round-trips. Axis-range `axis`/`series` lookups are still immediate, so keep those ordered.
|
|
921
|
+
- Map data rows (5.20.7) no longer carry the geodata's own feature properties (`name`, `CNTRY`, `TYPE`); a row left with only its id is dropped.
|
|
922
|
+
- `animations` round-trip, and an endless code-started loop (`loops: Infinity`, nameable easing) is written as an `animations` entry with its key removed from the settings (5.20.8, `runningAnimations`, default `true`). A loop started on a data item in code is **not** saved in 5.20.8.
|
|
875
923
|
|
|
876
924
|
*Bullets on non-XY charts (5.20.2)*
|
|
877
925
|
- `ArcDiagram`: bullets on nodes are now placed on the node circle, `locationX`/`locationY` being fractions of it (before 5.20.2 they were created but never positioned). Flow charts (`Sankey`/`Chord`): node bullets are children of the node, drawn above its shape and below its label, positioned relative to the node. `FunnelSeries`/`PyramidSeries`: bullet `locationX`/`locationY` follow the slice's sloping edges instead of its bounding box.
|
package/content/flow.md
CHANGED
|
@@ -254,6 +254,8 @@ series.links.template.events.on("click", function(ev) {
|
|
|
254
254
|
});
|
|
255
255
|
```
|
|
256
256
|
|
|
257
|
+
`urlField` / `linkTarget` (5.20.7) do **not** link flow nodes or links — to open a URL from a node or link, keep a `click` handler like the ones above (e.g. `window.open(ev.target.dataItem.dataContext.url, "_blank", "noopener")`).
|
|
258
|
+
|
|
257
259
|
## Bullets on nodes (5.20.2)
|
|
258
260
|
|
|
259
261
|
Bullets pushed to `series.nodes.bullets` are children of the node since 5.20.2: drawn above the node shape and below its label, positioned relative to the node (`locationX`/`locationY` as fractions of it). On `ArcDiagram` they sit on the node circle — before 5.20.2 they were created but never placed. A bullet `Graphics` with no `fill`/`stroke` of its own takes the **node's** color, i.e. the same color as what it sits on — give it a contrasting `fill`, a `stroke`, or an offset or it is invisible. Node/link tooltips need no `am5.Tooltip` instance: set `tooltipText` on `series.nodes.nodes.template` / `series.links.template` and the root's shared tooltip is used.
|
|
@@ -335,6 +337,7 @@ bullet.on("locationY", function() {
|
|
|
335
337
|
- Random duration per bullet creates natural asynchronous flow
|
|
336
338
|
- The opacity adapter formula `0.5 - Math.abs(0.5 - location)` gives a bell curve: invisible at edges, max at center
|
|
337
339
|
- `bullet.on("locationX"/"locationY", ...)` is needed to trigger the adapter as position changes
|
|
340
|
+
- Declarative alternative for the loop (5.20.8): `am5.Bullet.new(root, { locationX: 0, sprite: label, autoRotate: true, animations: [{ key: "locationX", from: 0, to: 1, duration: 4000, loops: 0 }] })` instead of `bullet.animate(...)` — it lives in a JSON config; the opacity adapter still does not survive serialization
|
|
338
341
|
|
|
339
342
|
## Disposal
|
|
340
343
|
|
package/content/map.md
CHANGED
|
@@ -218,6 +218,8 @@ pointSeries2.data.setAll([
|
|
|
218
218
|
]);
|
|
219
219
|
```
|
|
220
220
|
|
|
221
|
+
**Points on lines as data rows (5.20.6):** `MapPointSeries` has `lineIdField` (default `"lineId"`), `positionOnLineField` (default `"positionOnLine"`), `autoRotateField` (default `"autoRotate"`) and `autoRotateAngleField` (default `"autoRotateAngle"`), so a point on a `MapLine` can be a plain row — `{ lineId: "jfk-lhr", positionOnLine: 0.5, autoRotate: true }`, where `lineId` is the line's data `id` in a `MapLineSeries` of the same chart — instead of `pushDataItem({ lineDataItem, positionOnLine })`. Data values of `autoRotate`/`autoRotateAngle` win over the bullet's own setting. `polygonIdField` still has **no** default — declare it as above. See "Animating bullets along lines".
|
|
222
|
+
|
|
221
223
|
### MapLineSeries (connections, routes)
|
|
222
224
|
|
|
223
225
|
```js
|
|
@@ -464,7 +466,7 @@ sankeySeries.data.setAll([
|
|
|
464
466
|
|
|
465
467
|
### Animating bullets along lines (positionOnLine)
|
|
466
468
|
|
|
467
|
-
`MapPointSeries` data items have a `positionOnLine` setting (0–1) that positions the point along a line. Combined with `lineDataItem` and `autoRotate`, this enables flight-path-style animations.
|
|
469
|
+
`MapPointSeries` data items have a `positionOnLine` setting (0–1) that positions the point along a line. Combined with `lineDataItem` (or, since 5.20.6, a `lineId` data field) and `autoRotate`, this enables flight-path-style animations.
|
|
468
470
|
|
|
469
471
|
```js
|
|
470
472
|
// Create a point that follows a line
|
|
@@ -496,6 +498,30 @@ plane.on("positionOnLine", function(pos) {
|
|
|
496
498
|
});
|
|
497
499
|
```
|
|
498
500
|
|
|
501
|
+
**Data-row form + declared flight (5.20.6 / 5.20.8)** — no data-item references and no `animate()` call, so the whole thing survives `ChartSerializer` (points added with `pushDataItem()` are not serialized; `data` rows are):
|
|
502
|
+
|
|
503
|
+
```js
|
|
504
|
+
var lineSeries = chart.series.push(am5map.MapLineSeries.new(root, {})); // push before the point series
|
|
505
|
+
lineSeries.data.setAll([{ id: "jfk-lhr",
|
|
506
|
+
geometry: { type: "LineString", coordinates: [[-73.78, 40.64], [-0.45, 51.47]] } }]);
|
|
507
|
+
|
|
508
|
+
var planeSeries = chart.series.push(am5map.MapPointSeries.new(root, {}));
|
|
509
|
+
planeSeries.bullets.push(function (root, series, dataItem) {
|
|
510
|
+
return am5.Bullet.new(root, {
|
|
511
|
+
sprite: am5.Graphics.new(root, {
|
|
512
|
+
svgPath: "m2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34 0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47",
|
|
513
|
+
scale: 0.06, centerX: am5.p50, centerY: am5.p50,
|
|
514
|
+
// loops: 0 = forever; yoyo flies back; keep `from` explicit (a row without positionOnLine would jump to `to`)
|
|
515
|
+
animations: [{ target: "dataItem", key: "positionOnLine", from: 0, to: 1,
|
|
516
|
+
duration: 6000, loops: 0, yoyo: true, easing: "cubic", ease: "inOut" }]
|
|
517
|
+
})
|
|
518
|
+
});
|
|
519
|
+
});
|
|
520
|
+
planeSeries.data.setAll([{ lineId: "jfk-lhr", positionOnLine: 0, autoRotate: true }]);
|
|
521
|
+
```
|
|
522
|
+
|
|
523
|
+
**Direction on the way back (5.20.8):** an `autoRotate` point turns round to face its travel direction **only** while an `animations` entry on its bullet sprite (`target: "dataItem"`, `key: "positionOnLine"`) moves it back toward the line start. A point moved by `dataItem.animate()` from code keeps facing the line's direction — that code has to turn it (Example 4 rotates its plane between segments itself). A loop started on a data item in code is also **not** saved by `ChartSerializer` in 5.20.8; the declared entry is.
|
|
524
|
+
|
|
499
525
|
**IMPORTANT — Multi-segment lines and `positionOnLine`:**
|
|
500
526
|
- `positionOnLine` treats the entire line as one unit (0 = start, 1 = end). If a line has multiple segments (i.e. `pointsToConnect` has 3+ points), position 0.5 is the midpoint of the *entire* path.
|
|
501
527
|
- For advanced per-segment animations (e.g., scaling the bullet differently at the midpoint of each segment, or pausing between segments), use **single-segment lines** (2 points each) instead of one multi-segment line. This gives you full control: animate `positionOnLine` from 0 to 1 on each segment line sequentially, with independent timing, easing, and callbacks per segment.
|
|
@@ -644,8 +670,16 @@ pointSeries.bullets.push(function(root, series, dataItem) {
|
|
|
644
670
|
chart.on("zoomLevel", function(zoomLevel) {
|
|
645
671
|
console.log("Zoom:", zoomLevel);
|
|
646
672
|
});
|
|
673
|
+
|
|
674
|
+
// Links without a click handler (5.20.7): urlField on MapPolygonSeries, MapLineSeries or MapPointSeries (bullets)
|
|
675
|
+
var linkedSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {
|
|
676
|
+
geoJSON: am5geodata_worldLow, urlField: "url", linkTarget: "_blank" // linkTarget default "_self"
|
|
677
|
+
}));
|
|
678
|
+
linkedSeries.data.setAll([{ id: "US", url: "https://en.wikipedia.org/wiki/United_States" }]);
|
|
647
679
|
```
|
|
648
680
|
|
|
681
|
+
`urlField` has no default (links are off until set); the pointer cursor is set automatically unless you set `cursorOverStyle`; `javascript:`/`data:`/`vbscript:` URLs are never opened; override `series.openUrl(dataItem)` to intercept. `MapSankeySeries` nodes are not linked — keep a `click` handler there.
|
|
682
|
+
|
|
649
683
|
## Disposal
|
|
650
684
|
|
|
651
685
|
```js
|
package/content/pie.md
CHANGED
|
@@ -346,8 +346,14 @@ series.slices.template.events.on("pointerover", function(ev) {
|
|
|
346
346
|
series.slices.template.events.on("pointerout", function(ev) {
|
|
347
347
|
ev.target.set("scale", 1);
|
|
348
348
|
});
|
|
349
|
+
|
|
350
|
+
// Open a URL on click without a handler (5.20.7) — pie, funnel, pyramid and pictorial slices (and bullets)
|
|
351
|
+
series.set("urlField", "url"); // data row: { category: "A", value: 40, url: "https://…" }
|
|
352
|
+
series.set("linkTarget", "_blank"); // default "_self"
|
|
349
353
|
```
|
|
350
354
|
|
|
355
|
+
`urlField` has no default (links off until set); the pointer cursor is set automatically unless you set `cursorOverStyle`; `javascript:`/`data:`/`vbscript:` URLs are never opened; override `series.openUrl(dataItem)` to intercept.
|
|
356
|
+
|
|
351
357
|
## Disposal
|
|
352
358
|
|
|
353
359
|
```js
|
package/content/venn.md
CHANGED
|
@@ -149,7 +149,7 @@ series.labels.template.adapters.add("text", function(text, target) {
|
|
|
149
149
|
|
|
150
150
|
## Serialization gotcha: custom hover is not captured
|
|
151
151
|
|
|
152
|
-
`series.hoverGraphics` (the dashed set outline used in the amCharts venn demo) and `slices.template.states.create("hover", …)` are **not** written by `am5plugins_json.ChartSerializer` as of 5.20.
|
|
152
|
+
`series.hoverGraphics` (the dashed set outline used in the amCharts venn demo) and `slices.template.states.create("hover", …)` are **not** written by `am5plugins_json.ChartSerializer` as of 5.20.8 — a venn rebuilt from JSON loses any custom hover look (`slices.template.tooltipText` does round-trip). Re-apply `hoverGraphics.setAll({...})` in code after `JsonParser.parse()`.
|
|
153
153
|
|
|
154
154
|
## Click events
|
|
155
155
|
|
|
@@ -160,6 +160,8 @@ series.slices.template.events.on("click", function(ev) {
|
|
|
160
160
|
});
|
|
161
161
|
```
|
|
162
162
|
|
|
163
|
+
To open a URL on click, no handler is needed (5.20.7): `am5venn.Venn.new(root, { …, urlField: "url", linkTarget: "_blank" })` (`linkTarget` default `"_self"`) links each slice — sets and intersections — to the `url` in its data row; the pointer cursor is set automatically.
|
|
164
|
+
|
|
163
165
|
## Legend
|
|
164
166
|
|
|
165
167
|
```js
|
package/content/xy.md
CHANGED
|
@@ -167,7 +167,7 @@ xAxis.data.setAll(data);
|
|
|
167
167
|
- `tooltip` — shows category under cursor
|
|
168
168
|
|
|
169
169
|
**Gotchas:**
|
|
170
|
-
-
|
|
170
|
+
- Since 5.20.6 series data need **not** follow the axis-category order for every item to be drawn (before, out-of-order items — e.g. Gantt-like column charts sorted by date — could silently disappear). Line series still connect points in **data** order, so keep line data in category order.
|
|
171
171
|
- Forgetting `xAxis.data.setAll()` is the #1 mistake — the chart will render empty
|
|
172
172
|
|
|
173
173
|
## DateAxis
|
|
@@ -590,6 +590,14 @@ series.bullets.push(function(root, series, dataItem) {
|
|
|
590
590
|
|
|
591
591
|
// Auto-hide bullets when too close together
|
|
592
592
|
series.set("minBulletDistance", 20);
|
|
593
|
+
|
|
594
|
+
// Pulsing bullet declared as data (5.20.8) — survives JSON serialization, unlike animate()
|
|
595
|
+
series.bullets.push(function(root, series, dataItem) {
|
|
596
|
+
return am5.Bullet.new(root, {
|
|
597
|
+
sprite: am5.Circle.new(root, { radius: 5, fill: series.get("fill"),
|
|
598
|
+
animations: [{ key: "scale", from: 1, to: 1.6, duration: 800, loops: 0, yoyo: true, easing: "sine" }] })
|
|
599
|
+
});
|
|
600
|
+
});
|
|
593
601
|
```
|
|
594
602
|
|
|
595
603
|
## Dual Y-axis (multiple value axes)
|
|
@@ -685,8 +693,14 @@ series.bullets.push(function(root, series, dataItem) {
|
|
|
685
693
|
xAxis.events.on("rangechanged", function() {
|
|
686
694
|
console.log("Axis range changed (zoomed/scrolled)");
|
|
687
695
|
});
|
|
696
|
+
|
|
697
|
+
// Open a URL on click without a handler (5.20.7): columns and bullets of the series are linked
|
|
698
|
+
series.set("urlField", "url"); // data row: { category: "A", value: 10, url: "https://…" }
|
|
699
|
+
series.set("linkTarget", "_blank"); // default "_self"
|
|
688
700
|
```
|
|
689
701
|
|
|
702
|
+
`urlField` has no default (links off until set) and works on every series' bullets and on all column-type series (`ColumnSeries`, `CandlestickSeries`, `OHLCSeries`, Gantt). The pointer cursor is set automatically unless you set `cursorOverStyle`; `javascript:`/`data:`/`vbscript:` URLs are never opened; override `series.openUrl(dataItem)` to intercept.
|
|
703
|
+
|
|
690
704
|
## Chart settings reference
|
|
691
705
|
|
|
692
706
|
```js
|
|
@@ -268,7 +268,7 @@ lineSeries.pushDataItem({
|
|
|
268
268
|
|
|
269
269
|
This can also work the other way around: we can make a data item form map line series "stick" to any point on a line.
|
|
270
270
|
|
|
271
|
-
All we have to do is to set `lineDataItem` to a data item of the specific line, as well as `positionOnLine` to indicate relative position, when creating a point series data item:
|
|
271
|
+
All we have to do is to set `lineDataItem` to a data item of the specific line, as well as `positionOnLine` to indicate relative position, when creating a point series data item (since 5.20.6 the same can be done in regular data — see "Points on a line via data" below):
|
|
272
272
|
|
|
273
273
|
// Create line series
|
|
274
274
|
let lineSeries = chart.series.push(
|
|
@@ -369,4 +369,113 @@ If set, this will be added to the angle calculated by `autoRotate`. Can be used
|
|
|
369
369
|
|
|
370
370
|
The below example uses above code, albeit with the slightly more sophisticated image as a point bullet:
|
|
371
371
|
|
|
372
|
+
### Points on a line via data (5.20.6)
|
|
373
|
+
|
|
374
|
+
Since 5.20.6, `lineId`, `positionOnLine`, `autoRotate` and `autoRotateAngle` can be given in point series' data, so a point placed on a line no longer needs to be created with `pushDataItem()` and a `lineDataItem`. `lineId` is the `id` of a line in this line series' data (the line series' `idField`, `"id"` by default). Pushing the line series to the chart before the point series is a safe precaution.
|
|
375
|
+
|
|
376
|
+
The data fields are read via these point series settings, which all have defaults, so nothing needs to be set:
|
|
377
|
+
|
|
378
|
+
Setting
|
|
379
|
+
|
|
380
|
+
Default
|
|
381
|
+
|
|
382
|
+
`lineIdField`
|
|
383
|
+
|
|
384
|
+
`"lineId"`
|
|
385
|
+
|
|
386
|
+
`positionOnLineField`
|
|
387
|
+
|
|
388
|
+
`"positionOnLine"`
|
|
389
|
+
|
|
390
|
+
`autoRotateField`
|
|
391
|
+
|
|
392
|
+
`"autoRotate"`
|
|
393
|
+
|
|
394
|
+
`autoRotateAngleField`
|
|
395
|
+
|
|
396
|
+
`"autoRotateAngle"`
|
|
397
|
+
|
|
398
|
+
`autoRotate` and `autoRotateAngle` values in data take precedence over the same settings on the bullet.
|
|
399
|
+
|
|
400
|
+
```javascript
|
|
401
|
+
// Create line series
|
|
402
|
+
var lineSeries = chart.series.push(
|
|
403
|
+
am5map.MapLineSeries.new(root, {})
|
|
404
|
+
);
|
|
405
|
+
|
|
406
|
+
lineSeries.data.setAll([{
|
|
407
|
+
id: "route",
|
|
408
|
+
geometry: {
|
|
409
|
+
type: "LineString",
|
|
410
|
+
coordinates: [
|
|
411
|
+
[ -73.778137, 40.641312 ],
|
|
412
|
+
[ -0.454296, 51.470020 ],
|
|
413
|
+
[ 116.597504, 40.072498 ]
|
|
414
|
+
]
|
|
415
|
+
}
|
|
416
|
+
}]);
|
|
417
|
+
|
|
418
|
+
// Create point series
|
|
419
|
+
var pointSeries = chart.series.push(
|
|
420
|
+
am5map.MapPointSeries.new(root, {})
|
|
421
|
+
);
|
|
422
|
+
|
|
423
|
+
pointSeries.bullets.push(function(root, series, dataItem) {
|
|
424
|
+
return am5.Bullet.new(root, {
|
|
425
|
+
sprite: am5.Circle.new(root, {
|
|
426
|
+
radius: 5,
|
|
427
|
+
fill: am5.color(0xff0000)
|
|
428
|
+
})
|
|
429
|
+
});
|
|
430
|
+
});
|
|
431
|
+
|
|
432
|
+
pointSeries.data.setAll([{
|
|
433
|
+
lineId: "route",
|
|
434
|
+
positionOnLine: 0.7,
|
|
435
|
+
autoRotate: true
|
|
436
|
+
}]);
|
|
437
|
+
```
|
|
438
|
+
|
|
439
|
+
NOTE This matters when the chart is [serialized](https://www.amcharts.com/docs/v5/concepts/serializing/chart-serializer/): points created with `pushDataItem()` are not data rows, so they are not part of a serialized config. Points given as data rows are.
|
|
440
|
+
|
|
441
|
+
#### Animating a point along a line (5.20.8)
|
|
442
|
+
|
|
443
|
+
To make a point travel along its line, give the bullet's sprite an [`animations`](https://www.amcharts.com/docs/v5/concepts/animations/) entry with `target: "dataItem"` that animates `positionOnLine`. Unlike a `dataItem.animate()` call in code, this is part of the config, so it survives serialization.
|
|
444
|
+
|
|
445
|
+
```javascript
|
|
446
|
+
var planeSeries = chart.series.push(
|
|
447
|
+
am5map.MapPointSeries.new(root, {})
|
|
448
|
+
);
|
|
449
|
+
|
|
450
|
+
planeSeries.bullets.push(function(root, series, dataItem) {
|
|
451
|
+
return am5.Bullet.new(root, {
|
|
452
|
+
sprite: am5.Graphics.new(root, {
|
|
453
|
+
svgPath: "m2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34 0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47",
|
|
454
|
+
scale: 0.06,
|
|
455
|
+
centerX: am5.p50,
|
|
456
|
+
centerY: am5.p50,
|
|
457
|
+
animations: [{
|
|
458
|
+
target: "dataItem",
|
|
459
|
+
key: "positionOnLine",
|
|
460
|
+
from: 0,
|
|
461
|
+
to: 1,
|
|
462
|
+
duration: 6000,
|
|
463
|
+
loops: 0,
|
|
464
|
+
yoyo: true,
|
|
465
|
+
easing: "cubic",
|
|
466
|
+
ease: "inOut"
|
|
467
|
+
}]
|
|
468
|
+
})
|
|
469
|
+
});
|
|
470
|
+
});
|
|
471
|
+
|
|
472
|
+
planeSeries.data.setAll([{
|
|
473
|
+
lineId: "route",
|
|
474
|
+
positionOnLine: 0,
|
|
475
|
+
autoRotate: true
|
|
476
|
+
}]);
|
|
477
|
+
```
|
|
478
|
+
|
|
479
|
+
Since 5.20.8, an auto-rotating point turns round (180° is added to its angle) while such an `animations` entry moves it back toward the start of the line — e.g. on the way back of a `yoyo` — so the plane faces the way it is travelling. This applies only to an `animations` entry on the bullet's sprite; a point moved from code with `dataItem.animate()` is not turned round, and that code is expected to turn it itself (e.g. via `autoRotateAngle`).
|
|
480
|
+
|
|
372
481
|
|
|
@@ -438,7 +438,7 @@ lineSeries.pushDataItem({
|
|
|
438
438
|
|
|
439
439
|
This can also work the other way around: we can make a data item form map line series "stick" to any point on a line.
|
|
440
440
|
|
|
441
|
-
All we have to do is to set `lineDataItem` to a data item of the specific line, as well as `positionOnLine` to indicate relative position, when creating a point series data item:
|
|
441
|
+
All we have to do is to set `lineDataItem` to a data item of the specific line, as well as `positionOnLine` to indicate relative position, when creating a point series data item (since 5.20.6 the same can be done in regular data — see "Points on a line via data" below):
|
|
442
442
|
|
|
443
443
|
// Create line series
|
|
444
444
|
let lineSeries = chart.series.push(
|
|
@@ -539,6 +539,115 @@ If set, this will be added to the angle calculated by `autoRotate`. Can be used
|
|
|
539
539
|
|
|
540
540
|
The below example uses above code, albeit with the slightly more sophisticated image as a point bullet:
|
|
541
541
|
|
|
542
|
+
### Points on a line via data (5.20.6)
|
|
543
|
+
|
|
544
|
+
Since 5.20.6, `lineId`, `positionOnLine`, `autoRotate` and `autoRotateAngle` can be given in point series' data, so a point placed on a line no longer needs to be created with `pushDataItem()` and a `lineDataItem`. `lineId` is the `id` of a line in a map line series' data (the line series' `idField`, `"id"` by default). Pushing the line series to the chart before the point series is a safe precaution.
|
|
545
|
+
|
|
546
|
+
The data fields are read via these point series settings, which all have defaults, so nothing needs to be set:
|
|
547
|
+
|
|
548
|
+
Setting
|
|
549
|
+
|
|
550
|
+
Default
|
|
551
|
+
|
|
552
|
+
`lineIdField`
|
|
553
|
+
|
|
554
|
+
`"lineId"`
|
|
555
|
+
|
|
556
|
+
`positionOnLineField`
|
|
557
|
+
|
|
558
|
+
`"positionOnLine"`
|
|
559
|
+
|
|
560
|
+
`autoRotateField`
|
|
561
|
+
|
|
562
|
+
`"autoRotate"`
|
|
563
|
+
|
|
564
|
+
`autoRotateAngleField`
|
|
565
|
+
|
|
566
|
+
`"autoRotateAngle"`
|
|
567
|
+
|
|
568
|
+
`autoRotate` and `autoRotateAngle` values in data take precedence over the same settings on the bullet. (`polygonIdField`, on the other hand, still has no default and needs to be set to use polygon ids in data.)
|
|
569
|
+
|
|
570
|
+
```javascript
|
|
571
|
+
// Create line series
|
|
572
|
+
var lineSeries = chart.series.push(
|
|
573
|
+
am5map.MapLineSeries.new(root, {})
|
|
574
|
+
);
|
|
575
|
+
|
|
576
|
+
lineSeries.data.setAll([{
|
|
577
|
+
id: "route",
|
|
578
|
+
geometry: {
|
|
579
|
+
type: "LineString",
|
|
580
|
+
coordinates: [
|
|
581
|
+
[ -73.778137, 40.641312 ],
|
|
582
|
+
[ -0.454296, 51.470020 ],
|
|
583
|
+
[ 116.597504, 40.072498 ]
|
|
584
|
+
]
|
|
585
|
+
}
|
|
586
|
+
}]);
|
|
587
|
+
|
|
588
|
+
// Create point series
|
|
589
|
+
var pointSeries = chart.series.push(
|
|
590
|
+
am5map.MapPointSeries.new(root, {})
|
|
591
|
+
);
|
|
592
|
+
|
|
593
|
+
pointSeries.bullets.push(function(root, series, dataItem) {
|
|
594
|
+
return am5.Bullet.new(root, {
|
|
595
|
+
sprite: am5.Circle.new(root, {
|
|
596
|
+
radius: 5,
|
|
597
|
+
fill: am5.color(0xff0000)
|
|
598
|
+
})
|
|
599
|
+
});
|
|
600
|
+
});
|
|
601
|
+
|
|
602
|
+
pointSeries.data.setAll([{
|
|
603
|
+
lineId: "route",
|
|
604
|
+
positionOnLine: 0.7,
|
|
605
|
+
autoRotate: true
|
|
606
|
+
}]);
|
|
607
|
+
```
|
|
608
|
+
|
|
609
|
+
NOTE This matters when the chart is [serialized](https://www.amcharts.com/docs/v5/concepts/serializing/chart-serializer/): points created with `pushDataItem()` are not data rows, so they are not part of a serialized config. Points given as data rows are.
|
|
610
|
+
|
|
611
|
+
#### Animating a point along a line (5.20.8)
|
|
612
|
+
|
|
613
|
+
To make a point travel along its line, give the bullet's sprite an [`animations`](https://www.amcharts.com/docs/v5/concepts/animations/) entry with `target: "dataItem"` that animates `positionOnLine`. Unlike a `dataItem.animate()` call in code, this is part of the config, so it survives serialization.
|
|
614
|
+
|
|
615
|
+
```javascript
|
|
616
|
+
var planeSeries = chart.series.push(
|
|
617
|
+
am5map.MapPointSeries.new(root, {})
|
|
618
|
+
);
|
|
619
|
+
|
|
620
|
+
planeSeries.bullets.push(function(root, series, dataItem) {
|
|
621
|
+
return am5.Bullet.new(root, {
|
|
622
|
+
sprite: am5.Graphics.new(root, {
|
|
623
|
+
svgPath: "m2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34 0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47",
|
|
624
|
+
scale: 0.06,
|
|
625
|
+
centerX: am5.p50,
|
|
626
|
+
centerY: am5.p50,
|
|
627
|
+
animations: [{
|
|
628
|
+
target: "dataItem",
|
|
629
|
+
key: "positionOnLine",
|
|
630
|
+
from: 0,
|
|
631
|
+
to: 1,
|
|
632
|
+
duration: 6000,
|
|
633
|
+
loops: 0,
|
|
634
|
+
yoyo: true,
|
|
635
|
+
easing: "cubic",
|
|
636
|
+
ease: "inOut"
|
|
637
|
+
}]
|
|
638
|
+
})
|
|
639
|
+
});
|
|
640
|
+
});
|
|
641
|
+
|
|
642
|
+
planeSeries.data.setAll([{
|
|
643
|
+
lineId: "route",
|
|
644
|
+
positionOnLine: 0,
|
|
645
|
+
autoRotate: true
|
|
646
|
+
}]);
|
|
647
|
+
```
|
|
648
|
+
|
|
649
|
+
Since 5.20.8, an auto-rotating point turns round (180° is added to its angle) while such an `animations` entry moves it back toward the start of the line — e.g. on the way back of a `yoyo` — so the plane faces the way it is travelling. This applies only to an `animations` entry on the bullet's sprite; a point moved from code with `dataItem.animate()` is not turned round, and that code is expected to turn it itself (e.g. via `autoRotateAngle`).
|
|
650
|
+
|
|
542
651
|
|
|
543
652
|
## Hover behavior
|
|
544
653
|
|