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.

Variable link widths in ForceDirectedTree

Type tutorial

ForceDirectedTree is an exciting cool way to display relations between a number of entities. This tutorial will show how you can give those relations a quantitative value by applying custom width to each individual link. The task As mentioned in the preamble of this tutorial, all nodes on ForceDirectedTree are connected by links that are […]

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