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

I have 12 month in my chart. I need to bold the label of current month. Example: This month is April. So I need to bold label April. I have search how to bold, but it affect to all labels.

This is my code :

var lineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: label,
    datasets: [{
      label: "Visitors",
      backgroundColor: "transparent",
      borderColor: "rgba(38, 185, 154, 0.7)",
      tension: 0,
      data: value
    }]
  },
  options: {
    scale: {
      pointLabels: {
        fontStyle: "bold",
      },
    }
  }
});

CodePudding user response：

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>