Change Point Size And Color On Hover In Chartjs

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>

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.