Custom static multi-value tooltip

Type tutorial

Its easy to consolidate a lot of data into a single tooltip that is displayed over Series using Cursor. We’ve covered it in this tutorial. But what if we don’t want a huge square following our cursor, and would rather display that info in a fixed place in the corner? Read on, as we show […]

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

Styling or removing tooltip shadow

Type tutorial

Most of the elements on charts can display a tooltip when hovered. By default, a tooltip will cast a slight shadow behind it. This tutorial will explain on how to style it, or get rid of it altogether. Accessing tooltip Before we can start, let’s see how we can access the tooltip, that is Tooltip […]

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

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

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