CODEWITHSUNDEEP
javascripthtmlchart.js
황준필
황준필

Reputation: 135

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

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?

Upvotes: 4

Views: 13698

Answers (2)

Martín Ballestero
Martín Ballestero

Reputation: 31

You have to set fontSize inside pointLables object in scale object at your configuration. The following options works to customize the font size of labels in data (as you asked in response to @Rounak )

radarOptions: {
    scale: {
        pointLabels: {
            fontSize: 13
        }
    }
}

All credits to: https://github.com/chartjs/Chart.js/issues/2854#issuecomment-331057910

Upvotes: 3

Rounak
Rounak

Reputation: 796

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

Upvotes: 9

Related Questions