Configuring the zoom out button

Type tutorial

When XYChart is zoomed in, a small round button appears in the corner to indicate that only partial data is show, and to provide means to zoom back out. This tutorial will show how you can configure, or outright disable this control. Button element The zoom out button is accessible via chart’s zoomOutButton property. It’s […]

Handling axis zoom events via API

Type tutorial

Any axis in amCharts 4 can be zoomed. And sometimes we need to know when that happens, as well as the range of the new zoom. This tutorial will walk through all the necessary information to make that happen. This works a bit differently on different axis types, so we’ll explore them separately. Catching zoom […]

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

Setting minimal width of Scrollbar thumb

Type tutorial

This tutorial will explain how you can set minimal width/height of the chart Scrollbar’s “thumb” – draggable middle section. The problem OK, so you added a scrollbar (or a couple of) to your chart. This is great because it allows your users to zoom the chart as well as pan the selection. The thumb – […]

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

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

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

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

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

Pre-zooming an axis

Type tutorial

This tutorial will explain how you can set up your charts to initialize pre-zoomed. Prerequisites This tutorial relies on event handlers. We recommend reading up on how events work in amCharts 4 in “Event Listeners” article. Reference chart Let’s start off with a simple date-based chart: Setting up pre-zoom There currently are no properties on […]