Setting position of the chart scrollbars

Type tutorial

Normally, scrollbars on an XY chart are placed on the top and right side. This tutorial will show how you can change their default position. Prerequisites This tutorial will refer to chart’s built-in containers a lot. Before you go further, make sure you read this: “Pre-defined chart containers”. Horizontal scrollbar Horizontal scrollbar is usually placed […]

Scrollbar-only XY Chart

Type tutorial

If you would like to use chart as a zoom control for your UI, you might want to display just chart’s scrollbar with a series preview in it, without showing the actual chart. This tutorial will show how. We’ll take a regular XY chart as an example. Add an XYChartScrollbar to it, as well as instruct […]

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

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