Auto-hide value axes

Type tutorial

Normally, all initialized Value Axes are shown, even if they do not have any visible Series attached to them. This also means that when Series is toggled off, the related Value Axis will remain. This tutorial will show how we can toggle axes off together with Series. The problem Let’s take a simple multi-series multi-axes […]

Multi-color XY heatmap

Type tutorial

Normally, heatmaps that use “heat rules” are restricted to two colors as well as gradient in-between. In tutorial we’ll see how we can use adapters to apply any number of colors to heat map based on source value. The task During the course of this tutorial we’ll transform the chart to color columns in series […]

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

Disabling XY series initial animations

Type tutorial

By default, when “animated” theme is enabled, all XY series will show initial animation, growing from zero to their absolute values. This tutorial will show how you can disable that effect, without interfering with the rest of the animations. Disabling Disabling this initial effect is easy: each series has a setting showOnInit. The “animated” theme […]

“Sticky” chart cursor

Type tutorial

Normal XYCursor is hidden automatically when plot area is no longer hovered. This tutorial shows how you can easily make it “sticky”, that is make it stay in its last known location. Enabling XYCursor does not have a built-in setting to make it “sticky”, so we’ll have to improvise. For that we’ll use two components: […]

Disabling scrollbar grips

Type tutorial

This short tutorial will show how you can disable grip buttons on chart Scrollbar. Here’s a regular scrollbar: Scrollbar’s grips are accessible via its startGrip and endGrip properties. To disable them, simply use their disabled properties: chart.scrollbarX.startGrip.disabled = true;chart.scrollbarX.endGrip.disabled = true; chart.scrollbarX.startGrip.disabled = true;chart.scrollbarX.endGrip.disabled = true; { // … “scrollbarX”: { “type”: “Scrollbar”, “startGrip”: { […]

Creating Timeline Charts

Type tutorial

This tutorial will explain how you can use regular Line Series to create functional timelines, complete with bullets and annotations. Creating a chart Data Since basic Timeline charts are used to depict sequence of events, rather than exact time or value scale, exact values in our data are not important. However, since we are going […]

Stacked Axes

Type tutorial

This tutorial will introduce you to a powerful concept of “axis stacking”. What is it? amCharts 4 allows having multiple axes of any type. For example, you can have three series attached to three separate Value axes. In a traditional charts those value axes might be put either to left or right, but they will […]

Taming Candlestick Series

Type tutorial

Candlesticks are a good way to depict data dynamics using variety of metrics. Instead of single value – used on most series – candlesticks use four: open, high, low, and close. This tutorial will explain how to set up and configure Candlestick series. Adding and setting up Adding a CandlestickSeries is no different than adding […]

Using Error Bullets

Type tutorial

Error bullets are special kind of bullets that help illustrate error margin for the particular series value. This tutorial will explain how you can add those to amCharts 4 series. Adding error bullet REQUIRED READING If you’re not familiar how bullets are used in amCharts 4, we suggest you run by “Bullets” article first. To […]