Plotting series from calculated values

Type tutorial

In XYChart we are used to plot series from the values that appear in data. This tutorial will show how we can plot from other auto-calculated values such as percent or change. Intro For an XYSeries to work – be it LineSeries, ColumnSeries, or some other type – we need to bind it to data. […]

Lighten fill color for each level of Force Directed Tree

Type tutorial

This short but useful tutorial will show how you can automatically make node fill color lighter with each subsequent level of a nodes with each subsequent level in a Force Directed Tree. The task By default, ForceDirectedSeries colors node with a solid color. Its direct descendants, as well as their descendants inherit same color throughout […]

Making CurveChart labels follow axis angle

Type tutorial

CurveChart (or a TimeLine) is a new exciting chart product, allowing twisting and bending the charts into any custom shape. This tutorial will show how you can make labels of a curved axis follow its angle. Base chart Let’s start with a basic chart example we took from our “TimeLine Chart” article: The X axis […]

Different tooltip content per each level of Force Directed nodes

Type tutorial

You can set what is displayed in a tooltip of ForceDirectedTree chart’s nodes using its tooltipText property. However, the same information will be used across different levels of node tree. This tutorial shows how you can use adapters to differentiate tooltip content based on level of node. Tooltip content As we already mentioned above, to […]

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

Different column fill colors for positive and negative values

Type tutorial

This tutorial will explain how you can use adapters to fill columns to different colors, based on their value. The task Let’s say we have a column chart that has both positive and negative values. Right now, all of the columns are filled with a single color. What we want to do, is to color […]

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

Selectively positioning Sankey diagram labels

Type tutorial

It’s possible to selectively specify the location of Sankey diagram labels, based on the position of their parent Nodes. This tutorial will show how. Base chart The labels are all placed to the right of their respective nodes. To make the chart look nicer, lets make labels of the right-most nodes placed to the left […]

Selectively offsetting axis labels

Type tutorial

Normally, a chart will try to hide axis labels so they do not overlap. However, you might need them all displayed. One option is to rotate labels. Other option is discussed in this tutorial. Base chart The following chart was set up to show all labels, regardless if they are overlapping. categoryAxis.renderer.minGridDistance = 30; categoryAxis.renderer.minGridDistance […]

Stacked column series with rounded corners

Type tutorial

This quick tutorial shows how you can inventively use adapters to apply custom formatting options to stacks of columns. The task Suppose, we have a stacked column chart. And want the top of the each stack to have rounded corners. Here’s our target chart, BTW: Rounding the corners One way to go about rounding the […]