Projected circles over map

Type tutorial

This tutorial will show how you can add “projected circles” on the map. Projected circles respect map projection and look much more natural, as if they were “laid down” on the ground, not stuck as pins. How to add regular images to map is covered pretty well in “Image series” section of our Map chart […]

Using actual images in MapImageSeries

Type tutorial

In our main Map Chart article we have touched the topic of creating an image series, feeding them data, and positioning them. However, we were operating using plain, same shapes. This tutorial will show how we can use actual images as markers on the map. Using same image Explaining MapImageSeries in our Map Chart article, […]

Pre-zooming Map to a list of countries

Type tutorial

In this tutorial we explained how you can pre-zoom your map to a specific country. This tutorial builds on it to produce an example that pre-zooms the map to several countries. One-country solution In the previous tutorial we have used Map series’ method getPolygonById(id) to extract a polygon object of a specific country by its […]

Using “d3-geo” projections

Type tutorial

There are quite a few projections built-into amCharts 4. However, if you are not finding one that suits your needs, you can use one from “d3-geo” package. This tutorial will explain how. Finding a D3 projection D3 has a list of supported projections on their GitHub page. When sifting through the list, note the function […]

Automatic labels over map polygons

Type tutorial

During the course of this article we’re going to learn how to automatically place labels over map polygons, as well as make them positioned just the right way. Base map As a polygon of our development, let’s use a map of the United States in an Albers USA projection. Series for polygons Setting up Polygon […]

Using Albers USA projection

Type tutorial

The most common depiction of a map of the United States is one that shows Alaska and Hawaii placed right below mainland USA. This allows this map to be more compact and usable, in comparison how it would be if both of those states were in their usual places. This way of depicting USA map […]

Generating multi-content PDF export

Type tutorial

This extensive tutorial will show how you can use pdfmake library, which is bundled with amCharts, to generate full page, multi-content report PDF documents. Disclaimer Majority of this tutorial is based on using pdfmake. It’s an excellent third party library enabling generating PDF documents in JavaScript. Our aim is to walk you through basics of […]

Hide map images until zoomed in

Type tutorial

Showing a lot of markers on the map may render it cluttered beyond usability. This tutorial will show how you can easily specify custom zoom levels for each individual image to be shown at. The problem Say we have a map with a lot of images in a MapImageSeries: While not exactly “unusable”, still a […]

Automating report generation using Selenium Webdriver

Type tutorial

If you need to automate the generation of chart images or PDF, Selenium Webdriver might be the best option. It can handle different browsers even though this example only shows it using Firefox. Setting up Install NodeJS Install Firefox Create a folder Create a file called package.json in the new folder with the content shown […]

Chart element class names and CSS

Type tutorial

amCharts 4 allows automatically adding element-specific class attributes to its SVG elements for easy targeting via CSS selectors. This tutorial explains how to enable and use them. Enabling class names By default, when chart is generating SVG elements, no class attributes are added to it’s element. Let’s take a simple Line series with bullets: The […]