Export menu in external container

Type tutorial

By default, the chart places its export menu in one of its corners. This tutorial will show how you can easily move it out of the chart and into any container on your page. The solution If you examine ExportMenu class, you’ll notice the property named container. By default it contains reference to the <div> […]

Plotting series from calculated values

Type tutorial

In XYChart we are used to plot series from the values that appear in data. This tutorial will show how we can plot from other auto-calculated values such as percent or change. Intro For an XYSeries to work – be it LineSeries, ColumnSeries, or some other type – we need to bind it to data. […]

Changing appearance of focused items

Type tutorial

amCharts 4 comes with extensive accessibility functionality, of which part is ability to highlight focused items with a high-contrast outline. This tutorial will show how you can modify the appearance of this outline. Default behavior Some chart elements – columns, buttons, bullets, or slices to name a few – are selectable via TAB key. When […]

Adding extra info in exported PDF

Type tutorial

amCharts 4 comes pre-loaded with extensive chart export functionality. Besides ability to export chart to various image and data formats, it can also export to PDF documents. This tutorial will show, how you can easily tap into this process to include extra information, like text, tables, and even images, into exported PDF. The task By […]

Modifying chart for export

Type tutorial

Version 4.6.8 brought a new feature to chart exporting functionality: ability to modify chart appearance any way we want before export. For example we’d like to watermark exported charts with an attribution message. Or we want to add any additional titles or info. This tutorial will show how we can do it. The task Let’s […]

Grouping axis labels using ranges

Type tutorial

This tutorial will show how you can use axis ranges to organize its labels into a groups. What is axis range? If you’re not familiar with axis ranges, we strongly suggest you take a look at the dedicated “Axis ranges” article. We’re going to be using some of the know how from the above article. […]

Plugin: Overlap Buster (experimental)

Type tutorial

This tutorial will show how you can use OverlapBuster plugin (available since version 4.6.2) to make overlapping items such as bullets, map markers, or just about any other element “explode” to sides when hovered, for easy access to them NOTE OverlapBuster is a plugin. For information about using plugins, refer to this article. Disclaimer Please […]

Customizing chart scrollbar

Type tutorial

Chart scrollbars come pre-configured with certain looks, in part influenced by used themes. This tutorial show how we can customize the looks of scrollbars. Test subject During the course of this tutorial we will be torturing a scrollbar of this chart: Customizing grips Let’s start by customizing the grips. Accessing grip objects Both of them […]

Making CurveChart labels follow axis angle

Type tutorial

CurveChart (or a TimeLine) is a new exciting chart product, allowing twisting and bending the charts into any custom shape. This tutorial will show how you can make labels of a curved axis follow its angle. Base chart Let’s start with a basic chart example we took from our “TimeLine Chart” article: The X axis […]