ChartJS - radar chart options not working

Question

I am using the latest version of chart.js from here https://cdnjs.com/libraries/Chart.js (the first link in the CDN website). I want to change the font size of the pointLabels but I failed. I also failed in setting display: false for the ticks. They only thing working is the font size of the ticks. Can anybody help me out?

    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}
            },
            scale: {
                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
    );

Answer 1

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 

Answer 2

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
);

Answer 3

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
    );