Disabling SankeyDiagram initial animation

Type tutorial

This supershort tutorial will show how to disable SankeyDiagram’s initial “fold-out” animation. Disabling animation If you have “animated” theme enabled, SankeyDiagram will fold out its nodes from left to right when it first loads. For that specific animation, it uses its interpolationDuration setting. So, to make the nodes appear instantly, all we have to do […]

Clickable chart thumbnails

Type demo

This demo shows how we can use a custom function to defer chart instantiation and replace them with a thumbnail, which once clicked would be automatically replaced with a real chart.

Generating static charts

Type tutorial

Some dashboards require charts in them to be fully interactive. Some don’t. Sometimes we wish to churn out charts to the screen as as quick as possible, and with as little memory footprint as possible. This tutorial will walk through the process of generating static SVG for charts using a single chart template. Dynamic vs. […]

Trigger a replay of the chart initial animations

Type demo

Most of the elements on a chart – e.g. series or chart itself – have appear() method. Calling it will re-play whatever animation was played when the chart was first loaded, for example series morphing into place. This demo showcases this functionality.

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

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

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