Tutorials & Demos

All chartsForce DirectedFunnelGaugeMapsPieRadarStockTreemapWord CloudXY

• A custom "heat legend" using a gradient

  This demo adds a Container element with a gradient-filled rectangle and some labels to create a custom "heat legend" using multi-color steps.

• A Treemap with images on hover

  This demo shows how we can add custom images to be displayed in a Treemap nodes on hover.

• Adaptive label colors on a Treemap

  This demo shows how we can use adapters to automatically color Treemap labels so they standout over node background.

• Adaptive label placement based on available space

  This demo uses both CSS media queries as well as Responsive theme to automatically resize the chart and reposition the labels, for small screens.

• Adaptively changing tooltip orientation based on column valueDemo

  This demo shows how we can use an adapter to change the orientation of a ColumnSeries tooltip based on the column value.

  XY
• Adaptively-rounded corners on mixed column stacks

  This demo shows how adapters can be used to apply custom fuzzy logic to rounded corners on column stacks.

• Adding amCharts to Squarespace

  This tutorial will show how we can easily add an amCharts 5 chart to a Squarespace page.

• Adding axis ranges to a legendDemo

  Axis ranges are data items, so they can be added directly to a Legend data. This demo shows how we can also enhance that capability to replicate axis range appearance in legend markers with custom template setup function.

  XY
• Adding check marks to legend markers

  This tutorial will walk through the steps needed to turn legend markers into checkboxes.

• Adding custom buttons to Exporting Menu

  This demo shows how we can push custom HTML elements into top level of exporting menu.

• Adding sum labels inside Donut chart

  This tutorial will show how we can add labels inside a Donut series, make them display dynamic info, such as sum of values of all slices, as well resize dynamically to comfortably fit within inner section of a chart.

  Pie
• Adding tooltips to Volume Profile IndicatorDemo

  Normally, Volume Profile Indicator (as any other indicator) would display its hover data in a legend. This demo shows how we can create a custom theme to make tooltips pop up when directly hovering indicator's bars.

  Stock
• Adding watermarks to charts

  This short tutorial will explain how we can add various types of information as a watermark on charts.

• Adding words to existing WordCloud

  This demo shows how we can push additional words into existing WordCloud.

• Adding XY series dynamically

  This demo shows how series can be added on an XY chart dynamically.

• Additional axis tooltip to display totals

  This demo shows how we can add an additional date axis on top of the chart to show a tooltip with sum of values of all series. The tooltip uses an adapter to dynamically calculate its content.

  XY
• Aggregating multiple data items into a single tooltip of the data items with same X/Y

  This demo shows how we can use an adapter on a series tooltip to automatically aggregate information from multiple data items width same x/y coordinates on a bubble chart.

  XY
• Align legend width plot area

  This demo shows how we can use events to set legend's dx setting, to automatically align it to the left side of the chart's plot container.

• Aligning a legend with plot container

  This demo shows how we can use axis' events to monitor its width, and automatically adjust position of the legend, so it is aligned perfectly with the plot area.

• Aligning axis range labels

  Labels of an axis range are shown on the axis itself by default. This demo shows how we can put them on the opposite side of the plot area, or within it.

  XY
• Applying active state / highlighting all columns in a stack

  This demo shows how we can apply "active" state to all of the columns in a stack when one of them is clicked.

• Applying custom formatting logic to PieChart legend values

  This demo shows how we can use adapters to apply custom formatting logic to legend labels based on their value.

• Applying custom hover/active states on legend markersDemo

  This demo shows how we can define custom states on legend markers to override default hover and active colors.

  All charts
• Applying individual styles for Force-directed links

  This tutorial will show how we can use adapters to style each link in a Force-directed chart individually.

  Force Directed
• Auto-adjusting chart height based on a number of data items

  This tutorial will explain how you can easily make your chart grow or contract based on an actual number of data.

• Auto-exporting a WordCloudDemo

  This demo shows how to automatically export WordCloud chart when it is finished drawing.

  Word Cloud
