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

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. https://i.sstatic.net/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?

Tynan

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.

Flu

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
		
		};

Greed

Thank you for your time and you answer. I am not sure that we understand each other correctly. I already have the percentages computed. What I want is to display the percentages DIRECTLY the pie chart itself and the labels(texts) in the legend. I tried your solution but it results in having the percentages in the legend, too. Was this your intention? – Tynan

In this case I assume it will not be your solution. My solution simply does the percentages behind the labeltext... (As you see - there are some lable placement issues here). just like this: sectorbyte.de/owncloud/index.php/s/QvHmoCXoLj6laTz – Greed

I think what might be the solution here is drawing the percentages as label and place them wherever you like. And add a separate legend underneath or beside the chart. There is a proof of concept if you follow this link... github.com/gionkunz/chartist-js/issues/21 I – Greed

Thank you for the link to the issues at chartist. This is exactly my topic. – Tynan