Chart.js – Display data label leader lines on a pie chart

This feature isn’t available so far, so there is no really quick solution for that.

It actually is possible to show the data within the legend (I have done this for dashboards I create at work). You just need to use the generateLabels legend label property to achieve this.

Here is an example that shows the data value in parenthesis within the legend (this is done in the legend item text property that is returned from the function).

generateLabels: function(chart) {
  var data = chart.data;
  if (data.labels.length && data.datasets.length) {
    return data.labels.map(function(label, i) {
      var meta = chart.getDatasetMeta(0);
      var ds = data.datasets[0];
      var arc = meta.data[i];
      var custom = arc.custom || {};
      var getValueAtIndexOrDefault = Chart.helpers.getValueAtIndexOrDefault;
      var arcOpts = chart.options.elements.arc;
      var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
      var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
      var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);

      return {
        // here is where we are adding the data values to the legend title
        text: label + " (" + ds.data[i].toLocaleString() + ")",
        fillStyle: fill,
        strokeStyle: stroke,
        lineWidth: bw,
        hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
        index: i // extra data used for toggling the correct item
      };
    });
  } else {
    return [];
  }
}

You can see it in action at this codepen.