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

Question

I have been playing a lot with Chart.Js but trying my hardest to avoid getting into Canvas itself due to time constraints and a personal preference of the SVG route of D3 et al.

I have a mixture of charts on a dashboard page, and everything looks fantastic except for one issue - you have to hover over a pie segment in order to see the underlying % or value.

For a dashboard view, my users would prefer to just quickly see some data labels on the segments - as with Excel - possibly easier to explain with an image:

https://support.office.com/en-gb/article/Display-or-hide-data-label-leader-lines-in-a-pie-chart-d7e7c62e-aaa5-483a-aa00-6d2c437df61b

The problem with other solutions I've found here are that they are simply displaying the value in the segment, but some segments are too small for this to be the way forward.

There were also other solutions that always displayed tooltips - but there was a lot of overlapping and generally looked quite horrible.

I would even be happy if the legend could display data next to it, but I don't understand why a lot more people haven't requested the same functionality - am I missing something?

Answer 1

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

Answer 2

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.