[Chartjs]-ChartJS horizontal chart display legend on each bar

by

2👍

✅

There are actually several ways that you can achieve this. For simplicity, I will just modify the example that you provided.

Keep in mind that this puts the label inside the bar. You can easily modify this to place it outside, but you will have to add logic to make sure you don’t overflow on the top of the chart or into other bars (not very simple logic).

Also, this approach requires that you have configured a label for each dataset (which is needed to drive the regular legend anyway).

Just put this in your animation.onComplete property.

function() {
  var ctx = this.chart.ctx;
  ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
  ctx.textAlign = 'left';
  ctx.textBaseline = 'bottom';

  this.data.datasets.forEach(function(dataset) {
    for (var i = 0; i < dataset.data.length; i++) {
      var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
          scale_max = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
      left = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.left;
      offset = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.longestLabelWidth;
      ctx.fillStyle = '#444';
      var y_pos = model.y - 5;
      var label = model.label;
      // Make sure data value does not get overflown and hidden
      // when the bar's value is too close to max value of scale
      // Note: The y value is reverse, it counts from top down
      if ((scale_max - model.y) / scale_max >= 0.93)
        y_pos = model.y + 20;
      // ctx.fillText(dataset.data[i], model.x, y_pos);

      if (dataset.data[i] > 0) {
        ctx.fillText(dataset.label, left + 10, model.y + 8);
      }
    }
  });
}

Here is a jsfiddle example (forked from the example you provided).

Leave a comment