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

Truncating legend labels

Type tutorial

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. The problem Long labels will bloat up legend size. This is especially prominent where chart size is not very big: Even […]

Combining different axis types

Type tutorial

amCharts allows any number of any type combined in the same XY Chart. Below demo demonstrates how you can combine utterly incompatible scales – numeric and date/time – with separate Value and Number axes.

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

Curved Pie Chart Labels

Type tutorial

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. Base chart Let’s take a super basic pie chart as our starting point. Making labels cool again To make […]

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

Using “fill rules” on a Date Axis

Type tutorial

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. Base chart Let’s take a simple Date-based chart. Enabling axis fills We do have nice clean grid. […]