Chartist's pie labels are misplaced, and i can't debug it

I'm trying to make charts using Json data fetched from some php page.

Specifically, I want to display a pie chart with a label of what each part is, and the percentages it represents.

I followed the chartist examples, and ended up with this codepen :

https://codepen.io/orsucciu/pen/qBdrjow

The labels are small, misplaced, and the percentage doesn't appear!

I checked the debug console, but nothing was raised.

I also added a console.log inside my LabelInterpolation to see but it's not sending anything... So I suspect it's coming from there, but I don't know what exactly is the problem :(

Thanks!

https://codepen.io/SkyDieRay/pen/BaNWdmr

data = JSON.parse('{"orphans":17,"0":4,"1":7,"3":1,"aTraiter":2,"aValider":3,"Valided":4,"retourBO":5}');

I played around a bit and your buggy values were showing there because of data with 0% in the chart, hence why all of it was in the same place.
I changed the data to give them values and it looks normal now.

For showing the percentage I added this to the responsiveOptions.
Also, replace value with dat.series[index]. Value there is just the keys of your data, not the values. So you are diving strings most of the time, which is why you get NaN% as a result there.

labelInterpolationFnc: function(value, index) {
  var percentage = Math.round(dat.series[index] / dat.series.reduce(sum) * 100) + '%';
  return dat.labels[index] + ' ' + percentage;
}