Change point size and color on hover in chartjs

Question

I have made a line chart using chartjs. Now I want is whenever someone hover on the points the points size and color will change. I tried with some options but didn’t manage to get it working. Can someone help me on this please?

javascript:

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
   }]
 }
})

Maybe [this](https://stackoverflow.com/questions/29287153/detecting-hover-events-over-parts-of-a-chart-using-chart-js) SO question could help. — Jeroen Heier, May 24 '17 at 18:34

score 16 · Accepted Answer · answered May 24 '17 at 17:57

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 8 · Answer 2 · answered May 06 '20 at 03:25

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.

Change point size and color on hover in chartjs

2 Answers2