@amcharts/amcharts5-mcp 1.4.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 +135 -7
- package/content/flow.md +7 -0
- package/content/hierarchy.md +21 -0
- package/content/map.md +107 -9
- package/content/pie.md +22 -0
- package/content/radar.md +1 -1
- package/content/timeline.md +3 -3
- package/content/venn.md +6 -0
- package/content/wordcloud.md +2 -0
- package/content/xy.md +32 -2
- 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/events.md +14 -0
- package/extended/concepts/serializing/chart-serializer.md +64 -24
- package/extended/concepts/serializing.md +17 -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/ibasecolumnseriesdataitem.md +1 -0
- package/extended/reference/ibasecolumnseriessettings.md +2 -0
- package/extended/reference/ichartserializersettings.md +13 -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/imapchartsettings.md +2 -0
- package/extended/reference/imaplineseriesdataitem.md +1 -0
- package/extended/reference/imaplineseriessettings.md +2 -0
- package/extended/reference/imappointseriesdataitem.md +4 -2
- package/extended/reference/imappointseriessettings.md +7 -3
- package/extended/reference/iparsesettings.md +9 -3
- package/extended/reference/irootsettings.md +4 -0
- package/extended/reference/iscrollbarsettings.md +1 -0
- package/extended/reference/iserialchartcontainersettings.md +16 -0
- package/extended/reference/iserializersettings.md +2 -1
- package/extended/reference/iseriesdataitem.md +1 -0
- package/extended/reference/iseriessettings.md +2 -0
- package/extended/reference/mapchart.md +4 -0
- package/extended/reference/mappointseries.md +7 -3
- package/extended/reference/serialchart.md +1 -1
- package/extended/reference/serialchartcontainer.md +34 -0
- package/extended/reference/serializer.md +2 -1
- package/extended/reference/series.md +2 -0
- package/package.json +5 -2
- package/src/tools.js +73 -21
package/content/SKILL.md
CHANGED
|
@@ -201,6 +201,27 @@ series.set("tooltip", tooltip);
|
|
|
201
201
|
|
|
202
202
|
`getStrokeFromSprite` (default `false`) copies the sprite's stroke color when `true`.
|
|
203
203
|
|
|
204
|
+
### Shared vs per-sprite tooltip
|
|
205
|
+
|
|
206
|
+
Setting **only** `tooltipText` on a sprite (no `tooltip:` instance anywhere on it) is enough to get a hover tooltip: the sprite lazily resolves the **Root's shared default `Tooltip`** (`sprite.getTooltip()` returns it). You only need your own `am5.Tooltip.new(root, {...})` when that element's tooltip must **look different** from the shared one, or on XY charts, where series/axis tooltips are **cursor-driven** rather than hover-driven and need their own instance.
|
|
207
|
+
|
|
208
|
+
So for non-XY charts do not create a Tooltip per series — set `tooltipText` on the right template and style the look once on the shared tooltip:
|
|
209
|
+
|
|
210
|
+
```js
|
|
211
|
+
// Where tooltipText goes on non-XY charts
|
|
212
|
+
pieSeries.slices.template.set("tooltipText", "{category}: {value}"); // pie / funnel / venn slices
|
|
213
|
+
hierarchySeries.nodes.template.set("tooltipText", "{category}: {sum}"); // hierarchy nodes
|
|
214
|
+
flowSeries.nodes.nodes.template.set("tooltipText", "{name}"); // flow nodes
|
|
215
|
+
flowSeries.links.template.set("tooltipText", "{sourceId} → {targetId}: {value}"); // flow links
|
|
216
|
+
wordCloud.labels.template.set("tooltipText", "{category}: {value}"); // word cloud words
|
|
217
|
+
polygonSeries.mapPolygons.template.set("tooltipText", "{name}"); // map polygons (map points: the bullet sprite)
|
|
218
|
+
|
|
219
|
+
// Style the shared tooltip once — it lives on root.container (applies everywhere no dedicated Tooltip was set)
|
|
220
|
+
var shared = root.container.get("tooltip");
|
|
221
|
+
shared.set("getFillFromSprite", false);
|
|
222
|
+
shared.get("background").setAll({ fill: am5.color(0x000000), fillOpacity: 0.8 });
|
|
223
|
+
```
|
|
224
|
+
|
|
204
225
|
## Chart title
|
|
205
226
|
|
|
206
227
|
Do NOT add titles as HTML elements — they are outside the canvas and won't appear in exports. Add an `am5.Label` to the container BEFORE the chart, and set `verticalLayout`:
|
|
@@ -300,12 +321,12 @@ series.set("heatRules", [{
|
|
|
300
321
|
| `maxValue` | number | Override auto-calculated max (skips `calculateAggregates`) |
|
|
301
322
|
| `customFunction` | function | `(sprite, min, max, value)` — full control over the rule |
|
|
302
323
|
|
|
303
|
-
**Using heat rules on bullets** — bullets need an explicit `am5.Template
|
|
324
|
+
**Using heat rules on bullets** — bullets need an explicit `am5.Template`, and the series must track the field the rule reads:
|
|
304
325
|
|
|
305
326
|
```js
|
|
306
327
|
var circleTemplate = am5.Template.new({});
|
|
307
328
|
|
|
308
|
-
series.bullets.push(function() {
|
|
329
|
+
series.bullets.push(function(root, series, dataItem) {
|
|
309
330
|
return am5.Bullet.new(root, {
|
|
310
331
|
sprite: am5.Circle.new(root, {
|
|
311
332
|
fill: series.get("fill"),
|
|
@@ -323,6 +344,13 @@ series.set("heatRules", [{
|
|
|
323
344
|
}]);
|
|
324
345
|
```
|
|
325
346
|
|
|
347
|
+
Rules that make bullet heat rules work (each failure is **silent** — every bullet just comes out the same size):
|
|
348
|
+
- `target` must be the **`Template`** the bullet sprites are built from (3rd argument of `am5.Circle.new(...)`), not the sprite and not `series.bullets`.
|
|
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
|
+
- `calculateAggregates: true` is required (unless `minValue`/`maxValue` are given) — without it `valueLow`/`valueHigh` are never computed and every bullet gets the midpoint size.
|
|
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.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
|
+
|
|
326
354
|
**HeatLegend:**
|
|
327
355
|
|
|
328
356
|
```js
|
|
@@ -349,6 +377,24 @@ series.appear(1000); // duration in ms
|
|
|
349
377
|
chart.appear(1000, 100); // duration, delay
|
|
350
378
|
```
|
|
351
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
|
+
|
|
352
398
|
## Events
|
|
353
399
|
|
|
354
400
|
```js
|
|
@@ -385,6 +431,8 @@ const disposer = sprite.events.on("click", handler);
|
|
|
385
431
|
disposer.dispose(); // removes the listener
|
|
386
432
|
```
|
|
387
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
|
+
|
|
388
436
|
## Settings API
|
|
389
437
|
|
|
390
438
|
```js
|
|
@@ -404,6 +452,23 @@ const cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
|
|
|
404
452
|
|
|
405
453
|
**Reading animated settings is unreliable mid-animation.** Right after `series.appear()` / `chart.appear()`, animated settings like `opacity` are still transitioning — `get("opacity")` can return `0` (the start value). Read such settings after the animation completes, or don't persist values read during appear (a common way to accidentally bake `opacity:0` into generated code).
|
|
406
454
|
|
|
455
|
+
## Settings that already equal the default — omit them
|
|
456
|
+
|
|
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:
|
|
458
|
+
|
|
459
|
+
| Class | Setting(s) that are already the default |
|
|
460
|
+
|-------|------------------------------------------|
|
|
461
|
+
| All hierarchy series | `childDataField: "children"`, `downDepth: 1`, `initialDepth: 5` |
|
|
462
|
+
| `Sunburst`, `Partition`, `Treemap`, `VoronoiTreemap` | `singleBranchOnly: true` (`Partition`/`Treemap` also `upDepth: 0`; `VoronoiTreemap` also `shapeType: "polygon"`) |
|
|
463
|
+
| `Tree`, `ForceDirected` | `singleBranchOnly: false`, `upDepth: Infinity`, `topDepth: 0` (`Tree` also `orientation: "vertical"`) |
|
|
464
|
+
| `PieSeries`, `FunnelSeries` | `alignLabels: true` (`FunnelSeries` also `orientation: "vertical"`, `startLocation: 0`, `endLocation: 1`, `bottomRatio: 0`) |
|
|
465
|
+
| `XYSeries` (all XY series) | `maskBullets: true` — note the default is **true**, so `maskBullets: false` is a real change |
|
|
466
|
+
| `LineSeries` (incl. smoothed/step) | `connect: true`; `StepLineSeries` `noRisers: false` |
|
|
467
|
+
| `XYChart` | `maxTooltipDistance` — leave **unset** (unset shows tooltips for all items in the category; `0` is *not* the same) |
|
|
468
|
+
| `HeatLegend` | `stepCount: 1` |
|
|
469
|
+
|
|
470
|
+
Runtime-mutated settings (`visible`, `x`/`y`, `opacity`, `scale`, cursor line `visible`, physics/random layouts, computed `AxisRendererCurve.points`) cannot be checked by "remove and re-`get()`" — amCharts rewrites them after render. User-set values live in `entity._userProperties` (what `ChartSerializer` reads), separate from the full `_settings` bag that includes theme and internal values.
|
|
471
|
+
|
|
407
472
|
## Dynamic data
|
|
408
473
|
|
|
409
474
|
```js
|
|
@@ -555,6 +620,8 @@ colors.set("colors", [
|
|
|
555
620
|
]);
|
|
556
621
|
```
|
|
557
622
|
|
|
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.
|
|
624
|
+
|
|
558
625
|
## Data processor
|
|
559
626
|
|
|
560
627
|
```js
|
|
@@ -569,6 +636,18 @@ series.data.processor = am5.DataProcessor.new(root, {
|
|
|
569
636
|
// Configure processor BEFORE setting data
|
|
570
637
|
```
|
|
571
638
|
|
|
639
|
+
## Serializing to JSON (ChartSerializer / JsonParser)
|
|
640
|
+
|
|
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:
|
|
642
|
+
|
|
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.
|
|
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`.
|
|
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).
|
|
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.
|
|
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`).
|
|
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".
|
|
650
|
+
|
|
572
651
|
## Accessibility
|
|
573
652
|
|
|
574
653
|
```js
|
|
@@ -715,22 +794,29 @@ onUnmounted(() => { root.dispose(); });
|
|
|
715
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, {})`.
|
|
716
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`.
|
|
717
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, ... })`.
|
|
718
|
-
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.
|
|
719
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.
|
|
720
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.
|
|
721
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.
|
|
722
801
|
32. **`positionOnLine` with multi-segment lines limits per-segment control** — `MapPointSeries` data items can animate along a line via `positionOnLine` (0→1). If the line has 3+ points (multi-segment), position 0.5 is the midpoint of the *entire* path, making per-segment effects (scaling at each segment midpoint, pausing between segments, etc.) difficult. For advanced per-segment animations, use **single-segment lines** (2 points each) and animate the bullet across them sequentially. E.g., instead of one line [A,B,C,D], create [A,B], [B,C], [C,D].
|
|
723
802
|
33. **Do NOT exclude Antarctica (`exclude: ["AQ"]`) by default** — Many amCharts demos exclude Antarctica because they use Mercator projection where it appears disproportionately large. This is a demo-specific choice, not a best practice. Unless the user explicitly asks to exclude Antarctica, or references a demo that does so, keep Antarctica in the map. With non-Mercator projections (`geoNaturalEarth1`, `geoEqualEarth`, `geoOrthographic`, `geoEquirectangular`), Antarctica renders at a reasonable size.
|
|
803
|
+
34. **Custom GeoJSON for `MapPolygonSeries` needs CLOCKWISE exterior rings** — amCharts projects on a sphere (d3-geo), where ring winding decides which side is "inside". The RFC 7946 default is counter-clockwise, which d3-geo reads as *the whole globe minus the polygon*, so every polygon floods the entire map and the real shape shows only as a sliver. Programmatically generated GeoJSON (grids, cells, buffers) is usually CCW. amCharts does **not** auto-rewind — reverse each ring yourself: `feature.geometry.coordinates = feature.geometry.coordinates.map(ring => ring.slice().reverse())` (for `MultiPolygon`, one level deeper). See `references/map.md`.
|
|
804
|
+
35. **`axis.dispose()` does NOT remove the axis from `chart.xAxes`/`chart.yAxes`** — unlike `series.dispose()`, which self-removes from `chart.series`. A disposed axis stays in the list, keeps showing up in anything built from `chart.yAxes`, and makes `ChartSerializer` throw `Template is disposed`. Remove axes with `chart.yAxes.removeValue(axis)` (or `removeIndex(i)`) — the list auto-disposes the removed axis, no separate `dispose()` needed.
|
|
805
|
+
36. **Declare bullet callbacks as `function(root, series, dataItem)`** — amCharts passes all three; closing over an outer `root` works at runtime but breaks JSON round-trips (`ChartSerializer` captures the function source, and the outer `root` dangles on re-bind). Every `series.bullets.push(...)` in these references uses the parameter form — copy it.
|
|
806
|
+
37. **A `ColorSet` must contain at least one color** — `colors.set("colors", [])` crashes the next `next()`/`getIndex()`. Swap in a fresh `am5.ColorSet.new(root, {})` instead. See "ColorSet" above.
|
|
724
807
|
|
|
725
808
|
## Easing functions
|
|
726
809
|
|
|
727
810
|
amCharts 5 easing functions live under `am5.ease`:
|
|
728
811
|
|
|
729
812
|
```js
|
|
730
|
-
// Base functions (ease-in by default):
|
|
813
|
+
// Base functions (ease-in by default) — these 8 are also the names `animations` / byName() accept:
|
|
731
814
|
am5.ease.linear am5.ease.quad am5.ease.cubic
|
|
732
815
|
am5.ease.sine am5.ease.circle am5.ease.exp
|
|
733
|
-
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)
|
|
734
820
|
|
|
735
821
|
// Modifiers — wrap a base function:
|
|
736
822
|
am5.ease.out(am5.ease.cubic) // ease-out
|
|
@@ -742,9 +828,13 @@ sprite.animate({
|
|
|
742
828
|
key: "y", to: 100, duration: 400,
|
|
743
829
|
easing: am5.ease.out(am5.ease.cubic)
|
|
744
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 }
|
|
745
835
|
```
|
|
746
836
|
|
|
747
|
-
**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.
|
|
748
838
|
|
|
749
839
|
## Validate generated code (if you can execute commands)
|
|
750
840
|
|
|
@@ -758,7 +848,7 @@ Skip this step entirely if you cannot execute code (e.g., chat-only context with
|
|
|
758
848
|
|
|
759
849
|
## Recent API changes (newer than the bundled class reference)
|
|
760
850
|
|
|
761
|
-
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).
|
|
762
852
|
|
|
763
853
|
**Renamed settings (old name still works but is deprecated — use the new one):**
|
|
764
854
|
|
|
@@ -775,8 +865,24 @@ am5hierarchy.VoronoiTreemap.new(root, { shapeType: "rectangle" }); // was: type
|
|
|
775
865
|
|
|
776
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.
|
|
777
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
|
+
|
|
778
876
|
**New settings / methods worth knowing:**
|
|
779
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
|
+
|
|
780
886
|
*Themes & styling*
|
|
781
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.
|
|
782
888
|
- New fill patterns (5.20.0): `am5.StarPattern` (`radius`, `innerRadius`, `spikes`, `gap`, `checkered`) and `am5.TrianglePattern` (`maxWidth`, `maxHeight`, `gap`, `checkered`).
|
|
@@ -787,6 +893,8 @@ am5hierarchy.VoronoiTreemap.new(root, { shapeType: "rectangle" }); // was: type
|
|
|
787
893
|
- `XYChart`: `strokeWidths` (array of pixel widths) and `strokeDasharrays` (array of dash arrays) — cycled across line series as they are added, exactly like `colors`. Lets series be told apart without relying on color, e.g. with the `Patterns` theme.
|
|
788
894
|
- `XYCursor`: `clickTolerance` (default `0`) — how many pixels outside the plot area a press may start and still begin a zoom/selection. The selection itself still starts at the plot edge.
|
|
789
895
|
- `XYSeries`: a value field (`valueYField`, `openValueYField`, …) can now be changed after creation — re-set the series data afterwards for it to take effect. A series can also be reassigned to a different `xAxis`/`yAxis` after creation.
|
|
896
|
+
- Column series (`ColumnSeries`, `CandlestickSeries`, `OHLCSeries`, …) (5.20.4): `colorByDataItem: true` (default `false`) gives each column its own color from the series' new `colors` (`ColorSet`) setting — the series makes its own `ColorSet` if none is given. The color lands on the data item's `fill` field. Prefer this over the old "adapter on `columns.template` `fill`" recipe: it is declarative and survives JSON serialization.
|
|
897
|
+
- `Scrollbar` (5.20.2): `opposite: true` (default `false`) puts a chart's `scrollbarX` **below** the plot and `scrollbarY` to the **left**, instead of above / right. Only affects scrollbars set via `chart.set("scrollbarX"/"scrollbarY", …)`. This is a **different** setting from the long-standing `opposite` on `AxisRendererX`/`AxisRendererY`.
|
|
790
898
|
|
|
791
899
|
*WordCloud (5.20.1)*
|
|
792
900
|
- `svgPath` arranges words into a shape (experimental), with `maskByShape` to clip them to the outline and `shapeTolerance` to control spill (negative = padding inside). See `references/wordcloud.md`.
|
|
@@ -799,8 +907,27 @@ am5hierarchy.VoronoiTreemap.new(root, { shapeType: "rectangle" }); // was: type
|
|
|
799
907
|
- `Root`: `ariaLabel` is now applied to the `<div>` holding the chart's focusable elements (5.20.0).
|
|
800
908
|
- `Label`: `oversizedBehavior: "truncate"` now ignores `maxHeight` (there is no way to truncate text vertically).
|
|
801
909
|
- A `Container`'s `Rectangle`/`RoundedRectangle` background now defaults `crisp` to `true` unless set explicitly (5.20.0).
|
|
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`.
|
|
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`.
|
|
912
|
+
|
|
913
|
+
*JSON config / serialization (5.20.2 – 5.20.8)*
|
|
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.
|
|
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).
|
|
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.
|
|
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.
|
|
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.
|
|
923
|
+
|
|
924
|
+
*Bullets on non-XY charts (5.20.2)*
|
|
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.
|
|
926
|
+
- A bullet `Graphics` with no paint of its own takes the color of **its own slice or node** on pie, funnel, flow and hierarchy charts — so it is the same color as what it sits on and **invisible** unless offset, stroked, or given a contrasting `fill` deliberately. Setting `fill` on the bullet sprite turns the inheritance off.
|
|
802
927
|
|
|
803
928
|
*Maps*
|
|
929
|
+
- `MapChart` (5.20.2): `doubleClickZoom` (default **`true`** — a behavior change: a double click/tap zooms in, shift + double click zooms out; set `false` to opt out). On maps panned by rotating (`panX: "rotateX"` / `panY: "rotateY"`) the clicked point rotates to the center, otherwise it stays under the pointer. `boxZoom: "none" | "drag" | "shift" | "ctrl" | "alt"` (default `"none"`) is **not a boolean** — it names the key held while dragging a rectangle to zoom into; `"drag"` needs no key, so pair it with `panX`/`panY: "none"`. The rectangle is the readonly `chart.boxZoomSelection` element (a `Rectangle`). There are no keyboard-navigation settings on `MapChart`.
|
|
930
|
+
- `MapLineSeries` (5.20.3): `pointIds` data field (`{ pointIds: ["JFK", "LAX"] }`) names the `MapPointSeries` points a line connects, looked up in the series given by the new `pointSeries` setting; `pointIdsField` (default `"pointIds"`) renames the field. `pointsToConnect` wins if both are set. See `references/map.md`.
|
|
804
931
|
- `MapChart`: `projectionName` (5.19.0) — string alternative to `projection`, e.g. `"geoOrthographic"`, mainly for JSON config. Register extra ones with `am5map.registerProjection()`. Bundled projections are no longer eagerly imported, so unused ones tree-shake away.
|
|
805
932
|
- `MapSankeySeries` (5.17.0) — Sankey overlaid on a map; auto-resolves `sourceId`/`targetId` once `polygonSeries` geoJSON loads (5.17.1), so no `datavalidated` wrapper needed. See `references/map.md`.
|
|
806
933
|
- `MapPointSeries` defaults changed to `longitudeField: "longitude"`, `latitudeField: "latitude"` (5.16.1).
|
|
@@ -816,6 +943,7 @@ am5hierarchy.VoronoiTreemap.new(root, { shapeType: "rectangle" }); // was: type
|
|
|
816
943
|
|
|
817
944
|
*All entities*
|
|
818
945
|
- `onDebounced(key, cb, delay)` / `offDebounced(key, cb?)` and `onPrivateDebounced` / `offDebouncedPrivate` (5.17.3) — fire once after rapid changes settle.
|
|
946
|
+
- `once(key, cb)` and `onceDebounced(key, cb, delay)` (5.20.4) — like `on()`/`onDebounced()` for a **settings** key, but the callback fires only the first time that setting changes, then removes itself. Both return an `IDisposer`. (Distinct from `events.once("eventName", …)`, which has existed for events all along.)
|
|
819
947
|
- `Label`: `fontFamily: "inherit"` (5.17.3) uses the chart container's computed font.
|
|
820
948
|
|
|
821
949
|
## Verify unfamiliar API before using it
|
package/content/flow.md
CHANGED
|
@@ -254,6 +254,12 @@ 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
|
+
|
|
259
|
+
## Bullets on nodes (5.20.2)
|
|
260
|
+
|
|
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.
|
|
262
|
+
|
|
257
263
|
## Animated bullets along links
|
|
258
264
|
|
|
259
265
|
Animated labels/circles that flow along Sankey or Chord links use `series.bullets.push()` — **NOT** `series.links.template.bullets.push()`. The bullet position (0 = source, 1 = target) is animated in a loop, and an adapter fades opacity based on position.
|
|
@@ -331,6 +337,7 @@ bullet.on("locationY", function() {
|
|
|
331
337
|
- Random duration per bullet creates natural asynchronous flow
|
|
332
338
|
- The opacity adapter formula `0.5 - Math.abs(0.5 - location)` gives a bell curve: invisible at edges, max at center
|
|
333
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
|
|
334
341
|
|
|
335
342
|
## Disposal
|
|
336
343
|
|
package/content/hierarchy.md
CHANGED
|
@@ -319,6 +319,27 @@ series.events.on("datavalidated", function() {
|
|
|
319
319
|
});
|
|
320
320
|
```
|
|
321
321
|
|
|
322
|
+
## Zoomable / pannable hierarchy — `SerialChartContainer` (5.20.2)
|
|
323
|
+
|
|
324
|
+
`am5.SerialChartContainer` (exported from the **`am5` root module**, not `am5hierarchy`) is a directly usable `SerialChart` whose `seriesContainer` sits inside a `ZoomableContainer`, so a large `ForceDirected`, `Tree` or `Pack` can be wheel-zoomed and dragged. Prefer it over hand-wrapping the chart in `am5.ZoomableContainer` — it also survives `ChartSerializer` round-trips, which a manual `ZoomableContainer` does not (its `contents` are not serialized).
|
|
325
|
+
|
|
326
|
+
```js
|
|
327
|
+
const chart = root.container.children.push(am5.SerialChartContainer.new(root, {
|
|
328
|
+
zoomTools: am5.ZoomTools.new(root, {}) // optional +/−/home buttons, target is wired automatically
|
|
329
|
+
}));
|
|
330
|
+
|
|
331
|
+
const series = chart.series.push(am5hierarchy.ForceDirected.new(root, {
|
|
332
|
+
valueField: "value",
|
|
333
|
+
categoryField: "name",
|
|
334
|
+
childDataField: "children"
|
|
335
|
+
}));
|
|
336
|
+
series.data.setAll(data);
|
|
337
|
+
|
|
338
|
+
chart.zoomableContainer.setAll({ maxZoomLevel: 8 }); // the ZoomableContainer holding the series
|
|
339
|
+
```
|
|
340
|
+
|
|
341
|
+
Bullets on series inside a `SerialChartContainer` are drawn as of 5.20.4, and flow-chart (`Sankey`/`Chord`/`ArcDiagram`) bullets are placed correctly inside one as of 5.20.5.
|
|
342
|
+
|
|
322
343
|
## Disposal
|
|
323
344
|
|
|
324
345
|
```js
|
package/content/map.md
CHANGED
|
@@ -123,6 +123,28 @@ polygonSeries.data.setAll([
|
|
|
123
123
|
]);
|
|
124
124
|
```
|
|
125
125
|
|
|
126
|
+
**Custom GeoJSON: exterior rings must be CLOCKWISE.** amCharts projects on a sphere (d3-geo), where a ring's winding order decides which side is "inside". The GeoJSON spec (RFC 7946) winds exterior rings counter-clockwise, and d3-geo reads a CCW ring as *the whole globe minus the polygon* — so every polygon fills the entire viewport and the real shape shows only as a sliver (looks like a zoom/fit bug, is not). GIS exports are usually already clockwise; programmatically generated GeoJSON (grids, cells, buffers) usually is not. amCharts does **not** auto-rewind, so reverse the rings yourself:
|
|
127
|
+
|
|
128
|
+
```js
|
|
129
|
+
// Fix winding before handing custom GeoJSON to MapPolygonSeries
|
|
130
|
+
geojson.features.forEach(function(feature) {
|
|
131
|
+
var g = feature.geometry;
|
|
132
|
+
if (g.type === "Polygon") {
|
|
133
|
+
g.coordinates = g.coordinates.map(function(ring) { return ring.slice().reverse(); });
|
|
134
|
+
} else if (g.type === "MultiPolygon") {
|
|
135
|
+
g.coordinates = g.coordinates.map(function(poly) {
|
|
136
|
+
return poly.map(function(ring) { return ring.slice().reverse(); });
|
|
137
|
+
});
|
|
138
|
+
}
|
|
139
|
+
});
|
|
140
|
+
polygonSeries.set("geoJSON", geojson);
|
|
141
|
+
|
|
142
|
+
// Fit the map to a custom region (no country geodata needed): left/right = longitude, top/bottom = latitude
|
|
143
|
+
chart.zoomToGeoBounds({ left: -8.6, right: 1.8, top: 60.9, bottom: 49.9 }, 500);
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
`zoomToGeoBounds(bounds, duration?)` is more reliable than `homeGeoPoint` + `homeZoomLevel` + `goHome()` when the only series is custom polygons.
|
|
147
|
+
|
|
126
148
|
### Choropleth (heat map) via heat rules
|
|
127
149
|
|
|
128
150
|
```js
|
|
@@ -145,6 +167,17 @@ const heatLegend = chart.children.push(am5.HeatLegend.new(root, {
|
|
|
145
167
|
}));
|
|
146
168
|
```
|
|
147
169
|
|
|
170
|
+
**Styling heat-legend segments.** With `stepCount: N` the legend draws N discrete `RoundedRectangle` markers inside `heatLegend.markerContainer`, all styled through `heatLegend.markers.template` (it accepts the usual Graphics settings — `stroke`, `strokeWidth`, `strokeOpacity`, `fillOpacity`, `cornerRadius*`, `tooltipText` for a per-block hover tooltip). Segment **thickness** is the marker's cross-axis size: a **vertical** legend uses the marker `width` (default `15`) with `height: 100%`; a **horizontal** legend uses `height` (default `15`) with `width: 100%`. Style via the template — `heatLegend.markers.values` can read empty even while `markerContainer.children` holds the rectangles.
|
|
171
|
+
|
|
172
|
+
```js
|
|
173
|
+
heatLegend.markers.template.setAll({
|
|
174
|
+
width: 30, // thicker bar on a vertical legend (use height on a horizontal one)
|
|
175
|
+
stroke: am5.color(0xffffff),
|
|
176
|
+
strokeWidth: 1,
|
|
177
|
+
tooltipText: "{value}"
|
|
178
|
+
});
|
|
179
|
+
```
|
|
180
|
+
|
|
148
181
|
### MapPointSeries (markers, bubbles, labels)
|
|
149
182
|
|
|
150
183
|
```js
|
|
@@ -156,7 +189,7 @@ const pointSeries = chart.series.push(
|
|
|
156
189
|
);
|
|
157
190
|
|
|
158
191
|
// Define bullet appearance
|
|
159
|
-
pointSeries.bullets.push(function() {
|
|
192
|
+
pointSeries.bullets.push(function(root, series, dataItem) {
|
|
160
193
|
return am5.Bullet.new(root, {
|
|
161
194
|
sprite: am5.Circle.new(root, {
|
|
162
195
|
radius: 5,
|
|
@@ -185,6 +218,8 @@ pointSeries2.data.setAll([
|
|
|
185
218
|
]);
|
|
186
219
|
```
|
|
187
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
|
+
|
|
188
223
|
### MapLineSeries (connections, routes)
|
|
189
224
|
|
|
190
225
|
```js
|
|
@@ -214,8 +249,24 @@ lineSeries.pushDataItem({
|
|
|
214
249
|
coordinates: [[-74.01, 40.71], [-0.45, 51.47]] // [lng, lat] pairs
|
|
215
250
|
}
|
|
216
251
|
});
|
|
252
|
+
|
|
253
|
+
// OR (5.20.3) name the points by id — data-driven, JSON-friendly, no data-item references needed
|
|
254
|
+
const pointSeries2 = chart.series.push(am5map.MapPointSeries.new(root, {})); // ids come from the "id" data field
|
|
255
|
+
pointSeries2.data.setAll([
|
|
256
|
+
{ id: "JFK", latitude: 40.64, longitude: -73.78 },
|
|
257
|
+
{ id: "LAX", latitude: 33.94, longitude: -118.41 }
|
|
258
|
+
]);
|
|
259
|
+
const lineSeries2 = chart.series.push(am5map.MapLineSeries.new(root, {
|
|
260
|
+
pointSeries: pointSeries2 // where pointIds are looked up
|
|
261
|
+
// pointIdsField: "pointIds" // default field name
|
|
262
|
+
}));
|
|
263
|
+
lineSeries2.data.setAll([
|
|
264
|
+
{ pointIds: ["JFK", "LAX"] } // the line waits until every id has a point, then draws
|
|
265
|
+
]);
|
|
217
266
|
```
|
|
218
267
|
|
|
268
|
+
`pointsToConnect` wins if a data item has both. Fixed points (`fixed: true`) cannot be used with either.
|
|
269
|
+
|
|
219
270
|
### MapSankeySeries (geographic flow bands)
|
|
220
271
|
|
|
221
272
|
Draws variable-width curved bands between geographic points on a map. Band thickness represents a numeric value — like a Sankey diagram projected onto a map. Extends `MapPolygonSeries` and generates actual GeoJSON polygon geometries, so bands follow the map projection during pan, zoom, and rotation.
|
|
@@ -365,7 +416,7 @@ var sankeySeries = chart.series.push(
|
|
|
365
416
|
#### Animated bullets along bands
|
|
366
417
|
|
|
367
418
|
```js
|
|
368
|
-
sankeySeries.bullets.push(function() {
|
|
419
|
+
sankeySeries.bullets.push(function(root, series, dataItem) {
|
|
369
420
|
return am5.Bullet.new(root, {
|
|
370
421
|
locationX: 0,
|
|
371
422
|
autoRotate: true,
|
|
@@ -415,12 +466,12 @@ sankeySeries.data.setAll([
|
|
|
415
466
|
|
|
416
467
|
### Animating bullets along lines (positionOnLine)
|
|
417
468
|
|
|
418
|
-
`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.
|
|
419
470
|
|
|
420
471
|
```js
|
|
421
472
|
// Create a point that follows a line
|
|
422
473
|
var planeSeries = chart.series.push(am5map.MapPointSeries.new(root, {}));
|
|
423
|
-
planeSeries.bullets.push(function() {
|
|
474
|
+
planeSeries.bullets.push(function(root, series, dataItem) {
|
|
424
475
|
return am5.Bullet.new(root, {
|
|
425
476
|
sprite: am5.Graphics.new(root, {
|
|
426
477
|
svgPath: "m2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34 0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47",
|
|
@@ -447,6 +498,30 @@ plane.on("positionOnLine", function(pos) {
|
|
|
447
498
|
});
|
|
448
499
|
```
|
|
449
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
|
+
|
|
450
525
|
**IMPORTANT — Multi-segment lines and `positionOnLine`:**
|
|
451
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.
|
|
452
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.
|
|
@@ -471,6 +546,19 @@ chart.chartContainer.children.push(am5.Button.new(root, {
|
|
|
471
546
|
})).events.on("click", function() {
|
|
472
547
|
chart.goHome();
|
|
473
548
|
});
|
|
549
|
+
|
|
550
|
+
// Fit to a lat/long box (left/right = longitude, top/bottom = latitude)
|
|
551
|
+
chart.zoomToGeoBounds({ left: -10, right: 40, top: 70, bottom: 35 }, 800);
|
|
552
|
+
```
|
|
553
|
+
|
|
554
|
+
**Pointer zoom behaviors (5.20.2):** a double click/tap zooms in and shift + double click zooms out **by default** (`doubleClickZoom: true`; set `false` to turn it off). `boxZoom` lets the user drag a rectangle to zoom into — its value is the key that must be held: `"shift"`, `"ctrl"`, `"alt"`, or `"drag"` for no key (then set `panX`/`panY: "none"`, since a plain drag otherwise pans); default `"none"`. The rectangle being drawn is `chart.boxZoomSelection` (a `Rectangle`, style its `fill`/`stroke`).
|
|
555
|
+
|
|
556
|
+
```js
|
|
557
|
+
am5map.MapChart.new(root, {
|
|
558
|
+
boxZoom: "shift", // hold shift and drag to zoom into the box
|
|
559
|
+
doubleClickZoom: false // opt out of the default double-click zoom
|
|
560
|
+
});
|
|
561
|
+
chart.boxZoomSelection.setAll({ fill: am5.color(0x1e88e5), fillOpacity: 0.15 });
|
|
474
562
|
```
|
|
475
563
|
|
|
476
564
|
## Globe (orthographic projection)
|
|
@@ -552,6 +640,8 @@ am5map.MapChart.new(root, {
|
|
|
552
640
|
rotationZ: 0, // tilt
|
|
553
641
|
wheelY: "zoom", // "zoom", "none"
|
|
554
642
|
wheelSensitivity: 1, // zoom speed multiplier
|
|
643
|
+
doubleClickZoom: true, // (5.20.2) double click zooms in, shift+double click out — default true
|
|
644
|
+
boxZoom: "none", // (5.20.2) "none" | "drag" | "shift" | "ctrl" | "alt" — key held to drag a zoom box
|
|
555
645
|
})
|
|
556
646
|
```
|
|
557
647
|
|
|
@@ -580,8 +670,16 @@ pointSeries.bullets.push(function(root, series, dataItem) {
|
|
|
580
670
|
chart.on("zoomLevel", function(zoomLevel) {
|
|
581
671
|
console.log("Zoom:", zoomLevel);
|
|
582
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" }]);
|
|
583
679
|
```
|
|
584
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
|
+
|
|
585
683
|
## Disposal
|
|
586
684
|
|
|
587
685
|
```js
|
|
@@ -783,7 +881,7 @@ root.dispose();
|
|
|
783
881
|
|
|
784
882
|
// Point series for airports
|
|
785
883
|
var pointSeries = chart.series.push(am5map.MapPointSeries.new(root, {}));
|
|
786
|
-
pointSeries.bullets.push(function() {
|
|
884
|
+
pointSeries.bullets.push(function(root, series, dataItem) {
|
|
787
885
|
return am5.Bullet.new(root, {
|
|
788
886
|
sprite: am5.Circle.new(root, {
|
|
789
887
|
radius: 4,
|
|
@@ -895,7 +993,7 @@ Demonstrates: orthographic projection, single-segment lines for per-segment anim
|
|
|
895
993
|
|
|
896
994
|
// City points with pulse + label
|
|
897
995
|
var pointSeries = chart.series.push(am5map.MapPointSeries.new(root, {}));
|
|
898
|
-
pointSeries.bullets.push(function
|
|
996
|
+
pointSeries.bullets.push(function(root, series, dataItem) {
|
|
899
997
|
var container = am5.Container.new(root, {});
|
|
900
998
|
container.children.push(am5.Circle.new(root, {
|
|
901
999
|
radius: 3.5, fill: cityColor, fillOpacity: 0.9,
|
|
@@ -932,7 +1030,7 @@ Demonstrates: orthographic projection, single-segment lines for per-segment anim
|
|
|
932
1030
|
|
|
933
1031
|
// Plane series — one per segment, all hidden initially
|
|
934
1032
|
var planeSeries = chart.series.push(am5map.MapPointSeries.new(root, {}));
|
|
935
|
-
planeSeries.bullets.push(function
|
|
1033
|
+
planeSeries.bullets.push(function(root, series, dataItem) {
|
|
936
1034
|
return am5.Bullet.new(root, {
|
|
937
1035
|
sprite: am5.Graphics.new(root, {
|
|
938
1036
|
svgPath: "m2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34 0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47",
|
|
@@ -1201,7 +1299,7 @@ Demonstrates: `MapSankeySeries` with `sourceId`/`targetId` data (country codes),
|
|
|
1201
1299
|
});
|
|
1202
1300
|
|
|
1203
1301
|
// Animated coffee bean bullets
|
|
1204
|
-
sankeySeries.bullets.push(function() {
|
|
1302
|
+
sankeySeries.bullets.push(function(root, series, dataItem) {
|
|
1205
1303
|
return am5.Bullet.new(root, {
|
|
1206
1304
|
locationX: 0,
|
|
1207
1305
|
autoRotate: true,
|
|
@@ -1492,7 +1590,7 @@ Demonstrates: `MapSankeySeries` with explicit `sourceLongitude`/`sourceLatitude`
|
|
|
1492
1590
|
});
|
|
1493
1591
|
|
|
1494
1592
|
// Animated oil drop bullets
|
|
1495
|
-
sankeySeries.bullets.push(function() {
|
|
1593
|
+
sankeySeries.bullets.push(function(root, series, dataItem) {
|
|
1496
1594
|
return am5.Bullet.new(root, {
|
|
1497
1595
|
locationX: 0,
|
|
1498
1596
|
autoRotate: true,
|
package/content/pie.md
CHANGED
|
@@ -260,6 +260,22 @@ am5percent.PictorialStackedSeries.new(root, {
|
|
|
260
260
|
})
|
|
261
261
|
```
|
|
262
262
|
|
|
263
|
+
## Bullets on slices
|
|
264
|
+
|
|
265
|
+
```js
|
|
266
|
+
series.bullets.push(function(root, series, dataItem) {
|
|
267
|
+
return am5.Bullet.new(root, {
|
|
268
|
+
locationX: 0.5, locationY: 0.5, // fractions of the slice (funnel/pyramid: along the sloping edges since 5.20.2)
|
|
269
|
+
sprite: am5.Circle.new(root, {
|
|
270
|
+
radius: 6,
|
|
271
|
+
fill: am5.color(0xffffff) // set a paint — an unpainted bullet takes its own slice's color and is invisible
|
|
272
|
+
})
|
|
273
|
+
});
|
|
274
|
+
});
|
|
275
|
+
```
|
|
276
|
+
|
|
277
|
+
Percent series have **no series-level `fill`**: a bullet `Graphics` with no `fill`/`stroke` is auto-colored per data item from its own slice (5.20.0+), so it blends in unless stroked, offset, or given a contrasting fill. Slice tooltips need no `am5.Tooltip` instance — `series.slices.template.set("tooltipText", "{category}: {value}")` uses the root's shared tooltip.
|
|
278
|
+
|
|
263
279
|
## Legend (for all percent charts)
|
|
264
280
|
|
|
265
281
|
```js
|
|
@@ -330,8 +346,14 @@ series.slices.template.events.on("pointerover", function(ev) {
|
|
|
330
346
|
series.slices.template.events.on("pointerout", function(ev) {
|
|
331
347
|
ev.target.set("scale", 1);
|
|
332
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"
|
|
333
353
|
```
|
|
334
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
|
+
|
|
335
357
|
## Disposal
|
|
336
358
|
|
|
337
359
|
```js
|
package/content/radar.md
CHANGED
|
@@ -286,7 +286,7 @@ columnSeries.columns.template.events.on("click", function(ev) {
|
|
|
286
286
|
});
|
|
287
287
|
|
|
288
288
|
// Pointer over/out on radar line data points (via bullets)
|
|
289
|
-
series.bullets.push(function() {
|
|
289
|
+
series.bullets.push(function(root, series, dataItem) {
|
|
290
290
|
var circle = am5.Circle.new(root, {
|
|
291
291
|
radius: 5,
|
|
292
292
|
fill: series.get("fill"),
|