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

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;
}

1 possible answer(s) on “Draw pie chart

  1. 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.

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

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;
}

5 thoughts on “Draw pie chart

  1. 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.