tutorial This tutorial will show how you can create the min charts, or simply sparklines. What is it? Sparklines (or micro/mini charts if you prefer) are super-small charts fitting in just a tens of pixels, but still able to convey the information. They are stripped of bare chart essentials like axes, grid, labels, legend, etc. In […]
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 […]
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 […]
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 […]
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 }, […]