Using “sticky” tooltips

Type tutorial

Any element on a chart can have tooltipText set to display in form of a tooltip when hovered or touched. This tutorial will show how you can turn those tooltips into “sticky”, so they are always shown, without requiring to hover/touch the element. Requirements The functionality was introduced in version 4.5.4, so if you happen […]

Different tooltip content per each level of Force Directed nodes

Type tutorial

You can set what is displayed in a tooltip of ForceDirectedTree chart’s nodes using its tooltipText property. However, the same information will be used across different levels of node tree. This tutorial shows how you can use adapters to differentiate tooltip content based on level of node. Tooltip content As we already mentioned above, to […]

Clickable links in tooltips

Type tutorial

Tooltips are used in a number of places to provide contextual information on a hovered/tapped object, like a Slice of a Pie Chart, or a country on a map. By default, tooltips are completely static with no way to interact with them. This tutorial will explain how you can make them interactive, adding clickable links […]

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