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

Curved Column Series

Type tutorial

This quick tutorial will serve as an introduction to the special type of series – CurvedColumnSeries. Prerequisites Just so we’re in a familiar territory, let’s start with a basic column chart. It has one Column series, with an adapter coloring each column a new color. Your just everyday normal column chart. Turning on the waves […]

Round tooltips

Type tutorial

Normally, tooltips in charts take square shape to match the content within. This quick tutorial will show how to configure Tooltip object to resemble a round fixed-radius shape. Base chart We’re going to start off with a basic chart that has one line series, a cursor and regular tooltips enabled: As you can 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 […]

Overriding series’ tooltip fill color

Type tutorial

Normally, a Tooltip that is displayed when you hover or touch a series’ item – slice, column, etc. – is colored the same way as the related object. This quick tutorial will show you how to override that color. To turn off “inheritance” of color from related object, we can set getFillFromObject = false for the […]

Building a Waterfall chart

Type tutorial

Waterfall chart is a special kind of chart consisting of floating columns that relate each other via their open and close values. This tutorial will explain how you can build one with amCharts 4 by combining Column and Step line series on an XY chart. Prerequisites This tutorial relies experience creating XY charts and its […]

Creating sparkline charts

Type tutorial

This tutorial will show how you can create the min charts, or simply sparklines. What is it? Sparklines (or micro/mini charts if you prefer) are super-small charts fitting in just a tens of pixels, but still able to convey the information. They are stripped of bare chart essentials like axes, grid, labels, legend, etc. In […]

Using adapters to modify legend item appearance

Type tutorial

Normally the Legend will either display identical markers for all items, or make them look like their related series. This tutorial shows how you can use adapters to further customize each individual item in Legend. Prerequisites First of all, we’ll need to know what adapters are. Those are custom functions that you attach to an […]

Setting position of the chart scrollbars

Type tutorial

Normally, scrollbars on an XY chart are placed on the top and right side. This tutorial will show how you can change their default position. Prerequisites This tutorial will refer to chart’s built-in containers a lot. Before you go further, make sure you read this: “Pre-defined chart containers”. Horizontal scrollbar Horizontal scrollbar is usually placed […]

Scrollbar-only XY Chart

Type tutorial

If you would like to use chart as a zoom control for your UI, you might want to display just chart’s scrollbar with a series preview in it, without showing the actual chart. This tutorial will show how. We’ll take a regular XY chart as an example. Add an XYChartScrollbar to it, as well as instruct […]