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

It creates a bar graph that extends horizontally.

The font size of labels such as Bach and Morzart is small and I want to increase it. Could you please tell me how to change the font size of labels?

    <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
          }
        }
      };
      const config = {
        type: "bar",
        data: data,
        options: options
      };

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

Looking at the many examples of Chart.js, I know that the font size should be specified in options > scales, but I didn't know what to type under scales.

Bar Chart | Chart.js

CodePudding user response：

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>