Blink Pie Chart using fillOpacity - CanvasJS Javascript Chart

Blink Pie Chart using fillOpacity - CanvasJS Javascript Chart

by canvasjs

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", {
	title : {
		text : "Blink Pie Chart on mouse over Data-Series"
	},  
	toolTip:{
  enabled: false,
  },
	data : [{
			type : "pie",      
     	mouseover: blink,	
      mouseout: stop,
      highlightEnabled:false,
      fillOpacity: 1,
			dataPoints : [
				{ y : 44},
        { y : 44},
        { y : 44},
        { y : 44},
        { y : 44},
			]
		}
	]
});

var blinkId = null;
function blink(e){
    var dataSeries = e.dataSeries;
    
    dataSeries.fillOpacity = 0.5;
    chart.render();
    
	blinkId = setInterval(function(){
        if( dataSeries.fillOpacity === 0.5){            
            delete e.dataSeries.fillOpacity;
        }else{            
            dataSeries.fillOpacity = 0.5;
            }  
            
        chart.render();
    },500);
}

function stop(e){
 	  clearInterval(blinkId); 
    
    delete e.dataSeries.fillOpacity;
    chart.render();
}

chart.render();