ChartJS - radar chart options not working

user_15604067 0
Viewed 1993

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
    );
chart.js javascript
3 Answers

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

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
user_123763520

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