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

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

Retrieving latitude/longitude of map click

Type tutorial

This tutorial will show how we can retrieve latitude / longitude coordinates of a click on map. The task When user clicks or taps anywhere on the Map, we want to retrieve the geographical coordinates (latitude and longitude) of the target point. We also want to make something useful with it, say, placing a marker […]

Retrieving information of a clicked Map Object

Type tutorial

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. Base map As mentioned in the preamble, we’re going to be using a map, created in another tutorial. The “Zooming to a map area on click” tutorial explains how […]

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

Using custom map zoom settings for individual countries

Type tutorial

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. The problem We can make the chart zoom to a specific country using zoomToMapObject() […]

Creating custom filters

Type tutorial

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. What is a Filter? SVG filters An SVG filter (represented by <filter> tag) […]

Custom polygons on Map Chart

Type tutorial

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