How can I make a circular graph with SVG in React Native?

Question

I'm trying to draw a circular graph with SVG in React Native. I want to add a stroke to the chart. How can I do it?

I did this.

---

This is what I want to do.

---

Code:

    return (
    <View style={{ height: 250, width: 250, backgroundColor: "green" }}>

        <Svg viewBox="0 0 120 120">
            <Circle
                cx="60"
                cy="60"
                r="30"
                fill="transparent"
                stroke="red"
                strokeWidth="60"
                strokeDasharray={(2 * Math.PI * 30 * 75) / 100}
            />
        </Svg>

    </View>
);

Answer 1

For adding stroke I recommend to use another circle.

                <View style={{ height: 250, width: 250, backgroundColor: "green" }}>
                    <Svg viewBox="0 0 120 120">
                        <Circle
                            cx="60"
                            cy="60"
                            r="30"
                            fill="transparent"
                            stroke="red"
                            strokeWidth="60"
                            strokeDasharray={(2 * Math.PI * 30 * 75) / 100}
                        />
                        <Circle
                            cx="60"
                            cy="60"
                            r="60"
                            fill="transparent"
                            stroke="black"
                            strokeDasharray={(2 * Math.PI * 60 * 75) / 100}
                            strokeWidth="2"
                        />
                    </Svg>
                </View>

Please let me know if this answear helps You. :-)