amCharts 5 examples
===================

One folder is one example. `index.ts` is the whole chart, with its data in the
code. Where there is a `config.json`, it is the same chart as a JSON config;
`data.json` is there only when the data is long.

`examples.json` has this list as data: title, description, category, tags, the
modules each example imports, and its files.

These are sources, not projects: there is nothing to install or build in this
folder (except `jest/`, which shows a test setup and has its own
`package.json`). The gallery that runs them is in the amCharts 5 download
(https://www.amcharts.com/download/) and at https://www.amcharts.com/demos/.

Running one
-----------

In a project with a bundler and TypeScript (Vite, webpack, Angular, Next.js):

1. `npm install @amcharts/amcharts5`, and `@amcharts/amcharts5-geodata` for a map.
2. Put an element on the page for the chart, with a height:
   `<div id="chartdiv" style="width: 100%; height: 500px"></div>`
3. Copy the example's folder into the project and import its `index.ts` once
   the element exists. Most examples are that one file; `files` in
   `examples.json` lists what each one has. What an example loads while it
   runs, such as `icons/`, has to be served beside the page.

In a component (React, Vue, Angular), create the chart when the component is
mounted and call `root.dispose()` when it is removed.

A chart from its JSON config
----------------------------

```ts
import * as am5 from "@amcharts/amcharts5";
import * as am5plugins_json from "@amcharts/amcharts5/plugins/json";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
import config from "./config.json";

const root = am5.Root.new("chartdiv");

root.setThemes([
  am5themes_Animated.new(root)
]);

am5plugins_json.JsonParser.new(root).parse(config, {
  parent: root.container
});
```

In a config, `type` is the class to create and `settings` are what you would
pass to its `new()` in code. `properties` fill in its parts: lists such as
`series` and `axes`, or templates such as `columns.template`. `refs` holds
objects used in more than one place, and `"#series-0"` stands for the one named
`series-0`. A string starting with `@` takes a value from another object, such
as `"@series.get('fill')"`. More: https://www.amcharts.com/docs/v5/concepts/serializing/

Themes are not part of a config: set the ones the example's `index.ts` sets. A
map config names its geodata by its global name, so make it one first:

```ts
import am5geodata_worldLow from "@amcharts/amcharts5-geodata/worldLow";

(window as any).am5geodata_worldLow = am5geodata_worldLow;
```

Where `examples.json` has a `jsonNote` for an example, its JSON config is a
similar chart, not the same one, and the note says what the code adds.

XY
--

| Example | What it shows | JSON |
|---|---|---|
| [`xy-100-percent-stacked-column`](xy-100-percent-stacked-column/index.ts) | **100% Stacked Column Chart.** Stacked columns shown as shares of each category's total, using valueYShow and calculateTotals. | yes |
| [`xy-bubble`](xy-bubble/index.ts) | **Bubble Chart.** Countries as bubbles on two value axes, sized by a heat rule and colored per data row through templateField. | yes |
| [`xy-candlestick`](xy-candlestick/index.ts) | **Candlestick Chart.** Daily open, high, low and close prices as candles on a date axis; OHLCSeries takes the same settings. | yes |
| [`xy-clustered-column`](xy-clustered-column/index.ts) | **Clustered Column Chart.** Several column series side by side in each category, with value labels and a legend. | yes |
| [`xy-column`](xy-column/index.ts) | **Column Chart with Date Axis.** A column series of daily values on a date axis, with a cursor, a scrollbar and zoom. | yes |
| [`xy-dumbbell-plot`](xy-dumbbell-plot/index.ts) | **Dumbbell Plot.** A range per category drawn as a thin column from the open value to the close value, with a bullet at each end. | yes |
| [`xy-gapless-date-axis`](xy-gapless-date-axis/index.ts) | **Gapless Date Axis.** A line of weekday values on a GaplessDateAxis, which leaves out the weekends so the points stay evenly spaced. | yes |
| [`xy-line`](xy-line/index.ts) | **Line Chart with Date Axis.** A line series on a date axis, with a cursor, a scrollbar and zoom. | yes |
| [`xy-smoothed-line`](xy-smoothed-line/index.ts) | **Smoothed Line Chart.** A smoothed line series with a fill and bullets on a date axis. | yes |
| [`xy-stacked-and-clustered-column`](xy-stacked-and-clustered-column/index.ts) | **Stacked and Clustered Columns.** Column series where some are stacked and some start a new cluster, set per series with the stacked setting. | yes |
| [`xy-stacked-column`](xy-stacked-column/index.ts) | **Stacked Column Chart.** Six column series stacked on a category axis, with value labels and a legend. | yes |
| [`xy-stacked-step`](xy-stacked-step/index.ts) | **Stacked Step Line Chart.** Two step line series with fills, one stacked on the other, on a date axis. | yes |
| [`xy-comparing-periods`](xy-comparing-periods/index.ts) | **Comparing Two Periods.** This period as a solid line and the previous one as a dashed line on the same dates, with one tooltip showing both values. | yes |
| [`xy-data-grouping`](xy-data-grouping/index.ts) | **Data Grouping on a Date Axis.** A line of 50,000 hourly values that stays responsive because the date axis groups them into longer periods with groupData. |  |
| [`xy-draggable-range`](xy-draggable-range/index.ts) | **Draggable Range.** A handle on the date axis that the user drags to move an axis range; the part of the series after it is drawn in another color with a pattern fill. |  |
| [`xy-drawing-series`](xy-drawing-series/index.ts) | **Drawing a Series.** Clicking the plot area adds a point to a line series and its bullets can be dragged, by turning pointer coordinates into axis values. |  |
| [`xy-line-highlight-on-legend-hover`](xy-line-highlight-on-legend-hover/index.ts) | **Highlight Line on Legend Hover.** Ten line series with a legend at the side; hovering a legend item dims all the other lines, done with events on the legend item template. |  |
| [`xy-live-data`](xy-live-data/index.ts) | **Live Data.** A line that gets a new point every second and drops its oldest one, with the new point animated in from the last. |  |
| [`xy-multiple-synced-value-axes`](xy-multiple-synced-value-axes/index.ts) | **Multiple Synced Value Axes.** Three line series with a value axis each, colored like their series, with the grids lined up by syncWithAxis. | yes |
| [`xy-percent-change-comparison`](xy-percent-change-comparison/index.ts) | **Percent Change Comparison.** Two price series shown as percent change from the start of the zoomed range, so they can be compared, with a volume panel on a second, stacked Y axis. | yes |
| [`xy-pulsing-last-bullet`](xy-pulsing-last-bullet/index.ts) | **Pulsing Last Bullet.** A line whose last point has a pulsing bullet, switched on for one data item with templateField and animated with the animations setting. | yes |
| [`xy-real-time-data-sorting`](xy-real-time-data-sorting/index.ts) | **Real-Time Data Sorting.** Columns whose values change on a timer and that slide to their new places as the category axis is sorted again. |  |

Pie and sliced
--------------

| Example | What it shows | JSON |
|---|---|---|
| [`pie-donut-chart`](pie-donut-chart/index.ts) | **Donut Chart.** A pie chart made into a donut with an inner radius, with a legend below it. | yes |
| [`sliced-funnel`](sliced-funnel/index.ts) | **Funnel Chart.** A funnel series in a sliced chart, with labels on the slices and a legend. | yes |
| [`sliced-pictorial-stacked`](sliced-pictorial-stacked/index.ts) | **Pictorial Stacked Chart.** A pictorial stacked series: slices fill an SVG shape in proportion to their values. | yes |
| [`pie-chart`](pie-chart/index.ts) | **Pie Chart.** A pie chart with a legend below it. | yes |
| [`sliced-pyramid`](sliced-pyramid/index.ts) | **Pyramid Chart.** A pyramid series in a sliced chart, with aligned labels and a legend. | yes |
| [`pie-variable-radius`](pie-variable-radius/index.ts) | **Pie Chart with Variable Radius.** A pie chart where each slice's radius follows its value, set by an adapter on the slice template. |  |

Map
---

| Example | What it shows | JSON |
|---|---|---|
| [`map-day-and-night`](map-day-and-night/index.ts) | **Day and Night Map.** A world map with a NightSeries that shades where it is night right now and shows the sun. | yes |
| [`map-globe-with-projected-circles`](map-globe-with-projected-circles/index.ts) | **Globe with Projected Circles.** Population by country as circles that lie on the surface of a globe and flatten towards its edge, sized by a heat rule, with surfaceBullets. | yes |
| [`map-altitude-arcs`](map-altitude-arcs/index.ts) | **Globe with Raised Arcs.** Flight routes between cities on a globe, drawn as lines that rise above the surface in an arc with the altitude setting. | yes |
| [`map-surface-bullets`](map-surface-bullets/index.ts) | **Globe with Surface Bullets.** City pins that lie on the surface of a globe and flatten towards its edge, using the surfaceBullets setting of MapPointSeries. | yes |
| [`map-sankey`](map-sankey/index.ts) | **Map Sankey.** Flows between countries drawn as bands on a map with MapSankeySeries, each band as wide as its value. | yes |
| [`map-with-bubbles`](map-with-bubbles/index.ts) | **Map with Bubbles.** Bubbles placed on countries by their id, with heat rules setting each bubble's size and color from its value. | yes |
| [`map-auto-home`](map-auto-home/index.ts) | **Map with Home Position.** A map that opens zoomed in on Europe, using the home settings and autoHome, with a home button to return there. | yes |
| [`map-pixel-map`](map-pixel-map/index.ts) | **Pixel Map.** A world map drawn as a grid of dots with PixelMapSeries, with countries colored by value using heat rules. | yes |
| [`map-satellite-day-and-night`](map-satellite-day-and-night/index.ts) | **Satellite Day and Night Map.** A flat map that shows a daytime satellite image where the sun is up right now and city lights where it is night, with MapRasterSeries. The images load from the amCharts CDN, so it needs an internet connection. | yes |
| [`map-satellite-globe`](map-satellite-globe/index.ts) | **Satellite Image Globe.** A slowly turning globe that shows a satellite image with MapRasterSeries, with country borders drawn over it. The image loads from the amCharts CDN, so it needs an internet connection. | yes |
| [`map-us-heat-map`](map-us-heat-map/index.ts) | **US Heat Map.** US states colored by value on a red, yellow and green scale, with heat rules and a heat legend that take several colors. | yes |
| [`map-animating-along-lines`](map-animating-along-lines/index.ts) | **Animating Along Lines.** A plane flies back and forth along a line between two cities, moved by the animations setting of its bullet. | yes |
| [`map-clustered-points`](map-clustered-points/index.ts) | **Clustered Map Points.** City markers that merge into clusters with a count when they are close together; clicking a cluster zooms in on its cities. | similar |
| [`map-globe-rotate-to-country`](map-globe-rotate-to-country/index.ts) | **Globe Rotating to a Country.** A globe that turns and zooms to the clicked country, and back when it is clicked again or the water is clicked: clickZoom on a map that pans by rotating. | yes |
| [`map-zoom-to-country`](map-zoom-to-country/index.ts) | **Zoom to Country.** Click a country to zoom in on it; click it again, the water or the home button to zoom back out. One setting, clickZoom, does it. | yes |
| [`map-sankey-waypoints`](map-sankey-waypoints/index.ts) | **Map Sankey with Waypoints.** Oil routes on a globe: MapSankeySeries flows between coordinates, bent through waypoints to stay at sea, with a bullet travelling along each one. | similar |

Stock
-----

| Example | What it shows | JSON |
|---|---|---|
| [`stock-chart-comparing-stocks`](stock-chart-comparing-stocks/index.ts) | **Comparing Stocks.** A stock chart with a comparison control and a searchable dropdown: picked stocks are added with addComparingSeries() and the chart switches to percent change. |  |
| [`stock-chart-live`](stock-chart-live/index.ts) | **Live Stock Chart.** A candlestick chart that gets a new price every second: the last candle is updated or a new one is added, and an axis range follows the current value. |  |
| [`stock-chart-data-granularity`](stock-chart-data-granularity/index.ts) | **Stock Chart Data Granularity.** A stock chart with an interval control that swaps minute, day, week and month data and sets the matching base interval on the date axis. |  |
| [`stock-chart-data-grouping`](stock-chart-data-grouping/index.ts) | **Stock Chart Data Grouping.** Three years of daily prices on a date axis with groupData, which shows them as weekly candlesticks when zoomed out and as daily ones when zoomed in. |  |
| [`stock-chart-volume-separate-panel`](stock-chart-volume-separate-panel/index.ts) | **Stock Chart with Volume Panel.** A stock chart that shows volume in a second panel, which has its own axes, legend and cursor and stays in sync with the main one. |  |
| [`stock-chart`](stock-chart/index.ts) | **Stock Chart.** A stock chart with candlesticks, volume, a scrollbar with a preview, a legend and a toolbar for indicators, periods, series type and drawing. |  |

Hierarchy
---------

| Example | What it shows | JSON |
|---|---|---|
| [`hierarchy-pack`](hierarchy-pack/index.ts) | **Circle Pack.** A pack chart: nested data as circles inside circles, sized by value, where a click opens the next level. | yes |
| [`hierarchy-force-directed`](hierarchy-force-directed/index.ts) | **Force-Directed Tree.** A force-directed tree: nested data as linked circles that arrange themselves and open on click. | yes |
| [`hierarchy-partition`](hierarchy-partition/index.ts) | **Partition Chart.** A partition chart: every level of nested data as a column of rectangles sized by value. | yes |
| [`hierarchy-sunburst`](hierarchy-sunburst/index.ts) | **Sunburst Chart.** A sunburst: nested data as rings of slices, one ring per level. | yes |
| [`hierarchy-tree`](hierarchy-tree/index.ts) | **Tree Chart.** A tree chart: nested data as linked nodes laid out level by level. | yes |
| [`hierarchy-treemap`](hierarchy-treemap/index.ts) | **Treemap with Breadcrumbs.** A treemap that drills into a branch on click, with a breadcrumb bar to go back up. | yes |
| [`hierarchy-voronoi-treemap`](hierarchy-voronoi-treemap/index.ts) | **Voronoi Treemap.** World population as a Voronoi treemap, with theme rules that style each level and a click that zooms to a continent. | similar |

Flow
----

| Example | What it shows | JSON |
|---|---|---|
| [`flow-arc-diagram`](flow-arc-diagram/index.ts) | **Arc Diagram.** An arc diagram: nodes in a row, sized by their total, with arcs for the links between them and a label under each node. | yes |
| [`flow-chord`](flow-chord/index.ts) | **Chord Diagram.** A chord diagram where ribbons between the nodes show how much flows each way. | yes |
| [`flow-chord-directed`](flow-chord-directed/index.ts) | **Directed Chord Diagram.** A chord diagram whose links end in arrowheads, so each one shows its direction. | yes |
| [`flow-sankey`](flow-sankey/index.ts) | **Sankey Diagram.** A Sankey diagram: nodes in columns and links whose width shows how much flows between them. | yes |
| [`flow-chord-non-ribbon`](flow-chord-non-ribbon/index.ts) | **Chord Diagram with Moving Bullets.** A chord diagram with thin line links, nodes drawn as circle bullets, and a circle travelling along every link. | similar |

Radar and gauges
----------------

| Example | What it shows | JSON |
|---|---|---|
| [`gauge`](gauge/index.ts) | **Gauge with Clock Hand.** A gauge made from a radar chart: a half-circle value axis and a clock hand that points at a value. | yes |
| [`radar-line`](radar-line/index.ts) | **Radar Line Chart.** A line series with bullets on a radar chart, with a category axis around the circle and a cursor. | yes |
| [`gauge-bands`](gauge-bands/index.ts) | **Gauge with Bands.** A gauge with labelled color bands, where the hand and the value label take the color of the band the hand is in. | similar |
| [`radar-date-range-columns`](radar-date-range-columns/index.ts) | **Radar Date Range Columns.** Rounded radar columns that span date ranges on a circular date axis, with a ring for each category. | yes |
| [`radar-heat-map`](radar-heat-map/index.ts) | **Radar Heat Map.** A heat map on a radar chart, hours around the circle and weekdays as rings, with a heat legend that shows the value of the hovered cell. | similar |
| [`radar-time-line`](radar-time-line/index.ts) | **Radar Timeline with Slider.** Radar columns that animate through the years with a play button and a slider, and continent ranges that zoom in when clicked. |  |

Timeline
--------

| Example | What it shows | JSON |
|---|---|---|
| [`timeline-serpentine-chart`](timeline-serpentine-chart/index.ts) | **Serpentine Timeline.** A serpentine chart: tasks as columns along a date axis that winds back and forth, with a circle at each end of a task and flags for events. | yes |
| [`timeline-spiral-chart`](timeline-spiral-chart/index.ts) | **Spiral Chart.** A spiral chart: three years of monthly values as columns along a date axis that winds outwards, with a value axis across it. | yes |
| [`timeline-linear-process-diagram`](timeline-linear-process-diagram/index.ts) | **Timeline on a Custom Path.** A day as a timeline that follows a hand-made path: a curve chart whose axis runs along a list of points, with an icon pin on every activity. | yes |

Gantt
-----

| Example | What it shows | JSON |
|---|---|---|
| [`gantt-simple`](gantt-simple/index.ts) | **Gantt Chart.** A Gantt chart with a flat list of linked tasks. | yes |
| [`gantt-multilevel`](gantt-multilevel/index.ts) | **Gantt Chart with Subtasks.** A Gantt chart with parent tasks and subtasks, set up with parentId in the category data. | yes |
| [`gantt-save-state`](gantt-save-state/index.ts) | **Gantt Chart That Saves Edits.** A Gantt chart that keeps the user's edits and marked dates in localStorage and restores them on the next visit. |  |

Other
-----

| Example | What it shows | JSON |
|---|---|---|
| [`svg-renderer`](svg-renderer/index.ts) | **SVG Renderer.** A column chart drawn as SVG instead of canvas, by choosing the renderer when the root element is created. |  |
| [`venn-diagram`](venn-diagram/index.ts) | **Venn Diagram.** Three overlapping circles and their intersections, with a legend. | yes |
| [`wordcloud-with-data`](wordcloud-with-data/index.ts) | **Word Cloud from Data.** A word cloud made from a list of words with weights, colored by weight with a heat rule. | yes |
| [`wordcloud-with-text`](wordcloud-with-text/index.ts) | **Word Cloud from Text.** A word cloud made from a paragraph of text: the series counts the words and sizes them by how often they are used. | yes |
| [`misc-chart-element`](misc-chart-element/index.ts) | **Chart as an HTML Element.** The <am5-chart> element builds a chart from a JSON config, with no root and no chart code: for pages, frameworks and tools where writing chart code is not the point. |  |
| [`json-config`](json-config/index.ts) | **Chart from a JSON Config.** A pie chart built by passing a JSON config to JsonParser, with refs for its data and series. |  |
| [`misc-microchart-grid`](misc-microchart-grid/index.ts) | **Micro Charts in a Table.** A table with a tiny line chart and a tiny column chart in every row, each in its own root with the Micro theme. |  |
| [`jest`](jest/index.ts) | **Testing with Jest.** A project set up to run Jest tests against a chart, in the jsdom environment. |  |