• Open in:

Dragging Pie Slices

Interactivity in data visualization is the norm these days and amCharts excels at it. But we can also take it to the next level and enable users to manipulate the visuals. In this demo you can drag slices from one pie chart to the other and enable advanced visual data analysis driven by the user.

Key implementation details

To make slices draggable all you need to do is set draggable: true on the slice’s template. Then you just react when users “drop” the slice. This is done by handling the slice’s pointerup event.

Related tutorials

Build this chart with AI

The prompt below can be used to build this chart with AI. For best coding results, use the most advanced AI models, like Claude Opus 4.6 and GPT-5.3-Codex. For more info and tips, check out amCharts AI docs.

Create a dual donut chart layout with two pie charts side-by-side separated by a vertical dashed line labeled 'Drag slices over the line.' All slices are draggable between the two charts. When a slice is dragged across the center dividing line and released, it transfers from one chart to the other; otherwise it snaps back with a smooth animation. Use six countries (Lithuania, Estonia, Ireland, Germany, Australia, Austria) with numeric values. Each chart contains a hidden gray placeholder slice that appears only when all real slices are removed. Show tooltips and position labels directly on slices. Use amCharts 5 library.

Demo source