not showing data labels

[JasonParra]

Do you want to request a feature or report a bug?

bug

What is the current behaviour?

not showing data labels
<PieChart data={[ { title: 'One', value: 10, color: '#E38627' }, { title: 'Two', value: 15, color: '#C13C37' }, { title: 'Three', value: 20, color: '#6A2135' }, ]} />;
https://i.imgur.com/RvnjwzU.png

What is the expected behaviour?

https://imgur.com/V3cYNEP

Steps to Reproduce the Problem

1. npm install react-minimal-pie-chart
2. run example code
3. ...

How i partially solved

Adding
label={(props) => { return props.dataEntry.title;}}

Example
<PieChart label={(props) => { return props.dataEntry.title;}} data={[{ title: "One", value: 10, color: "#E38627" }, { title: "Two", value: 15, color: "#C13C37" }, { title: "Three", value: 20, color: "#6A2135" }, ]} />

Specifications

• Version: "react": "^16.13.1",
• Platform: windows 10
• Subsystem: none

[toomuchdesign]

Hi @JasonParra,
that's the way to go. label prop expects a function receiving labelRenderProps as argument and returning one of the following:

• number
• string
• React.ReactElement
• undefined
• null

https://github.com/toomuchdesign/react-minimal-pie-chart#custom-labels-with-label-render-prop

[floraCodes]

I'm trying to return a ReactElement but it's not showing. I mean, it's being rendered inside the svg as an element of dimensions 0x0.

Not sure whats going on here... Any ideas?

[toomuchdesign]

Hi @JasonParra,
since react-minimal-pie-chart renders as SVG, labels have to render SVG elements. See default label implementation.

In your case, label function might more simply return a number or string.

[floraCodes]

@toomuchdesign thanks for the reply, I was wondering if I can render a react element so I can add functionality inside the label...

[toomuchdesign]

Every element is a React element. :) What matters is that the element provided as label prop makes use of SVG elements only.