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

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

Replacing default export icon

Type tutorial

This tutorial will show how you can easily replace the default … in export menu’s top level item with a custom image. Default behavior Export menu displays a button with a triple dot in it: Let’s change it to something else. Top-menu item The menu which is an object of type ExportMenu has a property […]

Using “sticky” tooltips

Type tutorial

Any element on a chart can have tooltipText set to display in form of a tooltip when hovered or touched. This tutorial will show how you can turn those tooltips into “sticky”, so they are always shown, without requiring to hover/touch the element. Requirements The functionality was introduced in version 4.5.4, so if you happen […]

Windows “high contrast” mode

Type tutorial

As an aid to vision-impaired users MS Windows operating system offers a “high contrast” mode. While most of the modern browsers have no issues with it, there are some quirks affecting chart visibility in older Internet Explorer and EDGE browsers. This tutorial shows a quick workaround. The problem Internet Explorer and EDGE browsers, when Windows […]

Transferring demos from amcharts.com, CodePen or jsFiddle into WordPress

Type tutorial

If you are using amCharts WordPress plugin, you might be wondering how to transfer ready-made demos from amcharts.com website, or ones that you find scattered around on CodePen or jsFiddle services. This tutorial will provide a short instructions on how to do so. Most of the amCharts demos you find will be shown on either […]

Using amCharts WordPress plugin

Type tutorial

WordPress being the single most used web publishing platform, is perfect for when you want your website up and running in minutes. However, when it comes to dynamic content, such as JavaScript, you’ll find that there’s practically no options in the plain vanilla WP install. This is precisely the reason why we went ahead and […]

Using superscript and subscript in labels

Type tutorial

This short tutorial will show how you can make parts of any label super- or sub-script using amCharts 4’s in-line text formatting syntax. Enabling PREREQUISITE If you don’t know how square bracket text formatting works, make sure you read the “Visual formatting” section in our Text formatting article. Basically, a square bracket blocks in any […]