• Auto-wrapping category axis labels

  This demo shows how we can use an adapter and oversizeBehavior on labels of a category axis, to make the auto-wrap automatically.

• Auto-wrapping legend labels

  This demo shows how we can use auto-wrapping on legend labels.

• Auto-zooming a chart with a value axis on both X and Y

  If the chart has a ValueAxis as both of its axes, it would not auto-zoom vertically when panned/zoomed. It's by design. This demo shows how to implement this functionality.

  XY
• Automatically adjust maximum width of PieChart labels base on available spaceDemo

  This demo shows how we can use events to automatically update maxWidth for truncated slices labels to fit into available space.

  Pie
• Automatically adjust width of a PieChart legend

  This demo shows how we can watch for chart size change to automatically adjust legend width so it takes up all the empty space.

• Automatically adjust X-axis tooltip color based on series change value

  This demo shows how we can use an adapter to adaptively color X-axis tooltip based on series tooltip color, which in turn is based on whether specific data item has a value lower on higher than its predecessor.

• Automatically grouping date axis months into years using axis rangesDemo

  This demo shows how we can automatically group month labels of a DateAxis into years using axis ranges.

  XY
• Automating report generation using Selenium Webdriver
• Axis bullets on top of the chart

  This demo shows how axis bullets can be moved to chart's plotContainer to appear them on top of the chart.

• Axis labels on base line

  This demo shows how we adapters to position X axis labels under base (zero) line, rather than fixed at the bottom of the plot area.

• Axis zoom end event

  This demo shows how we can use value change events of the start and end axis settings, as well as use debouncing techniques on the handlers to detect when the zoom animation has finished.

• Bar chart with icons on columns and axis

  This demo shows how we can add icons at the end of bars using series bullets, as well as next to category labels using axis bullets.

• Bubble chart with hidden scrollbars in plot area

  This demo shows how we can add "hidden" scrollbars directly into plot container of an XY chart, to be shown on hover only.

• Bubble chart with zoom in and out buttons

  This demo shows how we can add plus/minus buttons to a bubble chart that zoom in and out the chart.

• Bullet following cursor

  This demo shows how we can show a bullet on the hovered data item without creating bullets for each data item. This results in a better performance.

• Centering on a clicked node in a Force-Directed TreeDemo

  This demo shows how we can use events to affix a clicked node of a Force-Directed Tree to the middle of the chart.

  Force Directed
• Changing XYCursor's behavior based on SHIFT keyDemo

  This demo shows how we can dynamically alternate the XYCursor's behavior between zooming and panning based on whether SHIFT key pressed or not.

  XY
• Clickable circular labelsDemo

  In amCharts 5, labels need to have a background to be able to be compatible with pointer interactions such as hover and click. However, circular labels do not support backgrounds. This demo solves the issue by adding a Slice element into such labels.

  Gauge, Radar
• Clustered box-plot

  This demo shows how we can implement clustered box-plot chart with multiple columns per category/date.

• Clustered points inheriting bullet colors

  This demo shows how we can make group bullets of the Clustered Point Series inherit colors of the points it consists of.

• Coloring pie labels and ticks by sliceDemo

  This demo shows how we can use adapters to dynamically color labels and ticks using the color from their slice.

  Pie
• Column labels as categories

  This tutorial will explain how individual column labels (bullets) can be used as Category axis labels.

  XY
• Combining tooltip values from multiple series

  This demo shows how we can combine values from multiple series into a single tooltip, using adapters.

  XY
• Complex bullets with hover effect

  This demo shows how we can create bullets out of several elements, as well as attach hover effects that trigger with both direct hovering by a pointer and with an XYCursor.

• Consistent radius of outer circles of a Force-Directed Tree

  This demo shows how we can use adapters to make radius of node's outer circle be consistent, regardless of the size of the node.

• Constraining tooltip to plot container bounds

  This demo shows how we can use an adapter to limit series' tooltip to the actual bounds of the chart's plot container.

