Individual legend item for each column

Type tutorial

Normally on an XY Chart, Legend creates a single item for each Series. This brief tutorial will show how you can create custom legend which will show an item for each individual column in a single Column series. Base chart Let’s take this chart as a base. It uses an adapter to color each column […]

Retrieving information of a clicked Map Object

Type tutorial

In this tutorial we’ve seen how we can zoom in on a clicked country. We’re going to build on that to retrieve information about clicked object. Base map As mentioned in the preamble, we’re going to be using a map, created in another tutorial. The “Zooming to a map area on click” tutorial explains how […]

Using “fill rules” on a Date Axis

Type tutorial

This tutorial will show how to highlight weekends on a Date Axis. It will explain how you can use custom function to force your own custom logic in determining what ranges of dates should be highlighted and how. Base chart Let’s take a simple Date-based chart. Enabling axis fills We do have nice clean grid. […]

Using custom map zoom settings for individual countries

Type tutorial

Our Map Chart allows zooming directly to a specific polygon (country). However, for some countries, automatically-calculated zoom settings might not cut it. This tutorial will explain how you can use Polygon series data to override default zoom settings with custom ones. The problem We can make the chart zoom to a specific country using zoomToMapObject() […]

Creating custom filters

Type tutorial

amCharts 4 comes with a few basic rudimentary filters like “drop shadow”, “desaturate”, and a few others. However, you can do much much more with SVG filters. This tutorial will explain how you can create your own custom amCharts 4-compatible filter classes. What is a Filter? SVG filters An SVG filter (represented by <filter> tag) […]

Auto-adjusting chart height based on a number of data items

Type tutorial

This tutorial will explain how you can easily make your chart grow or contract based on an actual number of data. The problem Let’s take a simple bar chart: It looks OK. However, it height is fixed, so if we had more bars, it might start looking a bit awkward: Or, if there are too […]

Pre-zooming Map to a Country

Type tutorial

You can pre-zoom the map to certain coordinates and level. If you don’t want to do that, you can make the chart pre-zoom to a particular country. This tutorial will explain how. Zooming to country The Map chart has a dedicated method for zooming to a polygon (country) of our choice: zoomToMapObject(object). The name leaves […]

One pulled slice per Pie chart

Type tutorial

Normally, when you click/tap a slice on a Pie chart, it would pull out a little. You can have multiple slices pulled out that way. This tutorial will show how you can set up Pie chart in order to allow only one slice to be pulled at any given time. Task We want the slice […]

Adding “Home” Button to Map Chart

Type tutorial

Map Chart can be zoomed and panned. There is, however, no built-in “go home” button. This tutorial will show how to add one which resets map’s zoom and position to initial state. Base map Let’s use this very basic map as our test subject. We can pan the map by dragging with a mouse or […]

Custom Loading Indicator

Type tutorial

This tutorial will show how you can create your own custom loading indicator over chart. The task Supposedly we have a complex chart, with loads of data, which needs to be loaded from server, parsed, digested and visualized. We don’t want the empty space of a chart just sit there, so we’d like to display […]