Chart.js - data points get smaller after hover

Question

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: https://jsfiddle.net/nj4qehLm/

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?

Answer 1

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.

Answer 2

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 : https://jsfiddle.net/nj4qehLm/2/

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!