• Convert global click coordinate to axis value

  This demo shows how you can convert global document coordinates to a value and a date on respective value and date axes.

• Country-specific world maps

  Some countries like India, China, and some other have local regulations regarding how their borders are drawn that differ from UN-mandated or actually controlled territories. This tutorial will explain how to use country-specific maps with MapChart.

• Creating custom indicators for a Stock Chart

  This tutorial will show how we can create custom indicators for a stock chart.

  Stock
• Creating multi-content PDF export

  This extensive tutorial will show how you can use pdfmake library, which is bundled with amCharts 5 plugin Exporting, to generate full page, multi-content report PDF documents.

  All charts
• Cursor with "corner" crosshair lines

  This demo shows how we can use adapters to make lines of the XY cursor go only to the target data item.

• Custom icons in Stock ChartDemo

  This demo shows how we can use a custom theme to override the look of icons used in a StockChart.

  Stock
• Custom loading indicator

  This tutorial will show how we can build a custom loading indicator that can be toggled on and off as needed.

• Custom period selector on XYChartDemo

  This demo shows how we can add external buttons to create a custom pre-defined period selector on a regular XYChart.

  XY
• Customizing scrollbar gripsDemo

  This demo shows how we can completely modify the appearance of scrollbar's grips.

  XY
• Daisy-chain multiple chart rendering

  This tutorial shows how we can implement a simple daisy-chain to render multiple charts one at a time, with a custom delay. This approach might help ease the initial load on a chart-heavy pages.

• Different bullet styling of grouped data items

  This tutorial shows how we can use data item object in a bullet function to determine whether it's a grouped data item, or regular one, to apply different styling to the bullet.

• Disabling context menu on chart

  Normally, browsers will display a context menu when you press right mouse button over some element. If done over amCharts 5, it will display a context menu for a <canvas> element. This tutorial will show how you can disable default behavior of a right-click on canvas elements, as well as attach built-in rightclick event to apply your own logic.

• Disabling hover in a legend of a Pie Chart

  This demo shows how we can disable triggering of slice tooltip when its legend item is hovered.

• Drill-down column chartDemo

  This demo shows how we can show aggregated daily data as a column series, then drill-down into hourly data for the day on a click.

  XY
• Dual date axis with both month and year labels

  This demo shows how we can add two date axes to an XY chart to show both monthly and yearly grid/labels.

  XY
• Dynamically adding charts to the same RootDemoAll charts
• Dynamically changing legend position

  This short tutorial will show the steps involved in dynamically changing position of the legend.

• Dynamically switching data set for an XYChartDemo

  This demo shows how we can dynamically set data on a series and related category axis.

  XY
• Fake bullet following the XY cursor

  This demo shows how we can dynamically show a simple Circle element instead of actual bullets on a lines series.

• Find the first and the last data item of the zoomed XYChart

  This demo shows how we can use axis' getSeriesItem() method to find the first and last data items when an XY chart is zoomed.

  XY
• Focusable pie slices with perfect outline

  This demo shows how we can hide default rectangular bracket for focused pie slice as well as apply custom state to highlight focused one.

• Force the last label on a DateAxis using axis range

  This demo shows how we can use events and axis ranges to add a dynamic last grid/label on a DateAxis.

• Force-directed tree with adaptively positioned labels

  This demo uses an adapter do dynamically apply positioning and style of the Force-directed tree labels based on whether they fit into parent node or not.

• Force-Directed Tree with directional labels on linksDemo

  This demo shows how we can use Hierarchy bullets to add directional labels on Force-Directed Tree links.

  Force Directed
• ForceDirected with custom nodes/buttons/legend

  This demo creates a custom ForceDirected tree chart with a few advanced features, e.g.:

  Force Directed
• Formatting date/time and numbers using "Intl" object

  The Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting. This tutorial will show how you can use Intl options and locales for date/time and number formatting in place of string-based amCharts format definitions.

