Chartjs-Chart.js Style bold on 1/one/certain label

by

2👍

✅

You can define ticks.font on the x-axis as an array of fonts as follows:

scales: {
  x: {
    ticks: {
      font: labels.map(l => ({ weight: l == 'April' ? 'bold' : 'normal' }))
    }
  }
}

Please take a look at below runnable sample code and see how it works. Note that in this code, I change the font weight and size for the desired month.

const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const data = [91, 85, 70, 96, 70, 81, 85, 66, 47, 26, 7, 4];

new Chart('myChart', {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
      label: "Visitors",
      backgroundColor: "transparent",
      borderColor: "rgba(38, 185, 154, 0.7)",
      tension: 0,
      data: data
    }]
  },
  options: {
    scales: {
      x: {
        ticks: {
          font: labels.map(l => ({
            size: l == 'April' ? 14 : 12,         
            weight: l == 'April' ? 'bold' : 'normal'          
          }))
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>

Leave a comment