Using axis ranges to highlight weekends

Type tutorial

Axis ranges is a good way to highlight specific places or stretches along an axis. This tutorial will show how we can create code to automatically create axis ranges to highlight weekends on a DateAxis. The task Say, we have a chart that shows line series along a date-based axis. To make our user understand […]

Exporting data for visible series only

Type tutorial

Normally, using amCharts 4 data exporting functionality, the chart dumps all available source data. This short tutorial will show code which assures that only currently visible series data is exported. Limiting exported fields By default all source data (as set in chart’s data) is exported. We can control what fields are exported using export’s setting […]

About “Chart was not disposed” warning

Type tutorial

Are you getting a “Chart was not disposed” warning in your browser console? You’re doing something wrong. Read on for an explanation. When the warning is displayed? When you instantiate a chart, it creates a bunch of objects as well as other stuff like event handlers. All those things occupy computer memory and consume some […]

Tackling label background

Type tutorial

In amCharts 4, labels – be it bullets, axis values, or just about any other text – are not limited to just font size and color. This tutorial will show how you can set background color and shape for them as well. Enabling label background Whenever you see text on a chart, it is represented […]

Formatting date/time and numbers using “Intl” object

Type tutorial

The¬†Intl¬†object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting. This tutorial will show how you can use Intl options and locales for date/time and number formatting in place of string-based amCharts format definitions. Intro amCharts 4 uses DateFormatter and NumberFormatter objects to […]

Using states on LineSeries

Type tutorial

This tutorial will show how we can use states to manipulate appearance of the LineSeries in a variety of situations. SIDE READING This tutorial relies on amCharts 4 concept of states, which is a way to dynamically apply collection of values to multiple properties of an element. For more information about states, read this article. […]

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