• Gantt chart with columns that span multiple categories

  This demo shows how we can use additional hidden Y axes and column series, to add floating columns that span multiple categories on a Gantt chart.

• Gantt chart with external data

  This demo shows a Gantt chart with externally-loaded JSON data.

• Gauge chart with custom ClockHand

  This demo shows how we can customize a gauge chart's hand by pushing any element into its children set. It uses a Triangle to replace the tip and an SVG Image to replace the pin.

• Gauge with circular auto-truncated labels

  This demo shows how we can use an adapter to automatically truncate circular labels on a gauge chart.

• Generating static chart snapshots

  This tutorial will introduce to a concept of generating static snapshots of the charts.

• Get points within current viewport of a MapChartDemo

  This demo shows how we can dynamically collect all points from a MapPointSeries that fit within current map viewport.

  Maps
• Getting data items within cursor selection

  This tutorial will show how we can grab data items that fall within the selection of a cursor on a scatter (XYChart) chart.

• Grouping legend items

  This short tutorial will introduce two approaches that can be used to group legend items by inserting a label between its items.

  XY
• Grouping several series into single legend item

  This demo shows how we can selectively add series to legend, then toggle multiple series with a single legend item.

• Handling bullet masking

  This tutorial is a collection of techniques that can be used to tackle various approaches to masking of bullets on an XY chart.

• Handling long category axis labels

  This tutorial looks at ways on how to handle situations where labels of a CategoryAxis are too long to comfortably fit.

• Handling pie chart labels that don't fit

  In some cases we will come across chart setups that will have their slice labels cut off, especially on smaller charts. This tutorial will look at few ways to handle those situations.

• Heat legend with scale

  This demo shows, how we can add a scale to a Heat Legend by pushing regular ValueAxis into it.

• Hide or relocate label bullets for small columns

  Sometimes, showing a label on a very small column is not an option. This tutorial will take a look at two ways to fix that issue.

• Hide series' tooltips when axis bullet is hovered

  This demo shows how we can use events to hide series' tooltips when tooltip-enabled axis bullet is hovered, ensuring that tooltips do not overlap.

• Hiding labels and ticks for small pie slices

  This demo shows how we can use an adapter to automatically hide labels and ticks of small pie chart slices.

• Highlight areas of an XY chart using a column series

  This demo shows how we can use a separate ColumnSeries to add square-shaped fills at any place on an XY chart.

• Highlighting links of a force-directed node on hover

  This demo uses pointerover and pointerout events on force-directed series' nodes, to automatically highlight all links going out of it. It makes use of an array of links contained in node's data item's links setting to automatically apply or remove "active" state.

• Histogram chart

  This demo shows how we can pre-process the raw point data to display a histogram of point distribution.

  XY
• Horizontal dual bar chart with categories in the middle

  This demo shows how we can use bullets and horizontally-stacked axes to create a symmetrical bar chart with categories in the middle.

• Hybrid line and Gantt chart

  This demo shows how we can use stacked axes to create a combined chart with a Line series and Column (Gantt) series sharing the same X axis.

• Images in Sankey nodes

  This demo shows how we can add images to Sankey diagram's nodes.

• Incremental on-demand data loading

  This tutorial will explore how we can implement fully automated on-demand incremental loading of hourly/daily/monthly data from a backend, on a Stock-like chart shown above.

• Individual legend item for each column in series

  This demo shows how we can create a legend to display individual items for each column in a column series, as well as trigger hovers.

• Infinite dynamic data loading on Stock ChartDemo

  This demo shows how we can catch X-axis over-zoom events and dynamically load missing data on a Stock Chart.

  Stock
• Keeping date axis zoom across data updates

  Normally, a date axis will preserve its current relative zoomed position if data is updated. This demo shows how we can use events to log current zoom date range and keep the chart zoomed on specific dates, not relative position.

• Labels on negative columnsDemo

  This demo shows how we can use adapters to change vertical alignment of a bullet, by dynamically modifying its centerY setting, based on its value.

  XY
