Chartist Pie Char Custom Label

Question

I am trying to customize the label of Chartist Pie Chart so that it will show both the label and value. So in the example below, I would want the label to show "Bananas - 20", "Apples - 15", "Grapes - 40". I know I can just change the labels:, but is there a way to do that with the labelInterpolationFnc?

https://jsfiddle.net/ckmz7L1p/

var data = {
  labels: ['Bananas', 'Apples', 'Grapes'],
  series: [20, 15, 40]
};

var options = {
  labelInterpolationFnc: function(value) {
    return value[0]
  }
};

var responsiveOptions = [
  ['screen and (min-width: 640px)', {
    chartPadding: 30,
    labelOffset: 100,
    labelDirection: 'explode',
    labelInterpolationFnc: function(value) {
      return value;
    }
  }],
  ['screen and (min-width: 1024px)', {
    labelOffset: 80,
    chartPadding: 20
  }]
];

new Chartist.Pie('.ct-chart', data, options, responsiveOptions);

Answer 1

Got it figured out. Didn't realize labelInterpolationFnc can take function with both value and index parameters.

var data = {
  labels: ['Bananas', 'Apples', 'Grapes'],
  series: [20, 15, 40]
};

var options = {
width: "400px",
height: "400px",
  labelInterpolationFnc: function(value, idx) {
            return value + " - " + data.series[idx];
  }
};

var responsiveOptions = [
  ['screen and (min-width: 640px)', {
    chartPadding: 0,
    labelOffset: 0,
    labelDirection: 'explode',
    labelInterpolationFnc: function(value, idx) {
      return value + " - " + data.series[idx];
    }
  }],
  ['screen and (min-width: 1024px)', {
    labelOffset: 30,
    chartPadding: 0
  }]
];

new Chartist.Pie('.ct-chart', data, options, responsiveOptions);