Activate/deactivate a pie slice on legend click instead of toggling

Type tutorial

Normally, when you click an item in PieChart’s legend, relative slice is hidden or revealed. This quick tutorial will show you how to make the slice activate/deactivate (pull out/in) instead. Setting up To make this work we’ll have to do two things: Disable regular toggling of the items. Add custom event that toggles isActive state […]

Clickable links in tooltips

Type tutorial

Tooltips are used in a number of places to provide contextual information on a hovered/tapped object, like a Slice of a Pie Chart, or a country on a map. By default, tooltips are completely static with no way to interact with them. This tutorial will explain how you can make them interactive, adding clickable links […]

Disabling default hover and click effects on Pie Chart

Type tutorial

When you hover over a slice on a Pie Chart it slightly grows. When you click it, it pulls out a bit out of place. This tutorial will show how you can disable this default behavior. How it works? It is controlled by states. When you hover something, a “hover” state is applied to the […]

Sum label inside a donut chart

Type tutorial

The defining characteristic of each donut, including donut charts, is its hole. It’s a space that can be used for good. This tutorial will show how we can easily add some labels inside it to display complementing information, such as sum of values for all the slices. Adding a label Most of the elements in […]

Plugin: Slice Grouper

Type tutorial

This tutorial will show how you can use SliceGrouper plugin (available since version 4.3.11) to automatically group small slices on Pie, Funnel, Pyramid, or Pictorial Stacked series into a single expandable “Other” slice. NOTE SliceGrouper is a plugin. For information about using plugins, refer to this article. Purpose “Percent” charts such as Pie, Funnel, Pyramid, […]

Non-standard legend alignment

Type tutorial

You can use position to place chart Legend on top, bottom, left, or right. In all those cases, Legend will center across the edge it is placed on. This tutorial will show some other alignment options. Left and right positions When legend position is set to either “left” or “right”, it is aligned vertically to […]

Clustered Pie Charts

Type tutorial

This short tutorial will show how we can leverage amCharts 4 containers and automated layouts to display multiple Pie charts in a single <div>. The challenge of multiple pie series When we have a simple Pie chart, it’s easy. We just create a chart and get a pie. But what if we have several series […]

Generating multi-content PDF export

Type tutorial

This extensive tutorial will show how you can use pdfmake library, which is bundled with amCharts, to generate full page, multi-content report PDF documents. Disclaimer Majority of this tutorial is based on using pdfmake. It’s an excellent third party library enabling generating PDF documents in JavaScript. Our aim is to walk you through basics of […]

Creating Pie Series Animations

Type tutorial

By default (if you are using “animated” theme), Pie series will fade in when chart initializes. Let’s explore how we can fancy-up those animations. Base chart Let’s take this chart as a base: As you can see, it just fades in. Boooooring. Let’s fix that. The concepts But, before we jump to unicorns and rainbows, […]

Automating report generation using Selenium Webdriver

Type tutorial

If you need to automate the generation of chart images or PDF, Selenium Webdriver might be the best option. It can handle different browsers even though this example only shows it using Firefox. Setting up Install NodeJS Install Firefox Create a folder Create a file called package.json in the new folder with the content shown […]