[Chartjs]-Chart.js Radar chart legend label font size doesn't work

by

9👍

✅

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

3👍

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

Leave a comment