• Left-aligning vertical axis labels

  Normally, the labels of the vertical left-side axis are right aligned. This demo will show how we can easily make them left-aligned instead.

  XY
• Limit to single open branch in ForceDirectedSeries

  This demo shows how we can use setting-bound event to limit open branches in ForceDirectedSeries to one.

• Line chart adding data every second

  This demo shows a Line chart with a pulsing bullet at the end, with dynamic data updates.

• Line series with a borderDemo

  This demo shows how to add an outline to line series using two methods: an additional (thicker) line series and a shadow.

  XY
• Location of items on date axis and date-based series

  This combined tutorial examines at possible positioning of axis elements like grid, labels, and ticks as well as series data items in an XY chart scenario with a date axis and date-based data.

  XY
• Map point series with rounded image bullets

  This demo shows how we can use a Circle element in map point series bullets to make a regular square image rounded.

• Map with custom markers and data-bound colorsDemo

  This demo shows how we can use Graphics elements with SVG paths as map markers on a MapPointSeries, custom-colored using "template fields".

  Maps
• MapChart with an auto-populated legend

  This demo shows how we can populate a custom legend on a Map chart from its Polygon series data.

• Maps with displaced areas and dividers

  amCharts 5 comes with a few maps that has some of their areas (islands) deliberately displaced, so they are closer to the mainland. Maps like that usually make a much better effective use of the available screen space at the expense of displaced areas not being compatible with actual lat/long coordinates.

• Modifying series/indicator settings modal

  This tutorial will show how we can modify items listed in a settings modal that opens when you click series/indicator gear icon in its legend.

  Stock
• Moving icons of a StockLegend to leftDemo

  This demo shows how we can use events to re-arrange items within a StockLegend. Specifically, it moves settings and close icon buttons to the left - before the actual legend label.

  Stock
• One pulled slice per pie series
• Overlaying and syncing amCharts map with Google Maps APIDemo

  This demo shows how we can create and overlay a MapChart over Google Maps using Maps JavaScript API, complete with total syncing of zoom and pan.

  Maps
• pdfmake upgrade notice (0.2 → 0.3)

  As of version 5.18.0, amCharts 5 now ships with pdfmake 0.3. If you are using getPdfmake() to obtain a pdfmake instance and calling its API directly, you will need to update your code.

  All charts
• Pie chart with a custom legendDemo

  This demo shows how we can modify default appearance of a legend on a PieChart.

  Funnel, Pie
• Pie chart with a legend with dynamically-sized labels

  This demo shows how we can use events to dynamically set width for the Pie chart's legend labels, so that the legend takes up all available space, left from the pie itself, as well as truncates the labels if there's no space available.

• Pie chart with right-aligned labels

  This demo shows how we can right-align Legend's labels and value labels.

• Play series animations when chart scrolls into view

  This demo shows how we can trigger a replay of series' animations when previously invisible chart scrolls into view.

• Position the zoom-out button to bottom-right

  This demo shows how we can use events to reposition XYChart's zoom-out button to the lower-right corner of the chart plot area.

• Position X-axis on zero-value

  Normally, the X-axis will be shown at the bottom of the plot container, regardless of the Y-axis scale. This tutorial shows how we can make the X-axis dynamically position itself so that it sticks to the position of the zero value.

• Pre-hiding pie chart slices

  This short tutorial will show how to pre-hide individual slices of a pie chart, in this case ones that have zero value.

• Printing pages with large chartsAll charts
• Range selector with draggable axis range

  This demo shows how we can add draggable buttons to each edge of an axis range.

• Rotate and zoom the globe to a clicked countryDemo

  This demo shows how we can rotate the MapChart with an Orthographic projection (globe) so that it is centered on a clicked country, then zoom in to it.

  Maps
• Scrollable vertically-stacked chart

  This demo shows how to apply scroll behavior to a vertically-stacked axis chart.

• Selectively displaying pie chart labels inside or outside slices

  This demo shows how we can use an adapter on pie chart's labels to automatically determine how it is displayed: inside or outside the slice.

