score:0

the plugin core api offers a range of hooks that may be used for performing custom code. you can use the afterdraw hook to draw text directly on the canvas using canvasrenderingcontext2d.filltext() as follows:

plugins: [{
  afterdraw: chart => {
    var ctx = chart.chart.ctx;
    ctx.save();
    ctx.textalign = 'left';
    ctx.textbaseline = 'middle';
    ctx.font = "12px arial";
    let sum = chart.config.data.datasets[0].data.reduce((v, s) => v + s, 0);
    var xaxis = chart.scales['x-axis-0'];
    var yaxis = chart.scales["y-axis-0"];
    yaxis.ticks.foreach((v, i) => {
      var label = chart.data.labels[i];
      var value = chart.data.datasets[0].data[i];
      var x = xaxis.getpixelforvalue(value) + 5;
      var y = yaxis.getpixelfortick(i);
      let percent = (value * 100 / sum).tofixed(2);
      ctx.filltext(label + ' (' + percent + '%)', x, y);
    });
    ctx.restore();
  }
}],

you may also have to define some padding at the right of the charts to make sure all labels are displayed on the canvas.

options: {
  layout: {
    padding: {
      right: 110
    }
  },

please have a look at the runnable code snippet below.

const chart = new chart(document.getelementbyid('mychart'), {
  type: 'horizontalbar',
  plugins: [{
    afterdraw: chart => {
      var ctx = chart.chart.ctx;
      ctx.save();
      ctx.textalign = 'left';
      ctx.textbaseline = 'middle';
      ctx.font = "12px arial";
      let sum =  chart.config.data.datasets[0].data.reduce((v, s) => v + s, 0);
      var xaxis = chart.scales['x-axis-0'];
      var yaxis = chart.scales["y-axis-0"];
      yaxis.ticks.foreach((v, i) => {
        var label = chart.data.labels[i];
        var value = chart.data.datasets[0].data[i];
        var x = xaxis.getpixelforvalue(value) + 5;
        var y = yaxis.getpixelfortick(i);             
        let percent = (value * 100 / sum).tofixed(2);
        ctx.filltext(label + ' (' + percent + '%)', x, y);
      });
      ctx.restore();
    }
  }],
  data: {
    labels: ['traffic source 1', 'traffic source 2', 'traffic source 3', 'traffic source 4'],
    datasets: [{
      label: 'by dataset',
      data: [15, 8, 12, 6],
      backgroundcolor: ['red', 'lightblue', 'green', 'orange'],
      barpercentage: 1,
      categorypercentage: 1
    }]
  },
  options: {
    layout: {
      padding: {
        right: 110
      }
    },
    legend: {
      display: false
    },
    scales: {
      yaxes: [{
        ticks: {
          display: false
        },
        gridlines: {
          drawticks: false
        }
      }],
      xaxes: [{
        ticks: {
          beginatzero: true
        },
        gridlines: {
          display: false
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<canvas id="mychart" height="80"></canvas>


Related Query

More Query from same tag