Text appearing twice in piechart

[pc-1998]

What is the problem?

When including a Text in PieChart, the text appears twice.

What platform?

• [x ] iOS
• [ ] Android

react-native version: 0.63.4 react-native-svg-charts version: 5.4.0 react-native-svg version: 12.1.1

Code to reproduce

// put code here
const data = [2, 3];
const colors = [gray, red];
const pieData = data
  .filter((value) => value > 0)
  .map((value, index) => ({
    value,
    svg: {
      fill: colors[index],
    },
    key: `pie-${index}`,
  }));

export default function Dashboard() {
  return (
    <ScrollView style={styles.background}>
      {/* <StackedBarChart
        style={{ height: 200, height: 15, marginTop: 10, marginBottom: 10 }}
        keys={stacked_bar_keys}
        colors={stacked_bar_colors}
        data={stacked_bar_data}
        horizontal={true}
        showGrid={false}
        contentInset={{ top: 30, bottom: 30 }}
      /> */}
      <PieChart
        style={{ height: 200 }}
        innerRadius={"80%"}
        data={pieData}
      >
        <Text
          style={{
            top: 100,
          }}
        >
          Poor Health
        </Text>
      </PieChart>
</ScrollView>
  );
}

const styles = StyleSheet.create({
  background: {
    paddingTop: 8,
    paddingBottom: 8,
    flex: 1,
    // backgroundColor: "white",
  },
});

[ofek-autofleet]

Also experiencing this issue, is there a fix?

[dralde]

are you using a Text comp from svg package? use that instead

[jihoon8730]

This is my code and it worked when I added display: 'none' to the style

  <Text
                            x={pieCentroid[0]}
                            y={pieCentroid[1]}
                            fill="#ffffff"
                            fontSize={14}
                            style={{
                                color: '#ffffff',
                                display: 'none', // This is the code
                            }}
                    >