Toggling series via API

Type tutorial

Need to toggle series on and off via code? This short tutorial will show how. Hiding or showing Series in amCharts is a Sprite object. And just like any Sprite object, it can be toggled off by calling its hide() method, and shown back on by show(). That is it. You just call the respective […]

Toggling multiple series with a single legend item

Type tutorial

This tutorial will show how you can toggle several Series at once, with a single Legend item. Base chart Let’s start with a basic chart with three Line series. Each Series has its own entry in the Legend. Click any of those will toggle its corresponding Series on and off. Suppose, we need to have […]

Generating multi-content PDF export

Type tutorial

This extensive tutorial will show how you can use pdfmake library, which is bundled with amCharts, to generate full page, multi-content report PDF documents. Disclaimer Majority of this tutorial is based on using pdfmake. It’s an excellent third party library enabling generating PDF documents in JavaScript. Our aim is to walk you through basics of […]

Creating Timeline Charts

Type tutorial

This tutorial will explain how you can use regular Line Series to create functional timelines, complete with bullets and annotations. Creating a chart Data Since basic Timeline charts are used to depict sequence of events, rather than exact time or value scale, exact values in our data are not important. However, since we are going […]

Stacked Axes

Type tutorial

This tutorial will introduce you to a powerful concept of “axis stacking”. What is it? amCharts 4 allows having multiple axes of any type. For example, you can have three series attached to three separate Value axes. In a traditional charts those value axes might be put either to left or right, but they will […]

Custom static multi-value tooltip

Type tutorial

Its easy to consolidate a lot of data into a single tooltip that is displayed over Series using Cursor. We’ve covered it in this tutorial. But what if we don’t want a huge square following our cursor, and would rather display that info in a fixed place in the corner? Read on, as we show […]

Automating report generation using Selenium Webdriver

Type tutorial

If you need to automate the generation of chart images or PDF, Selenium Webdriver might be the best option. It can handle different browsers even though this example only shows it using Firefox. Setting up Install NodeJS Install Firefox Create a folder Create a file called package.json in the new folder with the content shown […]

Taming Candlestick Series

Type tutorial

Candlesticks are a good way to depict data dynamics using variety of metrics. Instead of single value – used on most series – candlesticks use four: open, high, low, and close. This tutorial will explain how to set up and configure Candlestick series. Adding and setting up Adding a CandlestickSeries is no different than adding […]

Individual legend item for each column

Type tutorial

Normally on an XY Chart, Legend creates a single item for each Series. This brief tutorial will show how you can create custom legend which will show an item for each individual column in a single Column series. Base chart Let’s take this chart as a base. It uses an adapter to color each column […]

Chart element class names and CSS

Type tutorial

amCharts 4 allows automatically adding element-specific class attributes to its SVG elements for easy targeting via CSS selectors. This tutorial explains how to enable and use them. Enabling class names By default, when chart is generating SVG elements, no class attributes are added to it’s element. Let’s take a simple Line series with bullets: The […]