[Chartjs]-ChartJS – radar chart options not working

The latest version is V3 which just got released, as stated in the migration guide scale option was removed in favor of options.scales.r (or any other scale id, with axis: 'r') the scale option has been removed, you will have to use scales: {r: {config for scale}}

https://www.chartjs.org/docs/master/getting-started/v3-migration.html

So you will get:

const data = {
    labels: [
        'Eating',
        'Drinking',
        'Sleeping',
        'Designing',
        'Coding',
        'Cycling',
        'Running'
    ],
    datasets: [{
        data: [4, 1, 1, 4, 2, 3, 5],
        fill: false,
        borderColor: 'rgb(255, 99, 132)',
        pointRadius: 1,
    }]
};

const config = {
    type: 'radar',
    data: data,
    options: {
        elements: {
            line: {
                borderWidth: 1
            }
        },
        scales: {
            r: {
                ticks: {
                    beginAtZero: true,
                    max: 5,
                    min: 0,
                    stepSize: 1,
                    font: {
                        size: 6
                    }
                },
                pointLabels: {
                    fontSize: 20
                }
            }
        },
        plugins: {
            legend: {
                display: false
            }
        }
    },
};

var myChart = new Chart(
    document.getElementById('chart'),
    config
);

As of June 2nd 2021:

There is an ongoing issue about this. Your best option right now is to downgrade the packages to the following:

chart.js@2.9.4

If you are also using React.js:

react-chartjs-2@2.11.1 

You can change from ‘scale’ to ‘scales’ and add a ‘R’ axis:

const data = {
        labels: [
            'Eating',
            'Drinking',
            'Sleeping',
            'Designing',
            'Coding',
            'Cycling',
            'Running'
        ],
        datasets: [{
            data: [4, 1, 1, 4, 2, 3, 5],
            fill: false,
            borderColor: 'rgb(255, 99, 132)',
            pointRadius: 1,
        }]
    };

    const config = {
        type: 'radar',
        data: data,
        options: {
            elements: {
                line: {borderWidth: 1}
            },
            scales: {
                ticks: {
                    display:false,
                    beginAtZero: true,
                    max: 5,
                    min: 0,
                    stepSize: 1,
                    font: {
                        size: 6
                    }
                },
                r: {
                    pointLabels:{
                        font: {
                            size: 30,
                        }
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        },
    };

    var myChart = new Chart(
        document.getElementById('chart'),
        config
    );