Request: show each item count in legend

[funder7]

Hello, nice chart!

What about showing the total count for each section in the legend? Or even in a tooltip while hovering each slice?

My service is returning an array of objects, each contains it's value... so let's say there are 3 sections, first with value = 3, second = 3, third = 6, with this formula I've converted these values into percentages:

series_data.map(s => ({ 
    "label": s.label, 
    "value": s.value / data.total * 100, 
    color: s.color 
}))

Total is the sum of all the values. Yeah I know...it's easy but I think that would be nice to have it implemented as an option, in order to avoid this conversion every time. :-)

[dumptyd]

What about showing the total count for each section in the legend? Or even in a tooltip while hovering each slice?

The legend does show the value of each section and the % of chart area it's taking when you hover over it.

---

Total is the sum of all the values. Yeah I know...it's easy but I think that would be nice to have it implemented as an option, in order to avoid this conversion every time.

You can actually set the total prop on the component to whatever the total is and then just pass the values normally without any calculations and it will work as expected. https://github.com/dumptyd/vue-css-donut-chart#props

[funder7]

The legend does show the value of each section and the % of chart area it's taking when you hover over it.

Ok, I need the value to be shown directly, so I will modify it maybe.

You can actually set the total prop on the component to whatever the total is and then just pass the values normally without any calculations and it will work as expected. https://github.com/dumptyd/vue-css-donut-chart#props

I tried to do that, but it didn't work as expected, only half of the pie was fullfilled!

[dumptyd]

Ok, I need the value to be shown directly, so I will modify it maybe.

Yup, you can customize it with the legend slot. Here's the default legend markup https://github.com/dumptyd/vue-css-donut-chart/blob/master/src/components/Donut.vue#L17-L21. You can build on top of that.

I tried to do that, but it didn't work as expected, only half of the pie was fullfilled!

I just tried it in jsfiddle using your example of 6, 3, 3 and it seems to be working fine. https://jsfiddle.net/dumptyd/Lukxrb2p/

.

[funder7]

Ok, I need the value to be shown directly, so I will modify it maybe.

Yup, you can customize it with the legend slot. Here's the default legend markup https://github.com/dumptyd/vue-css-donut-chart/blob/master/src/components/Donut.vue#L17-L21. You can build on top of that.

Oh! Thank you I was looking for that!

I tried to do that, but it didn't work as expected, only half of the pie was fullfilled!

I just tried it in jsfiddle using your example of 6, 3, 3 and it seems to be working fine. https://jsfiddle.net/dumptyd/Lukxrb2p/

Probably it's my current configuration, I'm using Vuetify and there are some flaws in the code, due to some upgraded libraries and some legacy ones. Anyway, the legend was the most important part! Ty :-)

P.s: I can share the code if you want, I think that would be nice to have total count in the legend, enabled with one option

[dumptyd]

I think that would be nice to have total count in the legend

Could you share a screenshot of what you have in mind?

[funder7]

Sorry for the misaligned text, it's done with an image editor.

I would:

• Let the user decide how to print the total: number or percentage?
• Show or not each item amount in the legend, on the side. I've put it in the colored box, but it can be placed on the right as well.

[gebv]

I also want to control the legends
Maybe add slot for every items of legend?
Follow the concept code

<vc-donut hasLegend legendPlacement="bottom" total="100" size="150" :thickness="45" :sections="sections">
<template v-slot:legendItem="props">
  {{props.color}} <!--from donut sections-->
  {{props.value}} <!--from donut sections-->
  {{props.percent}} <!--virtual field = value/total*100%-->
  {{props.label}} <!--from donut sections-->
</template>
</vc-donut>