i'm using Chart.js to create radar graphs. i've set up the size (radius) of data points for each dataset. however, when i hover over the data point, the radius gets smaller and stays that way aterwards, like this:
here's how i generate the graph:
new Chart($('#graph'), {
type: 'radar',
data: {
labels: ['a','b','c'],
datasets: [
{
label: 'aaa',
data: [10,15,5],
backgroundColor: 'rgba(247, 151, 35, 0.5)',
borderColor: 'rgba(247, 151, 35, 1)',
pointBackgroundColor: 'rgba(247, 151, 35, 1)',
pointBorderColor: "#fff",
pointRadius: 5,
borderWidth: 1
}
]
},
options: {
scale: {
type: 'radialLinear',
ticks: {
// hide tick labels
display: false,
min: 0,
max: 20,
stepSize: 1
},
gridLines: {
// hide lines
display: false
}
},
legend: {
position: 'bottom'
}
}
});
and here's a fiddle where you can see the effect for yourself:
how can i make the data points retain the size i have set, so that nothing would change when i hover? and why is this happening in the first place?
2 Answers
For some reasons the Chart.js doesn't seem to be honoring the pointRadius value for which you may need to add the radius property set to the same value of your pointRadius which will resolve the issue.
Something like this,
radius: 5,
pointRadius: 5,
Working Fiddle :
HTML Code:
<canvas id='graph' height=200 width=200></canvas>
Javascript Code:
new Chart($('#graph'), {
type: 'radar',
data: {
labels: ['a','b','c'],
datasets: [
{
label: 'aaa',
data: [10,15,5],
backgroundColor: 'rgba(247, 151, 35, 0.5)',
borderColor: 'rgba(247, 151, 35, 1)',
pointBackgroundColor: 'rgba(247, 151, 35, 1)',
pointBorderColor: "#fff",
radius: 5,
pointRadius: 5,
borderWidth: 1
}
]
},
options: {
scale: {
type: 'radialLinear',
ticks: {
// hide tick labels
display: false,
min: 0,
max: 20,
stepSize: 1
},
gridLines: {
// hide lines
display: false
}
},
legend: {
position: 'bottom'
}
}
});
Hope this helps!
Chartjs has pointHoverRadius that controls radius of the point when hovered, so just make it the same as your pointRadius:
pointRadius: 5,
pointHoverRadius: 5
Using radius property didn't work for me.