• Selectively positioning Sankey diagram labels

  It's possible to selectively specify the location of Sankey diagram labels, based on the position of their parent Nodes. This tutorial will show how.

• Set the minimum upper scale of a ValueAxisDemo

  This demo shows how we can use events to automatically adjust ValueAxis maximum scale across data to set minimum value of its upper scale regardless of the actual value scales.

  XY
• Setting mouse pointer style

  This tutorial will show how we can change cursor style when hovering over some chart element.

• Show "no data" warning on a chart

  This demo shows how we can use chart series' davalidated event to display a "no data" message in a modal if data contains no items.

• Show a range of dates in a tooltip of a DateAxis when grouping data

  This demo shows how we can show a data range of a grouped data items in a DateAxis tooltip.

  XY
• Show country sub-divisions on map closeupDemo

  This demo shows how we can automatically load and show country sub-divisions (e.g. states) when the map is significantly zoomed in.

  Maps
• Show different tooltip on click of a bullet

  This demo shows how to create double-tooltips for series bullets. When hovered, bullet will display some content. When bullet is clicked it will display a permanent sticky tooltip with different information until clicked again.

• Show only one series at a time

  This demo shows how we can use series settings events to ensure only one series is shown on an XY chart at a time, by toggling off other series automatically.

• Show range of dates in a multi-interval DateAxis label

  This demo shows how we can make a DateAxis automatically show a range of dates if its cell spans multiple periods, using an adapter.

• Showing X-axis tooltip on top of the chartDemo

  This demo shows how we can add an additional date axis to show axis tooltip on top of the chart instead of axis itself.

  XY
• Simulating axis gaps (break)

  This demo shows how we can leverage stacked axes to simulate an axis break.

  XY
• Solving overlapping bullets

  This short tutorial shows a couple of ways to solve the situations where multiple series can have label bullets shown, and thus may overlap with each other.

  XY
• Stacking series with mismatched categories/dates

  Normally, stacking series on an XY chart requires that they have same number of data items, and that their categories or dates match. This tutorial will introduce a custom function that can merge data from a number of sources so that multiple series can reuse it for correct stacking.

• Start/end labels on a scrollbar

  This demo shows how we can insert Label elements into a scrollbar to add start and end labels.

  XY
• Start/end labels on scrollbar grips

  This demo shows how we can add labels on top of scrollbar grips, that show dates corresponding to their current positions.

  XY
• Stock Chart with custom indicator add button

  This demo shows how we can create a custom indicator as well as add a button to add/toggle it in Stock Chart's toolbar.

• Sum label inside a donut chart

  This tutorial will show how we can easily add some labels inside a donut chart to display complementing information, such as sum of values for all the slices.

• Sunburst chart with a legend including all nodes

  This demo shows how we can include all nodes from all levels of a Sunburst chart into its legend.

• Syncing axis widths across multiple charts

  This demo shows how we can use events and "ghost labels" to sync width of vertical axes across multiple charts.

• Syncing axis zooms across multiple charts

  This demo shows how we can sync zoom of an X-axes across multiple charts.

  XY
• Syncing cursors across multiple horizontally-arranged chartsDemo

  This demo shows how we can use XYCursor's cursormoved event to position cursors on other charts simulating the same position.

  XY
• Syncing zero grid line across multiple axesDemo

  This demo shows how we can use Value axis' private setting events to sync zero-line across multiple axes.

  XY
• Toggle multiple pie slices via legendDemo

  This demo shows how we can use events on a Legend to "inverse" toggle behavior of Pie chart's legend by showing only clicked sliced, while hiding the rest of the slices.

  Pie
• Toggle pie slice pullout via legend

  Normally, when you click an item in PieChart's legend, relative slice is hidden or revealed. This quick tutorial will show you how to make the slice activate/deactivate (pull out/in) instead.

• Toggle slices of multiple nested Pie Series with a single legendDemo

  This demo shows how we can use events on legend items to toggle slices of multiple nested Series on a Pie Chart.

  Pie
