Hiding non-integer labels on Value Axis

Type tutorial

The granularity of Value axis labels depends on available space and some settings. Sometimes, when there’s enough space, and the range of values is not great, the axis will throw in intermediate non-integer values as labels. This tutorial will show how to hide those non-integer labels. Base chart Let’s use this bar chart as an […]

Creating trend lines

Type tutorial

Sometimes, on charts, the general appearance of the series does not make data tendencies very prominent. In those situations, you might want to add trend lines that explain the general dynamics. This tutorial explains, how you can use generic Line series as trend lines. Prerequisites We are going to assume you know your way around […]

Using adapters for value-sensitive bullet adjustments

Type tutorial

If your chart uses bullets – either as shapes or text labels – you might find yourself in situations where you might need to adjust certain aspect of bullet based on specific value or value change. It might be alignment of a label, or a color of dot. This article will explain how you can […]

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

Creating a Bullet Chart

Type tutorial

This short tutorial will show how to easily create a bullet chart. The chart Let’s start with the complete code to the chart, and dissect the code afterwards: /* Create chart instance */ let chart = am4core.create(“chartdiv”, am4charts.XYChart); chart.paddingRight = 25; /* Add data */ chart.data = [{ “category”: “Research”, “value”: 45, “target”: 80 }, […]

Disabling toggling of items in Legend

Type tutorial

Normally a Legend will allow toggling of its items. This will also toggle related items, like chart’s Series. This tutorial will show how to disable this default functionality. To disable toggling of items, all we have to do is to make those items non-clickable. Legend’s items are stored in its itemContainers template list. So all we […]

Handling repeating categories on Category Axis

Type tutorial

Sometimes you will end up with an XY chart that has non-unique categories in its data. This tutorial will explain how to deal with such situation. Base chart We’re going to start off with a very basic XY chart that has a category axis, and some matching categories in its data: [{ “category”: “1st”, “value”: […]

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

Wrapping, truncating, and auto-rotating axis labels

Type tutorial

This tutorial will explain how you can deal with very long axis labels, by wrapping and/or truncating them. Prerequisites If you haven’t done that already, we suggest you take a look at the “Positioning Axis Elements” article, which explains the principles about configuring Axis elements, including the concept of “axis renderer”. Moving forward we will […]

Chart Legend in an External Container

Type tutorial

This tutorial will show you how you can easily move your chart legend outside main container into a totally separate one. NOTE We’re going to be using Pie chart as an example in this tutorial. However, this applies to any other chart type that uses Legend. Base chart Let’s start with a basic Pie chart […]