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?

0

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!

2

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.

1

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy