Filtering out the most rated answers from issues on Github |||||||||||_______|||| Also a sharing corner
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
https://css-tricks.com/how-to-make-charts-with-svg/#article-header-id-7
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;
border-radius: 50%%;
display: block;
}
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
https://css-tricks.com/how-to-make-charts-with-svg/#article-header-id-7
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;
border-radius: 50%%;
display: block;
}
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
const d = `M${radius},${radius} L${radius},${0}, A${radius},${radius} 0 ${long},1 ${y},${x} Z`
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.
I use this method to generate a Pie chart with a value (percentage).
Just pass the returned
dto yourPath.Input
radiusis your size,valueis 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.