Toggle pie slice pullout via legend
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.
/** * --------------------------------------- * This demo was created using amCharts 5. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v5/ * --------------------------------------- */
// Create root element// https://www.amcharts.com/docs/v5/getting-started/#Root_elementvar root = am5.Root.new("chartdiv");
// Set themes// https://www.amcharts.com/docs/v5/concepts/themes/root.setThemes([am5themes_Animated.new(root)]);
// Create chart// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/var chart = root.container.children.push( am5percent.PieChart.new(root, { layout: root.verticalLayout, innerRadius: am5.percent(50) }));
// Create series// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Seriesvar series = chart.series.push( am5percent.PieSeries.new(root, { valueField: "value", categoryField: "category", alignLabels: false }));
series.labels.template.setAll({ textType: "circular", centerX: 0, centerY: 0});
// Set data// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_dataseries.data.setAll([ { value: 10, category: "One" }, { value: 9, category: "Two" }, { value: 6, category: "Three" }, { value: 5, category: "Four" }, { value: 4, category: "Five" }, { value: 3, category: "Six" }, { value: 1, category: "Seven" }]);
// Create legend// https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/var legend = chart.children.push( am5.Legend.new(root, { centerX: am5.percent(50), x: am5.percent(50), marginTop: 15, marginBottom: 15 }));
legend.data.setAll(series.dataItems);
// Add custom funcitonality to legendlegend.itemContainers.each(function (itemContainer) { itemContainer.events.removeType("click"); itemContainer.events.on("click", function (event) { var target = event.target; var dataItem = target.dataItem; if (dataItem) { var seriesDataItem = dataItem.dataContext; if (seriesDataItem) { var slice = seriesDataItem.get("slice"); if (slice && slice.set) { if (slice.get("active")) { slice.set("active", false); } else { slice.set("active", true); } } } } });});
// Play initial series animation// https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_seriesseries.appear(1000, 100);<div id="chartdiv"></div>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: 95vh;}{ "type": "PieChart", "settings": { "layout": { "type": "VerticalLayout" }, "innerRadius": { "type": "Percent", "value": 50 } }, "properties": { "series": [ "#series-0" ] }, "children": [ { "type": "Legend", "settings": { "centerX": { "type": "Percent", "value": 50 }, "x": { "type": "Percent", "value": 50 }, "marginTop": 15, "marginBottom": 15 }, "properties": { "data": "#series-0.dataItems" } } ], "refs": [ { "data-0": [ { "value": 10, "category": "One" }, { "value": 9, "category": "Two" }, { "value": 6, "category": "Three" }, { "value": 5, "category": "Four" }, { "value": 4, "category": "Five" }, { "value": 3, "category": "Six" }, { "value": 1, "category": "Seven" } ] }, { "series-0": { "type": "PieSeries", "settings": { "valueField": "value", "categoryField": "category", "alignLabels": false }, "properties": { "data": "#data-0", "labels": { "properties": { "template": { "settings": { "textType": "circular", "centerX": 0, "centerY": 0 } } } } } } } ]}toggle-pie-slice-pullout-via-legend