Tutorials & Demos
- Creating custom mapsFeatured
The aim of this tutorial is to get you on the right track for creating your own maps in GeoJSON format, suitable for use with amCharts 4.
Maps - Manipulating mouse cursor styleFeatured
This tutorial will explain how you can set mouse cursor style for various actions on an element, like hover or press.
All charts - Placing labels anywhere on the chartFeatured
This tutorial shows how you can place arbitrary labels anywhere on the chart.
All charts - Tracking Cursor's position via APIFeatured
This tutorial will explain how you can track Cursor's position within plot area, as well as map it to real values.
XY - "3D" line series
This tutorial will show how you can easily create a "3D stack" effect on regular LineSeries.
XY - "Fixing" maps for countries that span 180 longitude
Some countries, like New Zealand have islands across that line. This causes the "over the line" parts to be "wrapped" and drawn all the way to the right of the map area. This may not be an issue on a world map, but might look a bit odd for a country only map.
Maps - "Sticky" chart cursor
Normal XYCursor is hidden automatically when plot area is no longer hovered. This tutorial shows how you can easily make it "sticky", that is make it stay in its last known location.
XY - A simple Histogram chartDemo
This demo shows how we can take an array of plain values, and build a Histogram chart - a distribution of values as a column series.
XY - About "Chart was not disposed" warning
Are you getting a "Chart was not disposed" warning in your browser console? You're doing something wrong. Read on for an explanation.
All charts, Integrations - Activate/deactivate a pie slice on legend click instead of toggling
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.
Pie - Adaptive column corner rounding for positive and negative values
This tutorial will show how we can use adapters to selectively apply rounding to columns of the ColumnSeries based on their value.
XY - Adding "Home" Button to Map Chart
Map Chart can be zoomed and panned. There is, however, no built-in "go home" button. This tutorial will show how to add one which resets map's zoom and position to initial state.
Maps - Adding chart titles and bottom text
This short tutorial shows how you can add arbitrary text labels to the top or bottom of the chart, that will automatically adjust the size of the chart itself.
All charts - Adding extra info in exported PDF
amCharts 4 comes pre-loaded with extensive chart export functionality. Besides ability to export chart to various image and data formats, it can also export to PDF documents. This tutorial will show, how you can easily tap into this process to include extra information, like text, tables, and even images, into exported PDF.
All charts - Adding watermarks to charts
This tutorial will show how your can brand your charts using different kinds of watermarking techniques.
All charts - Adding worksheets to Excel exportDemo
This demo will show how you can add additional worksheets to the data being exported to XLSX format.
Pie, Radar, XY - Additional axis tooltip to display totalsDemo
This demo shows how we can use additional axis and adapters to display total value in additional tooltip on top of the chart.
XY - Allow just single series to be displayed at a timeDemo
This demo shows how we can use Legend's hit event to toggle other series off when one series is toggled on, making sure that there's only one series displayed at any given time.
XY - Alternated axis fills
This short tutorial will show how you can make your XY chart more readable by introducing a fill between each second set of grid lines.
Radar, XY - Animated bulletsDemo
In this demo you'll see how we can use chart's built-in animation capabilities to add animation effects to bullets.
XY - Animated rotation of the globe via APIDemo
This demo shows how we can animate rotation of a globe (MapChart with an Orthographic projection) by creating an animation for its deltaLongitude and deltaLatitude properties.
Maps - Animating map lines with CSS
Each line in a MapChart is an SVG object in document's DOM tree. This means we can use CSS to target and modify it, including using CSS animations. This tutorial will show how we can make MapLine animate itself from the start.
Maps - 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.
XY - Auto-collapse other ForceDirectedTree nodes when node is explodedDemo
By default when node with children is clicked it is "exploded" - children are shown. This demo shows how we can catch such events to automatically collapse all other open nodes when that happens.
Force Directed - Auto-hide value axes
Normally, all initialized Value Axes are shown, even if they do not have any visible Series attached to them. This also means that when Series is toggled off, the related Value Axis will remain. This tutorial will show how we can toggle axes off together with Series.
XY - Automatic labels over map polygons
During the course of this article we're going to learn how to automatically place labels over map polygons, as well as make them positioned just the right way.
Maps - Automatically resize label to fit donut inner radiusDemo
The inner space of a donut chart is a place that can store some information. However, donut itself being sized relatively, might render that information not fitting. This demo shows how it's possible to resize the label inside donut to always fit the inner radius.
Pie - Automating report generation using Puppeteer
If you need to automate the generation of chart images or PDF, utilities with a self contained browser are your best options. There are few options out there as headless browsers.
All charts, Integrations - Automating report generation using Selenium WebdriverAll charts, Integrations
- Axis Grid and Ranges over Series
The order of the universe is this: axis elements like grid and ranges go under series. This short tutorial will explain how to change that order.
- Axis labels at arbitrary values on GaugeChartDemo
Normally, an axis on a GaugeChart will place labels at convenient intervals - so they are not too crammed and not too sparse. It will depend on actual chart size. However, in some case you might want to place labels at exact values, no matter what. This demo will show how you can disable axis labels altogether and place axis range labels at precisely the values you need them to appear at.
Gauge - Axis ranges in XYChartScrollbarDemo
Do you know that XYChartScrollbar is not some mystical new class, but rather a full fledged XYChart. This means that we can do with it anything we can do with a regular chart, including adding axis ranges. This demo does exactly that.
XY - Building a Waterfall chart
Waterfall chart is a special kind of chart consisting of floating columns that relate each other via their open and close values.
XY - Building drill-down maps
In this tutorial we'll look at techniques for building various map-based drill-down scenarios.
Maps - Changing appearance of focused items
amCharts 4 comes with extensive accessibility functionality, of which part is ability to highlight focused items with a high-contrast outline. This tutorial will show how you can modify the appearance of this outline.
All charts - Chart element class names and CSS
amCharts 4 allows automatically adding element-specific class attributes to its SVG elements for easy targeting via CSS selectors. This tutorial explains how to enable and use them.
All charts - Chart Legend in an External Container
This tutorial will show you how you can easily move your chart legend outside main container into a totally separate one.
Pie, Radar, XY - Chart with multiple CategoryAxisDemo
This simple demo shows an XYChart where each series uses own CategoryAxis with completely different categories.
XY - Clickable chart thumbnailsDemo
This demo shows how we can use a custom function to defer chart instantiation and replace them with a thumbnail, which once clicked would be automatically replaced with a real chart.
All charts, XY - Clickable links in tooltips
Tooltips are used in a number of places to provide contextual information on a hovered/tapped object, like a Slice of a Pie Chart, or a country on a map. By default, tooltips are completely static with no way to interact with them. This tutorial will explain how you can make them interactive, adding clickable links to them.
All charts, Maps, Pie, XY - Clustered Pie Charts
This short tutorial will show how we can leverage amCharts 4 containers and automated layouts to display multiple Pie charts in a single <div>.
Pie - Clustering groups of non-clustered columnsDemo
This demo shows how we can separate non-clustered columns into separate non-overlapping groups, using their "data item locations".
XY - Column labels as categories
This tutorial will explain how individual column labels (bullets) can be used as Category axis labels.
XY - Column values on top of the chartDemo
This demo shows how we can use bullets and adapters to put actual values of series columns on top of the chart.
XY - Combining different axis types
amCharts allows any number of any type combined in the same XY Chart.
XY - Combining local data from multiple series for exportDemo
In amCharts 4 each series can have its own data (set via own data property). Such data will not be exported using exporting functionality. This demo shows how we can use export's data adapter to combine local data from multiple series in export.
All charts, XY - Combining map polygon series to create grouped outlines
This tutorial will show how we can combine two MapPolygonSeries using different geodata granularity to create outlines for groups of smaller areas.
Maps - Configuring Small Map
This quick tutorial will show you how to configure appearance of the Small map control.
Maps - Configuring the zoom out button
When XYChart is zoomed in, a small round button appears in the corner to indicate that only partial data is show, and to provide means to zoom back out. This tutorial will show how you can configure, or outright disable this control.
XY - Consistent outlines of Map Polygons on hover
This tutorial will show how we can fix a problem where hovered MapPolygon has part of its outline (stroke) hidden behind the adjacent polygons.
Maps - Consolidating values from multiple axes into a single tooltipDemo
If you have multiple axes and a chart cursor, each axis will get a tooltip when you hover plot area. This demo shows you you can use adapters to consolidate values from multiple axis' tooltips into one.
XY - Constant stroke dash size when zooming MapChartDemo
We can use setting strokeDasharray to make lines on a MapChart dashed. However, zooming in will also make dashes grow in size. This demo shows how we can add adapter which would maintain the same dash length across zooms.
Maps - Context-sensitive tooltip that follows mouse cursorDemo
This demo shows how we can use cursorpositionchanged event to reposition the related tooltip to the exact cursor's position.
XY - Controlling fill direction of a Line series
Normally, a Line series with fill enabled, will fill any space between itself and a horizontal "zero line". This tutorial will explore, how we can tame it to our specific needs.
XY - 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.
Maps - County maps
The geodata package for MapChart includes not only country and world maps. It also has special county maps for some of the worlds countries, like United States, Canada, and Mexico. This tutorial will show how you can use them.
Maps - Creating a Bullet Chart
This short tutorial will show how to easily create a bullet chart.
XY - Creating custom filters
amCharts 4 comes with a few basic rudimentary filters like "drop shadow", "desaturate", and a few others. However, you can do much much more with SVG filters. This tutorial will explain how you can create your own custom amCharts 4-compatible filter classes.
All charts, Pie, XY - Creating Pie Series Animations
By default (if you are using "animated" theme), Pie series will fade in when chart initializes. Let's explore how we can fancy-up those animations.
Pie - Creating sparklines and microcharts
This tutorial will show how you can create the min charts, or simply sparklines.
XY - Creating themes
amCharts 4 comes with a plethora of pre-made themes you can use for your charts. You can combine them by applying several themes to a single chart. But what, if you don't find what you're happy with? This tutorial will show how you can create your own theme.
All charts - Creating Timeline Charts
This tutorial will explain how you can use regular Line Series to create functional timelines, complete with bullets and annotations.
XY - Creating Translations
amCharts 4 relies on locale files for localization of the charts. Locales are responsible for both translations of prompts and setting date/number formats. This tutorial will explain how you can make changes to existing translations, and create the new ones.
All charts - Creating trend lines
Sometimes, on charts, the general appearance of the series does not make data tendencies very prominent. In those situations, you might want to add trend lines that explain the general dynamics. This tutorial explains, how you can use generic Line series as trend lines.
XY - Curved Column Series
This quick tutorial will serve as an introduction to the special type of series - CurvedColumnSeries.
XY - Curved Pie Chart Labels
Normally, labels for Pie chart's slices are horizontal, and either arranged in columns or attached to the slice itself. This tutorial will show how you can make labels curve along the outer edge of the slice.
Pie, Sunburst - Custom external legendDemo
This demo shows how we can use some custom code executed on chart load to build completely custom but interactive HTML-based legend for our chart.
Pie, XY - Custom Loading Indicator
This tutorial will show how you can create your own custom loading indicator over chart.
All charts - Custom multiple-element bulletsDemo
This demo shows how we can use virtually any element (in this case Triangle and Line) as a bullet.
XY - Custom order of legend itemsDemo
This demo shows how we can use events to apply custom order to legend items.
XY - Custom polygons on Map Chart
If you are working with Map Chart, you're probably already familiar with MapPolygonSeries thatr get their geographical data from loaded map file, or "geodata". However, Map polygons are not limited to this source of data. You can draw any shape and polygon on the map using in-line lat/long coordinates. This tutorial will show how.
Maps - Custom static multi-value tooltip
Its easy to consolidate a lot of data into a single tooltip that is displayed over Series using Cursor. We've covered it in this tutorial. But what if we don't want a huge square following our cursor, and would rather display that info in a fixed place in the corner? Read on, as we show you how.
XY - Custom ValueAxis grid using ranges
ValueAxis is a clever kid. It will try to space out its grid/labels in a way that they come in non-crowded "pretty" increments, e.g. in 10 incremental steps. But what if we want to show custom step increments, like every 25? This tutorial will explain how to do that.
XY - Custom zoom in/out buttonsDemo
This demo shows how we can use chart's API to zoom it using external controls.
XY - Custom-ordered legend itemsDemo
This demo shows how we can use events to dynamically re-arrange Legend items per our completely custom criteria.
XY - Customizing chart scrollbar
Chart scrollbars come pre-configured with certain looks, in part influenced by used themes. This tutorial show how we can customize the looks of scrollbars.
TimeLine, XY - Customizing ClockHandDemo
This demo shows how we can customize GaugeChart hand by pushing literally any element into it, e.g. Triangle to replace the tip an and SVG Image to replace pin.
Gauge - Dealing with PieChart labels that don't fit
We've all been there: creating a Pie chart with labels a tad too long to fit. This tutorial lists a few things you can do to work around it.
Pie - Different column fill colors for positive and negative values
This tutorial will explain how you can use adapters to fill columns to different colors, based on their value.
XY - Different tooltip content per each level of Force Directed nodes
You can set what is displayed in a tooltip of ForceDirectedTree chart's nodes using its tooltipText property. However, the same information will be used across different levels of node tree. This tutorial shows how you can use adapters to differentiate tooltip content based on level of node.
Force Directed - Disabling default hover and click effects on Pie Chart
When you hover over a slice on a Pie Chart it slightly grows. When you click it, it pulls out a bit out of place. This tutorial will show how you can disable this default behavior.
Pie - Disabling mouse wheel zoom in maps
While mouse wheel zooming on maps is a handy intuitive interaction, it may in some cases be frustrating when it interferes with the scrolling of the web page. This tutorial will show how to disable mouse wheel zooming on the Map chart.
Maps - Disabling SankeyDiagram initial animation
This supershort tutorial will show how to disable SankeyDiagram's initial "fold-out" animation.
Sankey diagram - Disabling scrollbar grips
This short tutorial will show how you can disable grip buttons on chart Scrollbar.
XY - Disabling toggling of items in Legend
Normally a Legend will allow toggling of its items. This will also toggle related items, like chart's Series. This tutorial will show how to disable this default functionality.
Pie, Radar, XY - Disabling XY series initial animations
By default, when "animated" theme is enabled, all XY series will show initial animation, growing from zero to their absolute values. This tutorial will show how you can disable that effect, without interfering with the rest of the animations.
XY - Disabling zoom and pan on a Map Chart
Normally, you can pan and zoom the Map Chart wit mouse and touch. This tutorial will explain how you can disable one or both of these actions.
Maps - Display custom description in legend item tooltipDemo
This demo shows how we can add additional data to chart's Series which then would be used to populate roll-over tooltip on its legend item.
XY - Display tooltip on PieChart slice clickDemo
Normally, tooltips on PieChart slices are shown when they are hovered by a cursor. This demo will show how we can disable this default behavior and only show tooltip when slice is tapped or clicked.
Pie - Do not show tooltip for zero-value columnsDemo
This demo shows how we can use adapters to selectively disable cursor tooltips on columns with zero-value.
XY - Donut with radial gradientDemo
Normally, Pie Chart supports radial gradients only. This demo shows a clever trick with events that modify linear gradient rotation, enabling use of this type of fill on slices.
Pie - Dotted and dashed lines
Every line in amCharts - including outlines of other shapes - can be made dotted or dashed. This short tutorial will show how it works.
All charts - Draggable series axis rangesDemo
This demo shows how we can create a "series axis range" and make it draggable, dynamically adjusting threshold lines and respective series fills.
XY - Drill-down Sankey Diagram
This tutorial will walk you through building a multi-level drill-down Sankey Diagram.
Sankey diagram - Dynamically adding and removing Series
This tutorial will show how you can dynamically add and remove series to the chart.
Radar, XY - Enable dragging of ForceDirectedNode to fixed locationDemo
This demo shows how we can dynamically affix a ForceDirectedNode which was dragged by a user so that it stays permanently in the same place, by dynamically making it a "fixed node".
Force Directed - Export menu in external container
By default, the chart places its export menu in one of its corners. This tutorial will show how you can easily move it out of the chart and into any container on your page.
All charts - Exporting data for visible series only
Normally, using amCharts 4 data exporting functionality, the chart dumps all available source data. This short tutorial will show code which assures that only currently visible series data is exported.
All charts, XY - Exporting data from a Word CloudDemo
Normally, WordCloud chart does not have data to export. This demo shows how we can use an adapter to enable data export.
Word Cloud - Exporting MapChart data
amCharts 4 exporting functionality can export not only visual representation of the chart, but also its data. However, for MapChart which does not have central or clear-cut data, it's disabled by default. This tutorial will show how you can re-enable selective data export for your maps.
Maps - Fixed Scale of Value Axis
Value axes in amCharts 4 will automatically adjust their scales to fit currently shown Series' values as best as possible. This means that scale may, and probably will, change when you zoom/pan the chart, or toggle some series. This tutorial will show how you can easily "lock" the scale in place.
XY - Fixed ValueAxis scaleDemo
This demo shows how we can use ValueAxis event "ready" to fix its scale (min and max values) on load so it does not change when chart is zoomed or scrolled.
XY - Fixing gradients and filters on straight lines
Due to how SVG handles filters and gradients if you have a perfectly straight line, e.g. on a LineSeries with some filter applied, say a DropShadowFilter or a LinearGradient, browser will cause it to render completely invisible. This short tutorial will show how to fix that.
- Force the first and last labels on axisDemo
These two demos show how you can use events, axis ranges, and some setting combination to automatically force showing first and last labels on ValueAxisand DateAxis, even if they fall on non-equal increments, and maintain them across zooms.
XY - 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.
All charts, XY - Freeze horizontal axisDemo
This demo shows how horizontal axis can be placed into a different container so it remains static and visible when oversized chart is getting scrolled.
XY - Funnel chart with relative percent in labels/tooltipsDemo
Normally, Funnel chart calculates and shows percentage of each slice based on its value in comparison to the sum of all values. This demo shows how we can use adapters to calculate percentage based on the first slice value, rather than the sum.
Funnel - Gantt chart with columns that span multiple categoriesDemo
This demo shows how we can use multiple series to simulate multi-category bars on a Gantt chart.
XY - Gauge with gradient fillDemo
This demo shows how you can have a neat gradient-filled axis on a GaugeChart.
Gauge - Gaussian curve with XYChartDemo
This demo shows how we can calculate a gaussian curve data to draw using LineSeries out of source data.
XY - Generating multi-content PDF export
This extensive tutorial will show how you can use pdfmake library, which is bundled with amCharts, to generate full page, multi-content report PDF documents.
All charts - Generating static charts
Some dashboards require charts in them to be fully interactive. Some don't. Sometimes we wish to churn out charts to the screen as as quick as possible, and with as little memory footprint as possible. This tutorial will walk through the process of generating static SVG for charts using a single chart template.
All charts, XY - Grid over Series
Chart grid belongs in the back - behind all other chart elements. However sometimes, you might want to take them the front seat. This short tutorial will show you how.
XY - Grouping axis labels using ranges
This tutorial will show how you can use axis ranges to organize its labels into a groups.
TimeLine, XY - Handling axis zoom events via API
Any axis in amCharts 4 can be zoomed. And sometimes we need to know when that happens, as well as the range of the new zoom. This tutorial will walk through all the necessary information to make that happen.
XY - Handling long Sankey labels
By default, labels on a Sankey Diagram will be truncated with an ellipsis if they are longer than 150 pixels. This tutorial explores other options for handling long labels.
Sankey diagram - Handling repeating categories on Category Axis
Sometimes you will end up with an XY chart that has non-unique categories in its data. This tutorial will explain how to deal with such situation.
XY - Hide map images until zoomed in
Showing a lot of markers on the map may render it cluttered beyond usability. This tutorial will show how you can easily specify custom zoom levels for each individual image to be shown at.
Maps - Hide or relocate label bullets for small columnsDemo
This demo shows how label bullets can automatically be hidden or relocated for small columns.
XY - Hiding non-integer labels on Value Axis
The granularity of Value axis labels depends on available space and some settings. Sometimes, when there's enough space, and the range of values is not great, the axis will throw in intermediate non-integer values as labels. This tutorial will show how to hide those non-integer labels.
XY - Hiding Small Pie Slices
Pie chart sizes its slices proportionally, based on the relative values. Sometimes that means that we end up with a chart that has a bunch of small-value slices that are barely visible, but clutter up the chart.
Pie - Highlight all polygons in Map Series on hover
This tutorial will show how you can highlight all of the polygons in the same series, when just one of those is hovered.
Maps - Highlight clicked ForceDirectedTree nodeDemo
This demo shows how we can use events and states to apply different look for the last clicked ForceDirectedNode.
Force Directed - Highlighting column on axis label clickDemo
This demo shows how we can add hit events to CategoryAxis labels, so that we can highlight respective column by applying active state to it.
XY - Highlighting column series on legend click
During the course of this tutorial we'll modify the functionality of the legend from toggling series on and off, to rather highlighting it.
XY - Highlighting regions of a scatter chartDemo
This demo shows how we can add an extra series to highlight multiple regions of a scatter chart (XYChart).
XY - Individual legend item for each column
Normally on an XY Chart, Legend creates a single item for each Series. This brief tutorial will show how you can create custom legend which will show an item for each individual column in a single Column series.
XY - Individual thresholds for columns
This tutorial will show how you can use additional series to apply individual thresholds to columns in a ColumnSeries.
XY - Integrating with WebDataRocks
This short intro tutorial will show how to connect your data stream with client-side grid library - WebDataRocks - and use it to visualize in amCharts 4.
Integrations - Labels at the bottom of the GaugeChart axisDemo
This demo will show how you can place the labels below both ends of the GaugeChart's axis.
Gauge - Labels inside Pie chart slices
Normally, Pie chart positions its slice labels in neat columns to the left and right of the pie. As a space-saving tip, this tutorial shows how to arrange them inside slices.
Pie - Labels on top of the ForceDirectedNodeDemo
This demo shows how we can put labels of the ForceDirectedTree node on top.
Force Directed - Labels outside Sunburst slicesDemo
These two demos show how we can use adapters to selectively display labels outside some of the Sunburst slices.
Sunburst - Lazy loading amCharts modules
It is possible to load the amCharts library only when needed. This tutorial will explain how.
All charts, Integrations - Legend markers as checkboxesDemo
By default legend displays its markers as squares or mini versions of series. This demo shows how we can replace them with checkboxes.
Funnel, Pie, Radar, Sunburst, TimeLine, XY - Lighten fill color for each level of Force Directed Tree
This short but useful tutorial will show how you can automatically make node fill color lighter with each subsequent level of a nodes with each subsequent level in a Force Directed Tree.
Force Directed - Make AM/PM prompts lowercase or change them
amCharts' number formatter supports various version of the AM/PM indicators (AM/PM; A.M./P.M.; A/P) in date/time formats, however they are all in upper case. This short tutorial will show how you can make them lowercase, or change them altogether.
XY - Making CurveChart labels follow axis angle
CurveChart (or a TimeLine) is a new exciting chart product, allowing twisting and bending the charts into any custom shape. This tutorial will show how you can make labels of a curved axis follow its angle.
TimeLine - Managing width and spacing of Column Series
By default ColumnSeries will size its columns so they are both as wide as possible, while maintaining some spacing between individual columns in clusters and between categories/cells. This tutorial will explain how we can manipulate width and spacing of the columns.
XY - Manipulating chart data
Each chart type in amCharts family has a specific requirement for structure its data should come in. Mostly it comes in a form of an array of objects. However sometimes you don't have control over format of source data. This tutorial will explore how we can pre-process data to reshape it into an amCharts-suitable form.
All charts, Maps, XY - Map heat legend with real start/end value labels
A Heat legend uses regular axis to display value range/scale. For narrower setups it might mean that there are not real start/end labels. This tutorial will show how to remedy that.
Maps - Map line with two arrowsDemo
Normally, a MapLine object can have a single arrow head. This demo shows how we can create additional Triangle objects to create a two-way arrows on a MapChart.
Maps - Map polygon hover via API
In most map setups, a polygon (country) will change color and show a tooltip with its name when hovered. This tutorial will show how you can "simulate" hover via API, without user actually interacting with the map.
Maps - Map with Orthographic (globe) projection
This short tutorial will show how you can create a Globe out of your map using Orthographic projection.
Maps - MapChart with Bubbles and LabelsDemo
This quick demo will show how you can use heat rules to place bubbles and related labels on a MapChart.
Maps - Maps with separator lines
Some maps, bundled with amCharts 4, such as "U.S. territories" come with built-in separator lines. This tutorial will explain how to enable and configure them.
Maps - Modifying big number prefixes
amCharts' number formatter has a way of formatting numbers in a variety of ways, including converting to prefix/suffix-based shorter equivalents. This tutorial will explain how you can tweak it according to your needs.
All charts, XY - Modifying chart for export
Version 4.6.8 brought a new feature to chart exporting functionality: ability to modify chart appearance any way we want before export. For example we'd like to watermark exported charts with an attribution message. Or we want to add any additional titles or info. This tutorial will show how we can do it.
All charts - Multi-color XY heatmap
Normally, heatmaps that use "heat rules" are restricted to two colors as well as gradient in-between. In tutorial we'll see how we can use adapters to apply any number of colors to heat map based on source value.
XY - Multi-series shared tooltip with colored bulletsDemo
This demo shows how we can use an adapter for series' tooltipText property, in-line text formatting, and cursor's maxTooltipDistance to build a single universal tooltip that displays values from all series, complete with colored bullets.
XY - Multiple cursor tooltips on scatter chart
Normally, XYCursor, if added to a chart will try to show a tooltip for each series for the hovered date or category. This does not work for charts that have both X and Y axes as ValueAxis. This tutorial will show how we can fix that.
XY - Non-standard legend alignment
You can use position to place chart Legend on top, bottom, left, or right. In all those cases, Legend will center across the edge it is placed on. This tutorial will show some other alignment options.
Funnel, Pie, Radar, XY - One pulled slice per Pie chart
Normally, when you click/tap a slice on a Pie chart, it would pull out a little. You can have multiple slices pulled out that way. This tutorial will show how you can set up Pie chart in order to allow only one slice to be pulled at any given time.
Pie - Ordering map polygons
Polygons in MapPolygonSeries are ordered automatically by size. This tutorial will show how we can alter this order to suit our purposes.
- Ordering zIndex of series lines and bullets
This tutorial will show how you can control layout and ordering of LineSeries lines and their bullets.
XY - Overlaid column series
This tutorial will show how you can leverage a number of settings on Series and Axes to create offset/overlaid columns effect.
XY - Override CategoryAxis tooltip content with an adapterDemo
This basic demo shows how you can use an adapter on CategoryAxis tooltip label to modify it's content using chart data.
XY - Overriding series' tooltip fill color
Normally, a Tooltip that is displayed when you hover or touch a series' item - slice, column, etc. - is colored the same way as the related object. This quick tutorial will show you how to override that color.
Maps, Pie, Radar, Treemap, XY - Pagination of date-based dataDemo
This demo shows how we can chunk up a multi-month data into "pages", as well as create pagination controls to iterate between them.
XY - Partial axis ranges on a RadarChartDemo
This demo shows how we can use radius and innerRadius adapters to create partial-radius axis ranges / fills on a RadarChart.
Radar - Pie chart with patterned slice fillsDemo
This demo shows how you can use completely custom pattern fills on a PieChart.
Pie - Pie chart with pre-pulled slice(s)
If you would like your Pie chart to start off with one or more of its slices pulled out, there are a few ways to do so. This tutorial will show how.
Pie - PieChart with too many slices
If we are using Pie charts, once in a while we end up with one that has simply too many slices. This tutorial will look at some basic ways to make it less awkward.
Pie - Plotting series from calculated values
In XYChart we are used to plot series from the values that appear in data. This tutorial will show how we can plot from other auto-calculated values such as percent or change.
TimeLine, XY - Plugin: Annotation
This tutorial will show how you can use Annotation plugin (available since 4.5.5) to, well annotate the charts using some basic UI and tools.
All charts, Plugins - Plugin: Bullets
"Bullets" is a collection of configurable shapes (stars, pins, flags, etc.) that you can use as chart bullets, map markers, and anywhere else.
Maps, Plugins, Radar, XY - Plugin: Overlap Buster (experimental)
This tutorial will show how you can use OverlapBuster plugin (available since version 4.6.2) to make overlapping items such as bullets, map markers, or just about any other element "explode" to sides when hovered, for easy access to them
Maps, Plugins, Radar, TimeLine, XY - Plugin: Range Selector
This tutorial will show how you can use Range Selector plugin (available since version 4.9.25) to create HTML-based controls for alternative zooming methods of Axes.
Plugins, XY - Plugin: Regression trend lines
This tutorial will explain how you can use Regression plugin (available since version 4.2.2) to display automatically-calculated regression trend lines.
Plugins, XY - Plugin: Slice Grouper
This tutorial will show how you can use SliceGrouper plugin (available since version 4.3.11) to automatically group small slices on Pie, Funnel, Pyramid, or Pictorial Stacked series into a single expandable "Other" slice.
Funnel, Pie, Plugins - Positioning XY Cursor via API
Sometimes you might need to programatically position your chart cursor. This tutorial will show how.
Radar, XY - Pre-hidden Sankey nodes
Sankey diagrams start up with all of their links and nodes visible and panned out. This tutorial will show how you can specify which nodes start "collapsed" until user clicks on them to expand.
Sankey diagram - Pre-hiding Pie Chart Slices
Sometimes you will have a Pie chart with a lot of slices. This tutorial will teach how to automatically pre-hide some of them using "data fields" and data.
Pie - Pre-zooming an axis
This tutorial will explain how you can set up your charts to initialize pre-zoomed.
Radar, XY - Pre-zooming Map to a Country
You can pre-zoom the map to certain coordinates and level. If you don't want to do that, you can make the chart pre-zoom to a particular country. This tutorial will explain how.
Maps - Pre-zooming Map to a list of countries
In this tutorial we explained how you can pre-zoom your map to a specific country. This tutorial builds on it to produce an example that pre-zooms the map to several countries.
Maps - Preventing Vue.js from loading external librariesIntegrations
- Projected circles over map
This tutorial will show how you can add "projected circles" on the map. Projected circles respect map projection and look much more natural, as if they were "laid down" on the ground, not stuck as pins.
Maps - Radar Chart with full-width cursorDemo
This quick demo shows how you can enable a full-width chart cursor on a RadarChart.
Radar - Re-arranging elements of the chart legendDemo
This demo shows how we can use legend item label's parentset event to move it before the marker.
Pie, XY - Removing chart background on print
Your on-screen designs might call for a chart background. However, when printed, those will wasted a lot of ink. This tutorial will explain how to disable chart's background when using Export's Print option.
All charts - Replacing default export icon
This tutorial will show how you can easily replace the default ... in export menu's top level item with a custom image.
All charts - Resetting Map Position/Zoom
All Map Charts, unless disabled, can be panned and zoomed. This tutorial will explain how to reset map's position and zoom to its original state via custom button or API.
Maps - Retrieving information of a clicked Map Object
In this tutorial we've seen how we can zoom in on a clicked country. We're going to build on that to retrieve information about clicked object.
Maps - Retrieving latitude/longitude of map click
This tutorial will show how we can retrieve latitude / longitude coordinates of a click on map.
Maps - Reversing the order of Legend items
This short tutorial will show how you can easily reverse the Legend items.
All charts - Risk Heatmap with custom shaped columnsDemo
This demo shows how we can apply custom shape (using SVG path) to XYChart columns.
XY - Round tooltips
Normally, tooltips in charts take square shape to match the content within. This quick tutorial will show how to configure Tooltip object to resemble a round fixed-radius shape.
All charts, XY - Sankey Diagram with custom node widths and positionsDemo
This demo shows how you can use propertyFields and "adapters" to individually apply width and position for each Sankey Node.
Sankey diagram - Scrollbar-only XY Chart
If you would like to use chart as a zoom control for your UI, you might want to display just chart's scrollbar with a series preview in it, without showing the actual chart. This tutorial will show how.
XY - Selectively offsetting axis labels
Normally, a chart will try to hide axis labels so they do not overlap. However, you might need them all displayed. One option is to rotate labels. Other option is discussed in this tutorial.
XY - Selectively placing legend items in different containersDemo
This demo shows how we can selectively place chart legend's items into separate containers.
XY - 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.
Sankey diagram - Serpetine TimeLine with arrowsDemo
This demo shows how we can add Triangle objects as bullets on a TimeLine chart, then use adapters to conditionally rotate them to create directional arrows.
TimeLine - Setting colors of NavigationBar in TreeMapDemo
This demo shows how default colors of the links in NavigationBar on a TreeMap chart.
Treemap - Setting initial zoom and position of a Map chart
The Map will always start off fully zoomed out and centered. However, in some cases, you might want to start the map pre-zoomed to some place. This tutorial aims to explain how to do just that.
Maps - Setting minimal width of Scrollbar thumb
This tutorial will explain how you can set minimal width/height of the chart Scrollbar's "thumb" - draggable middle section.
XY - Setting position of the chart scrollbars
Normally, scrollbars on an XY chart are placed on the top and right side. This tutorial will show how you can change their default position.
XY - Show column tooltip on category hoverDemo
This demo shows how we have use "over" and "out" events on axis labels as well as chart cursor's triggerMove() method to trigger tooltips on columns of the hovered category label.
XY - Show last value at the end of LineSeriesDemo
This demo shows how we can make LineSeries show its last value using two approaches: as a label next to bullet, and as an axis range with a label.
XY - Show only first and last labels on Gauge Chart
This quick tutorial will explain how you can limit your Gauge chart axis to showing only its first and last labels.
Gauge - Show series bullets on category/date hoverDemo
This demo shows how we can use bullet "states" to display them only when their respective category or date is hovered with a chart cursor.
XY - Show series bullets/labels on legend hoverDemo
This demo shows how we can add events to Legend items that would toggle on respective series' bullets and bullet labels on hover.
XY - Show stack total in CategoryAxisDemo
This demo shows how we can create a separate Series with label bullets to show stack total right to a CategoryAxis label.
XY - Showing placeholder for empty Pie chartPie
- Simulating individual order of columns within categoriesDemo
This demo will show how you can simulate an order of columns from different ColumnSeries within each category.
XY - Slice rollover tooltip that follows mouseDemo
Normally a rollover tooltip would display in the center of a PieChart slice. This demo shows how you can make it follow the mouse pointer instead.
Pie - Stacked Axes
This tutorial will introduce you to a powerful concept of "axis stacking".
XY - Stacked axes with CategoryAxis between themDemo
This demo shows how we can place a CategoryAxis between two stacked ValueAxis.
XY - Stacked column series with rounded corners
This quick tutorial shows how you can inventively use adapters to apply custom formatting options to stacks of columns.
XY - Styling or removing tooltip shadow
Most of the elements on charts can display a tooltip when hovered. By default, a tooltip will cast a slight shadow behind it. This tutorial will explain on how to style it, or get rid of it altogether.
All charts, XY - Sum label inside a donut chart
The defining characteristic of each donut, including donut charts, is its hole. It's a space that can be used for good. This tutorial will show how we can easily add some labels inside it to display complementing information, such as sum of values for all the slices.
Pie - Sunburst chart with initial animationsDemo
This demo shows how modifying Sunburst chart's and its series' hidden states can result in nice initial fan-out animation.
Sunburst - SVG bullets with custom path and colorsDemo
This demo shows how we can use custom bullets with path set and "property fields" to bind each individual color to data.
XY - Syncing chart data with table/grid
This tutorial will look at ways on how we can grab chart data and display it in an HTML table. We will then build on it to enhance for display in a Grid component. Finally, we'll make chart data sync up with editable grid.
XY - Syncing width of the vertical axes across multiple chartsDemo
This demo shows how width of the vertical axes can be synchronized across multiple separate charts.
XY - Tackling label background
In amCharts 4, labels - be it bullets, axis values, or just about any other text - are not limited to just font size and color. This tutorial will show how you can set background color and shape for them as well.
All charts - Taming Candlestick Series
Candlesticks are a good way to depict data dynamics using variety of metrics. Instead of single value - used on most series - candlesticks use four: open, high, low, and close. This tutorial will explain how to set up and configure Candlestick series.
XY - Taming the Step Line Series
Normal Line series on an XY chart usually connect data items with a straight line. Step line series are similar, except they connect the data items with a step. This tutorial will show how you can tweak the steps to suit your needs better.
XY - Titles on top of vertical (value) axis
Adding titles to axes is easy - just use axis' title property. It will add a vertical or horizontal title next to axis depending on its position. However, you might want to place axis label directly on top of the vertical axis. This tutorial will show how.
XY - Togglable event markers using axis rangesDemo
This demo shows how you can use chart's API to toggle axis ranges on and off .
XY - Toggle series on multiple charts using same LegendDemo
This demos shows how we can sync up toggling of matching series across multiple charts using single legend.
TimeLine, XY - Toggling ForceDirectedNode via APIDemo
This demo shows how we can toggle ForceDirectedNode on and off using API functions hide() and show() on node's data item.
Force Directed - Toggling multiple series with a single legend item
This tutorial will show how you can toggle several Series at once, with a single Legend item.
XY - Toggling series via API
Need to toggle series on and off via code? This short tutorial will show how.
Radar, XY - Toggling stack typeDemo
This demo shows how we can toggle stack types from absolute to 100% dynamically via external controls using chart API.
XY - Tooltips with rich HTML content
Tooltips in amCharts 4 can display formatted information thanks to the style formatting and data binding syntax provided by built-in text formatter. However, sometimes we might go even further: use endless formatting possibilities provided by HTML and CSS. This tutorial will explain how.
All charts, XY - Totals on column stacks
Building column stacks is easy: just set stackable = true on each column series. This tutorial will show how we can display automatic total value of the whole stack on top of it.
XY - Transferring demos from amcharts.com, CodePen or jsFiddle into WordPress
If you are using amCharts WordPress plugin, you might be wondering how to transfer ready-made demos from amcharts.com website, or ones that you find scattered around on CodePen or jsFiddle services. This tutorial will provide a short instructions on how to do so.
All charts, Integrations - Trigger a replay of the chart initial animationsDemo
Most of the elements on a chart - e.g. series or chart itself - have appear() method. Calling it will re-play whatever animation was played when the chart was first loaded, for example series morphing into place. This demo showcases this functionality.
All charts, XY - Triggering map polygon tooltip via APIDemo
This demo shows how we can programatically trigger display of the rollover tooltip on a MapChart by setting respective polygon's isHover property.
Maps - Truncating legend labels
Sometimes chart legend can get out of control size-wise, especially if you have long labels. This tutorial will show how you can get it back in check by capping the length of its labels.
Pie, Radar, Sunburst, XY - Use amCharts 4 to visualize Google Analytics dataIntegrations, XY
- Use custom image as draggable and zoomable MapChart backgroundDemo
This demo shows how we can use any image as a MapChart background that pans and zooms together with the map itself.
Maps - Using "d3-geo" projections
There are quite a few projections built-into amCharts 4. However, if you are not finding one that suits your needs, you can use one from "d3-geo" package. This tutorial will explain how.
Maps - Using "fill rules" on a Date Axis
This tutorial will show how to highlight weekends on a Date Axis. It will explain how you can use custom function to force your own custom logic in determining what ranges of dates should be highlighted and how.
XY - Using "patterns" theme
amCharts 4 comes with a "patterns" theme (since version 4.7.5). It's a bit different from other themes as it modifies the output of some elements quite radically. This tutorial takes a closer look at what this theme does, and how it can be modified for various purposes.
All charts, Pie, XY - Using "sticky" tooltips
Any element on a chart can have tooltipText set to display in form of a tooltip when hovered or touched. This tutorial will show how you can turn those tooltips into "sticky", so they are always shown, without requiring to hover/touch the element.
All charts, Treemap, XY - Using actual images in MapImageSeries
In our main Map Chart article we have touched the topic of creating an image series, feeding them data, and positioning them. However, we were operating using plain, same shapes. This tutorial will show how we can use actual images as markers on the map.
Maps - Using adapters for value-sensitive bullet adjustments
If your chart uses bullets - either as shapes or text labels - you might find yourself in situations where you might need to adjust certain aspect of bullet based on specific value or value change. It might be alignment of a label, or a color of dot.
XY - Using adapters to apply corner radii based on valueDemo
Below are two demos that use adapters to modify radii of the ColumnSeries columns based on their value.
XY - Using adapters to modify legend item appearance
Normally the Legend will either display identical markers for all items, or make them look like their related series. This tutorial shows how you can use adapters to further customize each individual item in Legend.
All charts, XY - Using Albers USA projection
The most common depiction of a map of the United States is one that shows Alaska and Hawaii placed right below mainland USA. This allows this map to be more compact and usable, in comparison how it would be if both of those states were in their usual places. This way of depicting USA map is called "Albers USA projection", and this short tutorial will explain how to use it.
Maps - Using amCharts WordPress pluginAll charts, Integrations
- Using Axis Ranges on Radar Chart
This quick tutorial will show how you can use Axis Ranges on a Radar chart.
Radar - 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.
TimeLine, 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 Circle Bullets
As you may already know from "Bullets" tutorial, a bullet in amCharts 4 can be anything. This tutorial explores how we can can quickly add and configure certain bullet type - Circle bullet.
XY - Using curved labels
In amCharts 4 any SVG label can follow any curve. This tutorial will explain how it works and how you can spice up the look of your charts in various situations, using curved labels.
All charts - Using custom functions for data item grouping
In amCharts 4, DateAxis allows dynamic data item grouping. This tutorial will show how you can take this even further and use custom function to apply custom logic when calculating aggregate values for the groups.
XY - Using custom map zoom settings for individual countries
Our Map Chart allows zooming directly to a specific polygon (country). However, for some countries, automatically-calculated zoom settings might not cut it. This tutorial will explain how you can use Polygon series data to override default zoom settings with custom ones.
Maps - Using Error Bullets
Error bullets are special kind of bullets that help illustrate error margin for the particular series value. This tutorial will explain how you can add those to amCharts 4 series.
XY - Using filters
amCharts 4 comes with a set of ready-made visual filters that you can apply to virtually any element. This tutorial will explain how you can use them.
All charts - Using India version of world map
This short tutorial will show how you can use MapChart with a version of world map that is compatible with regulations in place in India.
Maps - Using label bullets on a horizontal bar chart
This tutorial will show how you can use LabelBullet to decorate your horizontal bar chart with data labels.
XY - Using map country name translations
By default the maps bundled with amCharts 4 include names of countries in English. This tutorial will show how you can use bundled translation files to translate them into a multitude of other languages.
Maps - Using MapChart with Google Maps APIDemoIntegrations, Maps
- Using Material iconsDemo
This demo shows how you can use html property of any label in amCharts 4 to display Material icons.
All charts - Using PDF export fonts
Exporting a chart with related textual information to PDF will not work properly if you have a non-Latin language. This tutorial will show how to overcome this.
All charts - Using percent values in series
In our everyday charting we mainly use absolute values. However, sometimes we might need to show how specific value relates to other elements. In this case relative percent value is much more representative than absolute one. This tutorial will explain ways we can use such relative values.
XY - Using states on LineSeries
This tutorial will show how we can use states to manipulate appearance of the LineSeries in a variety of situations.
TimeLine, XY - Using superscript and subscript in labels
This short tutorial will show how you can make parts of any label super- or sub-script using amCharts 4's in-line text formatting syntax.
All charts - Using U.S. congressional districts maps
Since version 4.1.8 the geodata package for Map Chart includes a collection of maps for U.S. Congressional Districts. This tutorial will show how you can use them.
Maps - Using U.S. county maps
You might have not known that the geodata package for Map Chart includes not only country maps, but also detailed county maps for all U.S. states.
Maps - Using Web Font Loader
If you are using web fonts, you might have noticed an unpleasant moment when content is rendered before the font loads, making it re-render. Since the fonts have different heights and widths, the font being loaded or not may also affect measuring of elements and thus their placement. In some cases, if font is not yet loaded, some elements on the chart might be misaligned. Or, their position/alignment might change later on when the chart layout updates and the fonts are already loaded.
All charts, Integrations - Variable link widths in ForceDirectedTree
ForceDirectedTree is an exciting cool way to display relations between a number of entities. This tutorial will show how you can give those relations a quantitative value by applying custom width to each individual link.
Force Directed - Variable-radius Pie Slices
This short tutorial will explain how you can create a Pie chart that uses data to vary radius of individual slices.
Pie - Windows "high contrast" mode
As an aid to vision-impaired users MS Windows operating system offers a "high contrast" mode. While most of the modern browsers have no issues with it, there are some quirks affecting chart visibility in older Internet Explorer and EDGE browsers. This tutorial shows a quick workaround.
All charts - Wrapping, truncating, and auto-rotating axis labels
This tutorial will explain how you can deal with very long axis labels, by wrapping and/or truncating them.
Radar, XY - Zoom to month by clicking on a DateAxis labelDemo
This demo shows how we can implement hit event on DateAxis labels to automatically zoom to the clicked period.
XY - Zooming axis via API / external scrollbar
The XYChart can be zoomed using built-in scrollbar controls or with a chart cursor. This tutorial will show how you can zoom the chart programatically using its API.
XY - Zooming to map area on click
This tutorial will show how you can set up your map to automatically zoom to an area (i.e. country) when user clicks on or taps it.
Maps