Plugin: Annotation

Type tutorial

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. NOTE Annotation is a plugin. For information about using plugins, refer to this article. Using the plugin Including the module Before you can use this plugin you need to make sure […]

Clickable links in tooltips

Type tutorial

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 […]

Generating multi-content PDF export

Type tutorial

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. Disclaimer Majority of this tutorial is based on using pdfmake. It’s an excellent third party library enabling generating PDF documents in JavaScript. Our aim is to walk you through basics of […]

Automating report generation using Selenium Webdriver

Type tutorial

If you need to automate the generation of chart images or PDF, Selenium Webdriver might be the best option. It can handle different browsers even though this example only shows it using Firefox. Setting up Install NodeJS Install Firefox Create a folder Create a file called package.json in the new folder with the content shown […]

Chart element class names and CSS

Type tutorial

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. Enabling class names By default, when chart is generating SVG elements, no class attributes are added to it’s element. Let’s take a simple Line series with bullets: The […]

Modifying big number prefixes

Type tutorial

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. The problem Extremely big numbers on a chart can be confusing and wasteful of space: Let’s see how we can fix that. […]

Lazy loading amCharts modules

Type tutorial

It is possible to load the amCharts library only when needed. This tutorial will explain how. The import() expression is the official way to lazy load any ES6 module, including amCharts. However, import() can only import a single module, so you have to combine it with Promise.all to load multiple modules. Here is how to […]

Using curved labels

Type tutorial

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. The basics All text labels in amCharts 4 are represented by an object of type Label. To make a label follow […]

Styling or removing tooltip shadow

Type tutorial

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. Accessing tooltip Before we can start, let’s see how we can access the tooltip, that is Tooltip […]

Removing chart background on print

Type tutorial

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. The problem Let’s use a chart with a nice gradient as a background. Now, when we try to print it, the background […]