Chart.js Radar chart legend label font size doesn't work

Question

I am using Chart.js.

I want to make my chart legend label font size more bigger.

So I tried like this:

var ctx = $('#skill_chart');

new Chart(ctx,{
    "type":"radar",
    "data": {
            "labels":["Crawling","Django","Ubuntu Server","Coding","Cycling","Running"],
            "datasets":[{
                    "label":"My Second Dataset",
                    "data":[28,48,40,19,96,27,100],
                    "fill":true,
                    "backgroundColor":"rgba(54, 162, 235, 0.2)",
                    "borderColor":"rgb(54, 162, 235)",
                    "pointBackgroundColor":"rgb(54, 162, 235)",
                    "pointBorderColor":"#fff",
                    "pointHoverBackgroundColor":"#fff",
                    "pointHoverBorderColor":"rgb(54, 162, 235)"}]
                },
    "options":{
        "elements":{
        "line":{
            "tension":0,
            "borderWidth":3}
            }
        },

        "legend": {
            "display": true,
            "labels": {
                "fontSize": 20,
            }
        },
    });

But It doesn't work. What should I do?

Answer 1

Your legend object is outside the options object. It needs to be within the options object. The following code will work:

var ctx = $('#skill_chart');

new Chart(ctx,{
    "type":"radar",
    "data": {
            "labels":["Crawling","Django","Ubuntu Server","Coding","Cycling","Running"],
            "datasets":[{
                    "label":"My Second Dataset",
                    "data":[28,48,40,19,96,27,100],
                    "fill":true,
                    "backgroundColor":"rgba(54, 162, 235, 0.2)",
                    "borderColor":"rgb(54, 162, 235)",
                    "pointBackgroundColor":"rgb(54, 162, 235)",
                    "pointBorderColor":"#fff",
                    "pointHoverBackgroundColor":"#fff",
                    "pointHoverBorderColor":"rgb(54, 162, 235)"}]
                },
    "options":{
        "elements":{
            "line":{
                "tension":0,
                "borderWidth":3
            }
        },

        "legend": {
            "display": true,
            "labels": {
                "fontSize": 20,
            }
        },
    }
});

Here is a link to the docs for fonts: https://www.chartjs.org/docs/latest/general/fonts.html