[Chartjs]-Chart.js how to highlight a part of a label

by

1👍

You can use the Plugin Core API. It offers different hooks that may be used for executing custom code. In below code snippet, I use the afterDraw hook to draw text of different styles underneath each bar.

When drawing your own tick labels, probably want to define the text rotation. Further you need to instruct Chart.js not to display the default labels. This can be done through the following definition inside the chart options.

scales: {
  xAxes: [{
    ticks: {
      display: false,
      rotation: 40
    }
  }],

You also need to define some padding for the bottom of the chart, otherwise you won’t see your custom tick labels.

layout: {
  padding: {
    bottom: 60
  }
},

Please take a look at below code sample and see how it works. Tick labels that need to be drawn with two different styles are separated with a semicolon inside data.labels.

new Chart(document.getElementById('myChart'), {
  type: 'bar',
  plugins: [{
    afterDraw: chart => {
      let ctx = chart.chart.ctx;
      let xAxis = chart.scales['x-axis-0'];
      let yAxis = chart.scales['y-axis-0'];
      chart.data.labels.forEach((l, i) => {
        let labelTokens = l.split(';');        
        let rotation = xAxis.options.ticks.rotation * -Math.PI / 180;
        let x = xAxis.getPixelForValue(l);        
        if (labelTokens.length == 2) {
          ctx.save();
          let width = ctx.measureText(labelTokens.join(' ')).width;
          ctx.translate(x, yAxis.bottom + 10);
          ctx.rotate(rotation);
          ctx.font = 'italic 12px Arial';
          ctx.fillStyle = 'blue';
          ctx.fillText(labelTokens[0], -width, 0);
          ctx.restore();
        }
        ctx.save();
        let labelEnd = labelTokens[labelTokens.length - 1];
        let width = ctx.measureText(labelEnd).width;
        ctx.translate(x, yAxis.bottom + 10);
        ctx.rotate(rotation);
        ctx.font = '12px Arial';        
        ctx.fillText(labelEnd, -width, 0);
        ctx.restore();
      });
    }
  }],
  data: {
    labels: ['NASTY!!;Errors', 'Warnings'],
    datasets: [{
      label: 'Result',
      data: [30, 59],
      fill: false,
      backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)'],
      borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)'],
      borderWidth: 1
    }]
  },
  options: {
    layout: {
      padding: {
        bottom: 60
      }
    },
    legend: {
      display: false
    },
    tooltips: {
      callbacks: {
        title: tooltipItem => tooltipItem[0].xLabel.split(';').join(' ')
      }
    },
    scales: {
      xAxes: [{
        ticks: {
          display: false,
          rotation: 40
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
canvas {
  max-width: 250px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" width="10" height="8"></canvas>

Leave a comment