Chartjs-Is there any way to change the font size of labels in bar chart in Chart.js v3?

by

2👍

✅

Add this into the options.

      scales: {
        y: {
          ticks: {
            font: {
              size: 30,
            }
          }
        }
      }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Static Template</title>
</head>

<body>
  <div class="chartWrap">
    <canvas id="chart"></canvas>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    const labels = ["Bach", "Mozart", "Ravel", "Chopin", "Beethoven"];
    const data = {
      labels: labels,
      datasets: [{
        data: [9, 10, 7, 8, 8],
        backgroundColor: "rgba(0, 0, 0, 0.5)"
      }]
    };
    const options = {
      responsive: true,
      indexAxis: "y",
      plugins: {
        legend: {
          display: false
        }
      },
      scales: {
        y: {
          ticks: {
            font: {
              size: 30,
            }
          }
        }
      }
    };
    
    const config = {
      type: "bar",
      data: data,
      options: options
    };

    const ctx = document.getElementById("chart").getContext("2d");
    new Chart(ctx, config);
  </script>
</body>

</html>

Leave a comment