Dragging Pie Slices
<h2>Draggable anything</h2> Anything can be made "draggable" on the chart, including pie chart slices. This advanced demo shows how you can set <code>draggable</code>Â property on slices, and utilize event handlers to create a setup where you can drag slices from one chart to another.
by amcharts
HTML
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
CSS
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 500px;
}
JavaScript
/**
* --------------------------------------------------------
* This demo was created using amCharts V4 preview release.
*
* V4 is the latest installement in amCharts data viz
* library family, to be released in the first half of
* 2018.
*
* For more information and documentation visit:
* https://www.amcharts.com/docs/v4/
* --------------------------------------------------------
*/
// Set theme
am4core.useTheme(am4themes_animated);
let chart = {
"series": [
{
type: "PieSeries",
"dataFields": {
"value": "count",
"category": "__title",
},
"data": [
{
"_id": "http://example.com/mini-game",
"count": 84,
},
{
"_id": "http://example.com/simple-example",
"count": 80,
},
{
"_id": "http://example.com/standard-scenario",
"count": 52,
},
{
"_id": "http://example.com/cdiff-scenario",
"count": 48,
}
]
},
{
type: "PieSeries",
"dataFields": {
"value": "count",
"category": "__title",
},
"data": [
{
"_id": "http://example.com/simple-example",
"count": 92,
},
{
"_id": "http://example.com/mini-game",
"count": 30,
},
...