toomuchdesign/react-minimal-pie-chart

CustomLabel issue

DiyazY opened this issue · 2 comments

Hello i have an issue with CustomLabel, because it's not shown.
I want to use it as a ReactElement

const data = [
        { value: 20, key: 1, color: '#23e4ad',}, 
    ];
return <PieChart 
                data={data}
                reveal={percantage}
                lineWidth={10}
                background="#555862"
                lengthAngle={280}
                totalValue={100}
                startAngle={130}
                labelPosition={0}
                radius={40}
                rounded
                animate
                label={<ChartLabel/>}

and here is my CustomLabel, ChartLabel

export default function ChartLabel(labelProps) {
    console.log(labelProps );
    return <div>
        <span>100%</span>
        <span>extra data</span>
    </div>
}

Thanks)

Hi @DiyazY, since the chart renders into a svg element, you have to use SVG elements instead of HTML elements to describe your label.

Thank you. It works for me