[Chartjs]-Format y axis labels in bold

by

2👍

✅

This is by default not possible in V2, in the upcomming release of V3 of the lib you can achieve this with the scriptable fontStyle option like in this example:

var options = {
  type: 'bar',
  data: {
    labels: ["sum(A+B)",
      "A",
      "B",
      "sum(C+D)",
      "C",
      "D"
    ],
    datasets: [{
      backgroundColor: '#0066b3',
      label: '# von 5',
      data: [5, 3, 2, 7.5, 3, 4.5]
    }]
  },
  options: {
    indexAxis: 'y',
    scales: {
      y: {
        ticks: {
          font: {
            style: (tick) => (tick?.tick?.label.includes('sum') ? 'bold' : 'normal')
          }
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.13/chart.js" integrity="sha512-JS/WtaFglOYbXbMt9s52TO0QEzWljfCG2dFTC6aW9bJdP40kC37uoV+EzI06/LgpfX65oTnS1jUXxscH2xlG1Q==" crossorigin="anonymous"></script>
</body>

Leave a comment