CODEWITHSUNDEEP
javascriptchart.js
Nabil Kadimi
Nabil Kadimi

Reputation: 10394

How can I modify category labels font size in Chart.JS V2?

I'm using Chart.JS V2, I couldn't find a way to change the font size for category labels (Animals, Science and Culture in the demo):

Code and demo below and in JSFiddle.

Thanks.

jQuery(document).ready(function($) {
  new Chart(document.getElementById("so"), {
    type: "radar",
    data: {
      labels: ["Animals", "Science", "Culture"],
      datasets: [{
        label: '',
        data: [46, 51, 29]
      }, {
        label: '',
        data: [0, 0, 0]
      }]
    },
    options: {
      scale: {
        ticks: {
          min: 0,
          max: 100,
          max: 100,
          stepSize: 20,
          beginAtZero: true
        },
      },
      legend: {
        display: false
      }
    }
  });
});
canvas {
  max-width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.js'></script>

<canvas id='so'></canvas>

Upvotes: 0

Views: 6220

Answers (1)

Anil Samal
Anil Samal

Reputation: 1053

Do this way :

  new Chart(document.getElementById("so"), {
type: "radar",
data: {
  labels: ["Animals", "Science", "Culture"],
  datasets: [{
    label: '',
    data: [46, 51, 29]
  }, {
    label: '',
    data: [0, 0, 0]
  }]
},
options: {
  scale: {
    ticks: {
      min: 0,
      max: 100,
      max: 100,
      stepSize: 20,
      beginAtZero: true
    },
    pointLabels: { fontSize:18 }
  },
  legend: {
    display: false
  }
} });

Upvotes: 2

Related Questions