score:14

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="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.5.0/chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="chart"></canvas>

score:6

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 : https://www.chartjs.org/docs/latest/charts/bar.html#interactions

ref2 : https://www.chartjs.org/docs/latest/configuration/elements.html#point-configuration

hoping it may help someone like me.


Related Query

More Query from same tag