Using Error Bullets

Type tutorial

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. Adding error bullet REQUIRED READING If you’re not familiar how bullets are used in amCharts 4, we suggest you run by “Bullets” article first. To […]

Auto-adjusting chart height based on a number of data items

Type tutorial

This tutorial will explain how you can easily make your chart grow or contract based on an actual number of data. The problem Let’s take a simple bar chart: It looks OK. However, it height is fixed, so if we had more bars, it might start looking a bit awkward: Or, if there are too […]

Custom Loading Indicator

Type tutorial

This tutorial will show how you can create your own custom loading indicator over chart. The task Supposedly we have a complex chart, with loads of data, which needs to be loaded from server, parsed, digested and visualized. We don’t want the empty space of a chart just sit there, so we’d like to display […]

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

Using Web Font Loader

Type tutorial

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