chartist.js pie chart with labels AND percentage on the pie - chartist.js

Question

I want to create a pie chart with chartist.js with labels (which are shown in the legend) AND also with percentages in the pie itself.
This is the pie chart. I want to add percentage values to the pieces. http://i.stack.imgur.com/SiIKb.png
Here (https://gionkunz.github.io/chartist-js/examples.html) is an example with percentages in the pie. But this only works if I do NOT add labels.
Adding labels to the data (e.g. labels: ['Dog','Cat','Cow','Snake',],) results in "NaN%" display.
I want to see the percentages in the pie itself and also put labels (for the legend) into the data.
Is this possible?

Answer 1

You must keep an array containing your labels, and use the labelInterpolationFnc with two parameters to get index, and use it to get the proper label with percentage:
var animals = ['Dog', 'Cat', 'Cow', 'Snake'];
var data = {
series: [5, 3, 4]
};
var sum = function(a, b) {
return a + b
};
new Chartist.Pie('.ct-chart', data, {
labelInterpolationFnc: function(value, idx) {
var percentage = Math.round(value / data.series.reduce(sum) * 100) + '%';
return animals[idx] + ' ' + percentage;
}
});
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link href="://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet"/>
<div class="ct-chart ct-perfect-fourth"></div>
Note that we must not use the labels in your data array (only the series), otherwise the value parameter in labelInterpolationFnc will be filled with the label instead of the value, so we couldn't calculate the percentage.

Answer 2

what you would need to do ist to produce the label on your own.
You need to produce a string like [Labeltext] + ' | ' + [Share]
In my case I created a variable which holds the total sum of all pie elements... called [griall]....
Then there is this function which calculates shares...
function calcProz(value, griall) {
return Math.round(value / griall * 100) + '%';
};
later on when I generate the Array which holds the labels I use this function to add the percentages to the text...
chartlabels[i]=dbresult[i].use + ' | ' + calcProz(dbresult[i].gri,griall);
where dbresult[i].use is the initial label text and dbresult[i].gri is the value which is going to the chart (both coming from a database)
after all when defining the chart you just add the labels...
var data = {
series: chartdata,
// series: [25,16,15, 14, 4,2,1]
labels: chartlabels
};