• Toggling active state of a bullet

  This demo shows how we can toggle "active" state of a bullet by clicking on it.

  All charts
• Toggling all series but one using legendDemo

  This demo shows how we can change legend behavior to toggle off all series, but the one that was clicked on.

  XY
• Toggling multi-level Sunburst nodes with legend

  This demo shows how we can fix toggling of nodes in a multi-level Sunburst chart via legend using events.

• Toggling series on and off via chart API

  This demo shows how we can toggle a series off and on using its hide() and show() methods.

• Tooltip with a pointer on the side

  This demo shows how we can use an adapter to dynamically update tooltip bounds, so that tooltip pointer is attached to its left side, rather than in the middle.

• Totals on clustered column stacks

  This demo shows how we can dynamically calculate totals of columns in a multi-stack scenario in a bullet function.

  XY
• Totals on column stacks

  This tutorial will explain how we can place an automatically-calculated total on a stack of columns.

  XY
• Tree Chart with HTML nodes

  This tutorial shows how we can use HTML content instead of built-in circle nodes on a Tree Chart.

• Treemap with auto-colored labelsDemo

  This demo shows how we can use adapters to pick a contrasting color for Treemap labels.

  Treemap
• Treemap with highlight of parent node on hoverDemo

  This demo shows how we can use events and states to highlight top node on a hover of any child node of a Treemap.

  Treemap
• Treemap with node images and labels

  This demo implements a Treemap chart with images and labels in its nodes.

• Treemap with partial fills in nodes

  This demo shows how we can add partial data-based fills to Treemap nodes using Rectangle element as a bullet, and a couple of adapters.

• Triggering bullet hover effects with chart cursor

  These are two demos that show how we can use chart cursor's cursormoved event to trigger hover effects on multiple series' bullets.

• Triggering bullet hover with an XY cursor

  This demo shows how we can use XYCursor event "cursormoved" to automatically apply hover state to each bullet in the same category.

• Upgrading version of the XLSX library

  XLSX has chosen to stop publishing to the npm registry. This means that XLSX is permanently locked at version 0.18.5.

• Using adapters on category axis labels

  This demo shows how we can dynamically modify labels of the CategoryAxis using an adapter.

• Using axis ranges to highlight weekends

  Axis ranges is a good way to highlight specific places or stretches along an axis. This tutorial will show how we can create code to automatically create axis ranges to highlight weekends on a DateAxis.

  XY
• Using axis ranges to place labels at arbitrary values or dates

  Axes of various types follow their own logic when they choose where to place its grid and labels. However, sometimes you need to place those labels at precisely value X, or on date Y. That's where axis ranges might come in handy, which is the focus of this tutorial.

  XY
• Using bullets to apply styling to grid under seriesDemo

  This demo shows how we can add a vertical Line element to a series bullet to show different styling of a grid under a LineSeries.

  XY
• Using custom theme to apply patterns to pie chart slices

  This demo shows how we can build a custom theme that applies distinctive patterns to each slice of a pie chart.

• Using data item location to align line series with clustered columns

  This demo shows how we can use locationX setting of the LineSeries to align its bullets with clustered columns.

• Using regional maps

  In additional to world and country maps, amCharts 5 geodata package comes with a set of specialized regional maps, such as second-level subdivisions (districts), e.g. counties. This tutorial will show how those can be used.

  Maps
• Using series color for legend labelsDemo

  This demo shows how we can make labels of a legend on an XY chart take the color of their corresponding series.

  XY
• Using slice color for PieChart label backgrounds

  This demo shows how we can use template's setup handler to automatically add a background to Pie chart's slice labels, matching the slice color.

• Using the Color Picker

  amCharts 5 comes with an optional plugin - Color Picker - which does what its name says, and can even be use as a standalone element.

  All charts
• WordCloud with hover effects on wordsDemo

  This demo shows how we can add background color to the WordCloud labels, as well as change their appearance on hover.

  Word Cloud