ricardocosta/chartjs_doughnut_hover.html

## chartjs_doughnut_hover.html
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"></canvas>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"> </script>
    <script>
      var ctx = document.getElementById("myChart");
      var lastactive = [];

      var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
          datasets: [{
            data: [
              Math.round(1 * 100),
              Math.round(2 * 100),
              Math.round(3 * 100),
              Math.round(5 * 100),
              Math.round(8 * 100)
            ],
            borderWidth: 0,
            backgroundColor: [
              '#C8102E',
              '#F6D155',
              '#F2552C',
              '#88B04B',
              '#5487A4'
            ],
            hoverBorderWidth: 0,
            label: 'Dataset 1'
          }],
          labels: [
            'Red',
            'Yellow',
            'Orange',
            'Green',
            'Blue'
          ]
        },
        options: {
          animationDuration: 100,
          hover: {
            onHover: function(e, el) {
              var currentIndex = el[0] && el[0]._index
              var lastIndex = lastactive[0] && lastactive[0]._index

              if (currentIndex == lastIndex) {
                return;
              } else if (el[0]) {
                el[0]._chart.update()
                el[0]._model.outerRadius += 10
                lastactive = el
              } else {
                lastactive[0]._chart.update()
                lastactive = []
              }
            }
          },
          onClick: function() {console.log('clicked')},
          cutoutPercentage: 80,
          maintainAspectRatio: false,
          animation: {
            easing: 'linear',
            duration: 5000
          },
          legend: {
            display: false
          },
          layout: {
            padding: 30
          }
        }
      });
    </script>
  </body>
</html>
	<html>
	<body>
	<div class="myChartDiv">
	<canvas id="myChart" width="600" height="400"></canvas>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"> </script>
	<script>
	var ctx = document.getElementById("myChart");
	var lastactive = [];

	var myChart = new Chart(ctx, {
	type: 'doughnut',
	data: {
	datasets: [{
	data: [
	Math.round(1 * 100),
	Math.round(2 * 100),
	Math.round(3 * 100),
	Math.round(5 * 100),
	Math.round(8 * 100)
	],
	borderWidth: 0,
	backgroundColor: [
	'#C8102E',
	'#F6D155',
	'#F2552C',
	'#88B04B',
	'#5487A4'
	],
	hoverBorderWidth: 0,
	label: 'Dataset 1'
	}],
	labels: [
	'Red',
	'Yellow',
	'Orange',
	'Green',
	'Blue'
	]
	},
	options: {
	animationDuration: 100,
	hover: {
	onHover: function(e, el) {
	var currentIndex = el[0] && el[0]._index
	var lastIndex = lastactive[0] && lastactive[0]._index

	if (currentIndex == lastIndex) {
	return;
	} else if (el[0]) {
	el[0]._chart.update()
	el[0]._model.outerRadius += 10
	lastactive = el
	} else {
	lastactive[0]._chart.update()
	lastactive = []
	}
	}
	},
	onClick: function() {console.log('clicked')},
	cutoutPercentage: 80,
	maintainAspectRatio: false,
	animation: {
	easing: 'linear',
	duration: 5000
	},
	legend: {
	display: false
	},
	layout: {
	padding: 30
	}
	}
	});
	</script>
	</body>
	</html>