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

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

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

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

Creating Translations

Type tutorial

amCharts 4 replies on locale files for localization of the charts. Locales are responsible for both translations of prompts and setting date/number formats. This tutorial will explain how you can make changes to existing translations, and create the new ones. If you ended up here, you probably already know how locales are used. On the […]

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