Accepted answer

To change the data point­'s color and size on hover, you'll need to set pointHoverBackgroundColor and pointHoverRadius property (as needed) respectively for the dataset, like so ...

datasets: [{
   pointHoverRadius: 5,
   pointHoverBackgroundColor: 'red'


var ctx = $('#chart');
var myLineChart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: [1, 2, 3, 4, 5],
      datasets: [{
         label: '# of votes',
         data: [1, 2, 3, 4, 5],
         fill: false,
         pointHoverRadius: 5,
         pointHoverBackgroundColor: 'red'
<script src=""></script>
<script src=""></script>
<canvas id="chart"></canvas>


Answering an old thread as accepted answer didn't work for me for bar-chart using ChartsJS. May be that was older version or the question was not for bar-chart, not sure. The following works on v2.8 for bar-chart:

hoverBackgroundColor: 'red',
hoverBorderColor: 'blue',
hoverBorderWidth : '3'

Ref1 :

Ref2 :

Hoping it may help someone like me.

Related Query

More Query from same tag