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

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

Positioning XY Cursor via API

Type tutorial

Sometimes you might need to programatically position your chart cursor. This tutorial will show how. Base chart Let’s use this stacked XY chart with a Cursor pre-configured: Placing cursor Our reference chart has a Category axis with categories like “One”, “Two”, “Three”, etc. We’d like to place our cursor at, say, “Three”. This means that […]

Adding watermarks to charts

Type tutorial

This tutorial will show how your can brand your charts using different kinds of watermarking techniques. Prerequisites Containers and patterns This tutorial will rely on two amCharts 4 concepts: Containers and Patterns. Containers will are used to add and arrange stuff to various parts of the chart. We’ll use them to add watermarks. Make sure […]

Dynamically adding and removing Series

Type tutorial

This tutorial will show how you can dynamically add and remove series to the chart. Adding series Adding a series to the chart is as simple as pushing a series object into chart’s seriesĀ list: let series = new am4charts.LineSeries(); // configure series chart.series.push(series); var series = new am4charts.LineSeries(); // configure series chart.series.push(series); The chart will […]

Creating Translations

Type tutorial

amCharts 4 replies on locale files for localization of the charts. Locales are responsible for both translations of prompts and setting date/number formats. This tutorial will explain how you can make changes to existing translations, and create the new ones. If you ended up here, you probably already know how locales are used. On the […]

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

Disabling toggling of items in Legend

Type tutorial

Normally a Legend will allow toggling of its items. This will also toggle related items, like chart’s Series. This tutorial will show how to disable this default functionality. To disable toggling of items, all we have to do is to make those items non-clickable. Legend’s items are stored in its itemContainers template list. So all we […]