Using Web Font Loader

Type tutorial

If you are using web fonts, you might have noticed an unpleasant moment when content is rendered before the font loads, making it re-render. Since the fonts have different heights and widths, the font being loaded or not may also affect measuring of elements and thus their placement. In some cases, if font is not […]

Creating themes

Type tutorial

amCharts 4 comes with a plethora of pre-made themes you can use for your charts. You can combine them by applying several themes to a single chart. But what, if you don’t find what you’re happy with? This tutorial will show how you can create your own theme. Prerequisites This tutorial shows how you can […]

Using filters

Type tutorial

amCharts 4 comes with a set of ready-made visual filters that you can apply to virtually any element. This tutorial will explain how you can use them. What is a filter? A filter is a method to quickly apply some visual enhancement or modification to an element. For example, you want your Line series to […]

Using U.S. county maps

Type tutorial

You might have not known that the geodata package for Map Chart includes not only country maps, but also detailed county maps for all U.S. states. Using county maps The county map files are located under region/usa subdirectory of the geodata package. If you are not familiar with the geodata package and how maps are loaded […]

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

Disabling mouse wheel zoom in maps

Type tutorial

While mouse wheel zooming on maps is a handy intuitive interaction, it may in some cases be frustrating when it interferes with the scrolling of the web page. This tutorial will show how to disable mouse wheel zooming on the Map chart. The interaction events on Map chart are mostly set on the chart’s chartContainer. […]

Setting initial zoom and position of a Map chart

Type tutorial

The Map will always start off fully zoomed out and centered. However, in some cases, you might want to start the map pre-zoomed to some place. This tutorial aims to explain how to do just that. The task We want a world map. However, we want it to start pre-zoomed to Europe. Finding zoom level […]

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