[Chartjs]-Chart.js – data points get smaller after hover

by

5👍

✅

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!

4👍

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.

Leave a comment