# Draw pie chart

I would like to draw a pie chart and found some tutorials to do it in HTML with the attached css. Is it possible to do it this way with react-native-svg?

Kind regards,

Mike

circle {
fill: #ddd;
stroke: \$primaryColor;
stroke-width: 50;
stroke-dasharray: 0 158;
transition: stroke-dasharray .3s ease;
}

svg {
margin: 0 auto;
transform: rotate(-90deg);
background: #ddd;
display: block;
} Full dicussion on github.com

## 1 thought on “Draw pie chart”

1. Anonymous says:

I use this method to generate a Pie chart with a value (percentage).

``````const pie = (radius, value) => {
const x = radius - Math.cos((2 * Math.PI) / (100 / value)) * radius
const y = radius + Math.sin((2 * Math.PI) / (100 / value)) * radius
const long = (value <= 50) ? 0 : 1

return d
}
``````

Just pass the returned `d` to your `Path`.

Input `radius` is your size, `value` is the percentage around you want to go. Starts at the top.

I use this as a clipPath on a circle that is styled the way I want.

# Draw pie chart

I would like to draw a pie chart and found some tutorials to do it in HTML with the attached css. Is it possible to do it this way with react-native-svg?

Kind regards,

Mike

circle {
fill: #ddd;
stroke: \$primaryColor;
stroke-width: 50;
stroke-dasharray: 0 158;
transition: stroke-dasharray .3s ease;
}

svg {
margin: 0 auto;
transform: rotate(-90deg);
background: #ddd;
display: block;
} Full dicussion on github.com

## 5 thoughts on “Draw pie chart”

1. Anonymous says:

I use this method to generate a Pie chart with a value (percentage).

``````const pie = (radius, value) => {
const x = radius - Math.cos((2 * Math.PI) / (100 / value)) * radius
const y = radius + Math.sin((2 * Math.PI) / (100 / value)) * radius
const long = (value <= 50) ? 0 : 1
Just pass the returned `d` to your `Path`.
Input `radius` is your size, `value` is the percentage around you want to go. Starts at the top.