Chartist-js: Pie chart with legend AND percentages in the chart itself

[SabineMa]

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: http://i.stack.imgur.com/SiIKb.png.
I want to add percentage values to the pieces.

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?

[SpaceK33z]

Did you look at chartist-plugin-legend for this?

[SabineMa]

Sure, I did. I use it.
But what I want is, _additional_ to the legend having the percentages (e.g.
25%) as labels within the pie chart.

2016-06-10 10:29 GMT+02:00 Kees Kluskens [email protected]:

[SpaceK33z]

Oh awesome (I made that haha). chartist-plugin-legend has a legendNames option, so you can pass legendNames: ['Dog', 'Cat', ...] to the plugin, and still use the labelInterpolationFnc method to calculate the percentages for the labels in the chart.

[SabineMa]

Great that you made it, i like it very much.

question: with the legendNames - will there the be the possibility to have
the legend names _in the legend_ AND _the percentages in the pie_ itself.
See as an example what I men this please: http://i.stack.imgur.com/DX64E.png

2016-06-10 10:45 GMT+02:00 Kees Kluskens [email protected]:

Oh awesome (I made that haha). chartist-plugin-legend has a legendNames
option, so you can pass legendNames: ['Dog', 'Cat', ...] to the plugin,
and still use the labelInterpolationFnc method to calculate the
percentages for the labels in the chart.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/gionkunz/chartist-js/issues/681#issuecomment-225126041,
or mute the thread
https://github.com/notifications/unsubscribe/ANID2MUpnt9VeVwmxsO8sPjwg-22LRjnks5qKSQTgaJpZM4IPGqT
.

[SpaceK33z]

Yeah I think so. The legend will use the labels as legend names by default, but if you specify legendNames: ['Work', ...] it will use that instead of the labels. Then in the chart options you can use labelInterpolationFnc to calculate the percentage.

[SabineMa]

can you please give me an example where to add the legend names?
to the data? to the options?

[SpaceK33z]

Like this: Chartist.plugins.legend({ legendNames: ['name 1', 'name 2'] })

[SabineMa]

Oh great, I just tried with dummy data. It works. Thank you very much!

2016-06-10 12:44 GMT+02:00 Kees Kluskens [email protected]:

Like this: Chartist.plugins.legend({ legendNames: ['name 1', 'name 2'] })

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/gionkunz/chartist-js/issues/681#issuecomment-225151351,
or mute the thread
https://github.com/notifications/unsubscribe/ANID2A5UTcWg-bDcb0i9_OaJjJB1RQifks5qKUASgaJpZM4IPGqT
.

[SpaceK33z]

Nice! Could you close this issue?

[SabineMa]

Thank you for your help!

[SabineMa]

thank you SpaceK33z, this works fine for me:

var data = {
series: [666,222,222,444,]};
var options = {
height: 350,
distributeSeries: true,
labelInterpolationFnc: function(value) {
function getSum(total, num) {return total + num;}
return Math.round(value / data.series.reduce(getSum) * 100) + '%';},
plugins: [Chartist.plugins.legend({
legendNames: ['Geschenke','Fortbildungskosten','Taxi','Weitere',],
})
]};
new Chartist.Pie('#chartist_m3', data, options);

[leem32]

The above code wasn't working for me at first. I was getting NaN% for the percentages inside the pie chart, but when I commented out the legend plugin the percentages then showed correctly.

The answer is to make sure you place clickable to false in the legend options:

plugins: [Chartist.plugins.legend({
legendNames: ['Geschenke', 'Fortbildungskosten', 'Taxi', 'Weitere'],
clickable: false
})]