Toggle visibility on legend click in pie chart - CanvasJS JavaScript Charts

Toggle visibility on legend click in pie chart - CanvasJS JavaScript Charts

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",{
  theme: "theme2",
  title:{
    text: "Gaming Consoles Sold in 2012"
  },
  legend: {
    itemclick: toggleDataPointVisibility
  },
  data: [
	{       
    type: "pyramid",
    showInLegend: true,
    toolTipContent: "{y} - #percent %",
    yValueFormatString: "#,##0,,.## Million",
    legendText: "{indexLabel}",
    dataPoints: [
      {  y: 3125844, indexLabel: "PlayStation 3"},
      {  y: 2175498, indexLabel: "Wii" },
      {  y: 3125844, indexLabel: "Xbox 360" },
      {  y: 1176121, indexLabel: "Nintendo DS"},
      {  y: 1727161, indexLabel: "PSP" },
      {  y: 4000000, indexLabel: "Nintendo 3DS"},
      {  y: 1717786, indexLabel: "PS Vita"}
    ]
	}]
});
chart.render();

function toggleDataPointVisibility(e) {
	if(e.dataPoint.hasOwnProperty("actualYValue") && e.dataPoint.actualYValue !== null) {
    e.dataPoint.y = e.dataPoint.actualYValue;
    e.dataPoint.actualYValue = null;
    e.dataPoint.indexLabelFontSize = null;
    e.dataPoint.indexLabelLineThickness = null;
    e.dataPoint.legendMarkerType = "circle";
  } 
  else {
    e.dataPoint.actualYValue = e.dataPoint.y;
    e.dataPoint.y = 0;
    e.dataPoint.indexLabelFontSize = 0;
    e.dataPoint.indexLabelLineThickness = 0; 
    e.dataPoint.legendMarkerType = "cross";
  }
  
	chart.render();
}