Controlling fill direction of a Line series

Type tutorial

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. Base chart Consider this basic chart. It’s a two-Value axis chart with a Line series, wiggling around zero values – both horizontally and vertically. […]

Grid over Series

Type tutorial

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. Moving plot container to back The reason why grid lines appear behind series is that they belong to axes and containers that hold axes are […]

Selectively offsetting axis labels

Type tutorial

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. Base chart The following chart was set up to show all labels, regardless if they are overlapping. categoryAxis.renderer.minGridDistance = 30; categoryAxis.renderer.minGridDistance […]

Managing width and spacing of Column Series

Type tutorial

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. Understanding cell width Before we begin, let’s figure out what we mean when we […]

Alternated axis fills

Type tutorial

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. Enabling axis fills We’ll let you in on a secret: each axis is already filling the space between each second set of its grid lines. You just can’t see it […]

Using label bullets on a horizontal bar chart

Type tutorial

This tutorial will show how you can use LabelBullet to decorate your horizontal bar chart with data labels. Preparing Prerequisites This tutorial will rely heavily on using Series’ bullets. If you’re not familiar on how bullets work in amCharts 4, please go through “Bullets” article first. Also, since we’re going to be binding our labels to […]

Taming the Step Line Series

Type tutorial

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. Default behavior Let’s take a very basic chart with Step line […]

Stacked column series with rounded corners

Type tutorial

This quick tutorial shows how you can inventively use adapters to apply custom formatting options to stacks of columns. The task Suppose, we have a stacked column chart. And want the top of the each stack to have rounded corners. Here’s our target chart, BTW: Rounding the corners One way to go about rounding the […]

Using Circle Bullets

Type tutorial

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. Adding a circle bullet A “circle bullet” is a special kind of bullet that already has a Circle element in it, so you […]

Tooltips with rich HTML content

Type tutorial

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. Base chart Let’s start with a pretty basic chart with multiple line […]