Change point size and color on hover in chartjs
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.