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

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 of the related slice.

The below code will do just that:

chart.legend.itemContainers.template.togglable = false;
chart.legend.itemContainers.template.events.on("hit", function(ev) {
  var slice = ev.target.dataItem.dataContext.slice;
  slice.isActive = !slice.isActive;
});

TypeScript

chart.legend.itemContainers.template.togglable = false;
chart.legend.itemContainers.template.events.on("hit", function(ev) {
  var slice = ev.target.dataItem.dataContext.slice;
  slice.isActive = !slice.isActive;
});

JSON

{
  // ...
  "legend": {
    // ...
   "events": {
     "hit": function(ev) {
       var slice = ev.target.dataItem.dataContext.slice;
       slice.isActive = !slice.isActive;
     }
   }
}

Example

Open in CodePen

Restricting to one pulled slice

Let’s mod our code further to allow only one pulled out slice at a time.

TypeScript

chart.legend.itemContainers.template.events.on("hit", function(ev) {
  let slice = ev.target.dataItem.dataContext.slice;
  pieSeries.slices.each(function(item) {
    if (item != slice) {
      item.isActive = false;
    }
    else {
      slice.isActive = !slice.isActive;
    }
  });
});

JavaScript

chart.legend.itemContainers.template.events.on("hit", function(ev) {
  var slice = ev.target.dataItem.dataContext.slice;
  pieSeries.slices.each(function(item) {
    if (item != slice) {
      item.isActive = false;
    }
    else {
      slice.isActive = !slice.isActive;
    }
  });
});

JSON

{
  // ...
  "legend": {
    // ...
   "events": {
     "hit": function(ev) {
        var slice = ev.target.dataItem.dataContext.slice;
        pieSeries.slices.each(function(item) {
         if (item != slice) {
           item.isActive = false;
         }
         else {
           slice.isActive = !slice.isActive;
         }
       });
     }
   }
}

Open in CodePen

Related tutorials

• Disabling toggling of items in Legend