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

Positioning XY Cursor via API

Type tutorial

Sometimes you might need to programatically position your chart cursor. This tutorial will show how. Base chart Let’s use this stacked XY chart with a Cursor pre-configured: Placing cursor Our reference chart has a Category axis with categories like “One”, “Two”, “Three”, etc. We’d like to place our cursor at, say, “Three”. This means that […]

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

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

Dynamically adding and removing Series

Type tutorial

This tutorial will show how you can dynamically add and remove series to the chart. Adding series Adding a series to the chart is as simple as pushing a series object into chart’s series list: let series = new am4charts.LineSeries(); // configure series chart.series.push(series); var series = new am4charts.LineSeries(); // configure series chart.series.push(series); The chart will […]