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

by

1👍

✅

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

2👍

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
        }
      }
    }
  }
}

0👍

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>

Leave a comment