Map with Orthographic (globe) projection

Type tutorial

This short tutorial will show how you can create a Globe out of your map using Orthographic projection. Setting projection As you may already know, each map can be displayed in a number of ways – projections. (more about it here) Each one has it’s own advantages and disadvantages. However, only one can be used […]

Highlight all polygons in Map Series on hover

Type tutorial

This tutorial will show how you can highlight all of the polygons in the same series, when just one of those is hovered. Prerequisites States and events The solution explained in this tutorial relies heavily on two amCharts 4 concepts: States and Event listeners. Make sure you’re familiar with both of the those (linked above). […]

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

Zooming to map area on click

Type tutorial

This tutorial will show how you can set up your map to automatically zoom to an area (i.e. country) when user clicks on or taps it. As you may be already aware if you got to this point, each area on the chart is configured using MapPolygonSeries template. This task is no different – we’ll be […]

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

Resetting Map Position/Zoom

Type tutorial

All Map Charts, unless disabled, can be panned and zoomed. This tutorial will explain how to reset map’s position and zoom to its original state via custom button or API. Resetting via API Easy way Map chart provides a dedicated goHome(duration) method. I wish it had a youredrunk parameter, but it only accepts a duration in milliseconds […]

Disabling zoom and pan on a Map Chart

Type tutorial

Normally, you can pan and zoom the Map Chart wit mouse and touch. This tutorial will explain how you can disable one or both of these actions. Disabling pan Panning (drag) events on a Map Chart are attached to a special container that holds all the series of the map. It’s accessible via chart’s seriesContainer property. […]

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

Creating custom maps

Type tutorial

The aim of this tutorial is to get you on the right track for creating your own maps in GeoJSON format, suitable for use with amCharts 4. GeoJSON, being an open standard has a lot of traction and support in mapping software community. Moving forward, we may incorporate more instructions here, so make sure you […]