I am using victory-native chart to render a pie chart but titles nested.Here is my code:
<VictoryPie
animate={{
duration: 1000,
easing: 'bounce',
}}
labelPosition={({index}) => 'centroid'}
labels={({datum}) => datum.x}
width={width - 100}
labelComponent={<VictoryLabel textAnchor={'end'} angle={45} />}
theme={VictoryTheme.material}
data={categorySumSales}
/>
My PieChart: enter image description here
This PieChart, i want: enter image description here
The only way I see to avoid labels overlapping each other is to develop a custom labelComponent which accounts for relative position of each label to the chart, and renders labels in a non-overlapping way.
That's too hard, since all you really want is to display a name of each data slice. Using legend is a much easier way to achieve that.
