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

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

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

Creating Translations

Type tutorial

amCharts 4 relies 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 […]

Automating report generation using Puppeteer

Type tutorial

DEPRECATION NOTICE Information provided in this article is deprecated and no longer valid, because of the deal-breaking issues with the Puppeteer. Please refer to “Automating report generation using Selenium Webdriver” for a working solution. If you need to automate the generation of chart images or PDF, utilities with a self contained browser are your best […]

Manipulating mouse cursor style

Type tutorial

This tutorial will explain how you can set mouse cursor style for various actions on an element, like hover or press. Cursor style properties Each element in amCharts 4 has two properties which you can use to set how mouse cursor will change when interacting with the element: Property Type Comment cursorDownStyle MouseCursorStyle Applied when […]

Adding chart titles and bottom text

Type tutorial

This short tutorial shows how you can add arbitrary text labels to the top or bottom of the chart, that will automatically adjust the size of the chart itself. Adding chart titles For chart titles, every chart instance has a titles property which holds a list template of Label objects. To create new title object, we just […]

Placing labels anywhere on the chart

Type tutorial

This tutorial shows how you can place arbitrary labels anywhere on the chart. Adding a label A label is represented by object of type Label. A chart is an instance of Container. Therefore, to create a child element (a label) in chart (container) we will use chart’s createChild(type) method: let label = chart.createChild(am4core.Label); label.text = “Hello […]