Using states on LineSeries

Type tutorial

This tutorial will show how we can use states to manipulate appearance of the LineSeries in a variety of situations. SIDE READING This tutorial relies on amCharts 4 concept of states, which is a way to dynamically apply collection of values to multiple properties of an element. For more information about states, read this article. […]

Ordering zIndex of series lines and bullets

Type tutorial

This tutorial will show how you can control layout and ordering of LineSeries lines and their bullets. Intro Suppose we have a LineSeries with bullets. By default bullets are drawn on top of the actual lines. Now, suppose we have several LineSeries – each with its own bullets. Some of the lines intersect with lines […]

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