Chartjs-Chart.js customize individual vertical axis labels

by

1👍

✅

The documentation is unclear about that, but you can use arrays in options to configure labels.

Here is your code, refactored to be compatible with Chart.js 4.2.0:

window.onload = function() {
  var ctx = document.getElementById('myChart').getContext('2d');
  window.myBar = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['A', 'B', 'C'],
      datasets: [{
        data: [[1, 3], [4, 5], [2, 6]],
        backgroundColor: 'lightblue'
      }]
    },
    options: {
      responsive: true,
      indexAxis: 'y',
      scales: {
        y: {
          ticks: {
            color: ['#ff0000', '#000000', '#000000'],
            font: {
              weight: ['bold', 'bold', 'normal']
            }
          }
        }
      },
      plugins: {
        legend: {
          display: false
        } 
      }
    }
  });
};
.chart-container {
  position: relative;
  height: 90vh;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0"></script>

<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>

Leave a comment