Fixed Scale of Value Axis

Type tutorial

Value axes in amCharts 4 will automatically adjust their scales to fit currently shown Series’ values as best as possible. This means that scale may, and probably will, change when you zoom/pan the chart, or toggle some series. This tutorial will show how you can easily “lock” the scale in place. Adaptive scale Here’s how […]

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

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

Titles on top of vertical (value) axis

Type tutorial

Adding titles to axes is easy – just use axis’ title┬áproperty. It will add a vertical or horizontal title next to axis depending on its position. However, you might want to place axis label directly on top of the vertical axis. This tutorial will show how. Prerequisites Containers This tutorial will refer to the concept […]

Hiding non-integer labels on Value Axis

Type tutorial

The granularity of Value axis labels depends on available space and some settings. Sometimes, when there’s enough space, and the range of values is not great, the axis will throw in intermediate non-integer values as labels. This tutorial will show how to hide those non-integer labels. Base chart Let’s use this bar chart as an […]

Using Axis Ranges on Radar Chart

Type tutorial

This quick tutorial will show how you can use Axis Ranges on a Radar chart. If you are already using Radar chart, you know that its essentially bent XY chart. Which means it has X and Y axes, that can be one of the three types: Value, Date, or Category. This also means, that whatever […]

Handling repeating categories on Category Axis

Type tutorial

Sometimes you will end up with an XY chart that has non-unique categories in its data. This tutorial will explain how to deal with such situation. Base chart We’re going to start off with a very basic XY chart that has a category axis, and some matching categories in its data: [{ “category”: “1st”, “value”: […]

Pre-zooming an axis

Type tutorial

This tutorial will explain how you can set up your charts to initialize pre-zoomed. Prerequisites This tutorial relies on event handlers. We recommend reading up on how events work in amCharts 4 in “Event Listeners” article. Reference chart Let’s start off with a simple date-based chart: Setting up pre-zoom There currently are no properties on […]