How to increase size and family in a radar's Chartjs label

Question

I would like to increase the size and change color of the font in a chart label, but it's not the legend label. It is the name in the side of each data of the radar chart.

I tried doing this:

    options={{
                legend: {
                    labels: {
                        fontColor: 'rgba(255,255,255,1)',
                        fontSize: 16,
                        fontStyle: "bold"
                    }
                },

But it only changes the name of the 'Undefined' label.

Thank you for any help.

Hope helpful - https://stackoverflow.com/a/38305167/1374554 – Jaison James Jan 27 '20 at 14:11 — Jaison James, Jan 27 '20 at 14:11

score 2 · Answer 1 · answered Feb 21 '22 at 02:04

To someone come from Chart.js v 3.7.1 or + the configuration is a bit changed the below code won't work anymore.

options: {
  scale: {
    pointLabels: {
      fontSize: 16
    }
  }
}

Use this one

options: {
  scales: {
    r: {
      pointLabels: {
        font: {
          size: 16
        }
      }
    }
  }
}

score 1 · Accepted Answer · answered Jan 27 '20 at 14:12

1

options: {
  scale: {
    pointLabels: {
      fontSize: 16
    }
  }
}

answered Jan 27 '20 at 14:12

demkovych

7,827
3
19
25

what to do on mobile coz this makes the chart skewed , do we need to change font size or what ?? – aryanknp Feb 01 '21 at 16:31

score 0 · Answer 3 · answered Jan 27 '20 at 14:36

Here is a configured radar grid.

Label size is set via: options.scale.pointLabels.fontSize
Label color is set via: options.scale.pointLabels.fontColor
Legend font color is set via: options.legend.labels.fontColor

The docs are pretty good, you should check them out:

var skillCanvas = document.getElementById('skillChart');
var skillData = {
  labels: ["Teamwork", "Organization", "Adaptability", "Curiousity", "Self-taught"],
  datasets: [{
    label: "Student A",
    backgroundColor: 'rgba(17, 192, 145, 0.2)',
    data: [90, 80, 92, 88, 75]
  }]
};
var skillChart = new Chart(skillCanvas, {
  type: 'radar',
  data: skillData,
  options: {
    legend: {
      labels: {
        fontColor: '#11c091'
      }
    },
    scale: {
      gridLines: {
        color: '#AAA'
      },
      ticks: {
        beginAtZero: false,
        max: 100,
        min: 20,
        stepSize: 10,
        fontColor: '#fff',
        backdropColor: '#444'
      },
      pointLabels: {
        fontSize: 16,
        fontColor: '#11c091'
      }
    }
  }
});

body {
  background: #444;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" rel="stylesheet" />
<canvas id="skillChart" width="400" height="200"></canvas>

How to increase size and family in a radar's Chartjs label

3 Answers3