<path><\/code>\u00a0element solution requires you to understand how to calculate paths, so you need to spend some time learning the basics of SVG. But once you\u2019re comfortable with plotting, you aren\u2019t restricted to the shapes you want to draw. This solution allows highest customization to your chart, like giving the pie slices borders or using background images for each slice.<\/li>\n<\/ul>\n\n\n\nThe SVG <circle><\/code> element solution came out on top for me and for our use case: we currently don\u2019t need chart animations\/interactions and having the same implementation for both pie charts and donut charts is pretty useful.<\/p>\n\n\n\nThe important thing to know about the\u00a0<circle><\/code>\u00a0solution is that it takes advantage of drawing overlapping circles (one for each segment of the pie chart) and that we use the `dash` feature of SVG to draw each segment. Dashes are normally used to define how to represent breaks in lines, but you can also use them in other SVG objects like circles, and by defining the dashes carefully we can have one dash per circle to generate each slice of the pie chart.<\/p>\n\n\n\nHere\u2019s a quick overview of how the <circle><\/code> example above works.<\/p>\n\n\n\n\n- Start by defining the
viewBox<\/code> to be 0 0 100 100<\/code> to simplify the calculation, fits a circle of 50 units radius. You can use width<\/code> and height<\/code> to define the size of the pie chart. The viewBox<\/code> is the canvas we\u2019re going to be drawing on.<\/li>\n\n\n\n- For the circles you want to draw, you set the radius value to the half of the outcome circle\u2019s radius (that is
r=\"25\"<\/code> instead of 50) and set the stroke-width<\/code> to be half the length of the viewBox<\/code> (that is stroke-width=\"50\"<\/code>). By doing this, you will be drawing border of the circle with thickness equals to the length of the outcome circle\u2019s radius, thus creating a solid circle.<\/li>\n\n\n\n- Use
stroke-dasharray<\/code> to set the dash length and gap size between strokes.<\/li>\n\n\n\n- The dash length will be the percentage of the circumference. For example, to draw 10% pie, it will be
0.1 * (2 * PI * 25) = 15.7<\/code><\/li>\n\n\n\n- To ensure the border dash appears only once set the gap size to be the circumference minus the dash length (that is
157 - 15.7 = 141.3<\/code>).<\/li>\n\n\n\n- To draw the first slice of 10% use the percentage of the circumference and the gap size we just calculated with the expression
stroke-dasharray=\"15.7 141.3\"<\/code><\/li>\n\n\n\n- Rotate the starting point from the default
(100, 50)<\/code> by 90 degrees or 25% of the circumference stroke-dashoffset=\"39.2\"<\/code>.<\/li>\n\n\n\n- If the pie is not starting at the 0% mark, then take the percentage of rotation into the calculation. Example, to start at 10% mark, the
stroke-dashoffset<\/code> will be (0.25 - 0.1) * CIRCUMFERENCE = 23.5<\/code>.<\/li>\n\n\n\n- To fill up any of the remaining area left, apply
border-radius<\/code> and background-color<\/code> on <svg><\/code> element.<\/li>\n<\/ul>\n\n\n\nWe can implement this as a React component to make it easier for other contributors to reuse:<\/p>\n\n\n\n
const CIRCLE_RADIUS = 50 \/ 2;\nconst STROKE_WIDTH = CIRCLE_RADIUS * 2;\nconst CIRCUMFERENCE = 2 * Math.PI * CIRCLE_RADIUS;\nconst DASH_OFFSET = CIRCUMFERENCE \/ 4;\n \nconst PieChart = ({\n backgroundColor = 'WhiteSmoke',\n strokeColorOptions = ['LemonChiffon', 'LightGreen'],\n values = [],\n}) => {\n const outputStrokeColors = _.times(values.length).map(\n (i) => strokeColorOptions[i % strokeColorOptions.length]\n );\n \n return (\n <svg\n backgroundColor={backgroundColor}\n viewBox=\"0 0 100 100\"\n width=\"300px\"\n height=\"300px\"\n borderRadius=\"9999px\"\n >\n {values.map((val, index) => {\n const strokeColor =\n outputStrokeColors[index % outputStrokeColors.length];\n const dashSize = (val \/ 100) * CIRCUMFERENCE;\n const gapSize = CIRCUMFERENCE - dashSize;\n \/\/ NOTE: if it's a full circle, then no need to provide a stroke dasharray\n const strokeDasharray =\n val === 100 ? 'none' : `${dashSize} ${gapSize}`;\n const accumulatedPriorPercentage = _.sum(values.slice(0, index));\n const relativeOffset =\n (accumulatedPriorPercentage \/ 100) * CIRCUMFERENCE;\n const adjustedOffset = DASH_OFFSET - relativeOffset;\n \n return (\n <circle\n key={index}\n cx={50}\n cy={50}\n fill=\"transparent\"\n r={CIRCLE_RADIUS}\n stroke={strokeColor}\n strokeDasharray={strokeDasharray}\n strokeDashoffset={adjustedOffset}\n strokeWidth={STROKE_WIDTH}\n \/>\n );\n })}\n <\/svg>\n );\n};<\/code><\/pre>\n\n\n\nThere might be a point where requirements change and we\u2019ll need to adopt another solution or revisit existing libraries. Until then, the lightweight and in-scope versatility of the SVG\u00a0<circle><\/code>\u00a0solution will serve us well.<\/p>\n","protected":false},"excerpt":{"rendered":"In this post, we share three different approaches to drawing pie charts using only HTML and CSS.<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-350","post","type-post","status-publish","format-standard","hentry","category-engineering"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.rainforestqa.com\/blog\/wp-json\/wp\/v2\/posts\/350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rainforestqa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rainforestqa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rainforestqa.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rainforestqa.com\/blog\/wp-json\/wp\/v2\/comments?post=350"}],"version-history":[{"count":9,"href":"https:\/\/www.rainforestqa.com\/blog\/wp-json\/wp\/v2\/posts\/350\/revisions"}],"predecessor-version":[{"id":2476,"href":"https:\/\/www.rainforestqa.com\/blog\/wp-json\/wp\/v2\/posts\/350\/revisions\/2476"}],"wp:attachment":[{"href":"https:\/\/www.rainforestqa.com\/blog\/wp-json\/wp\/v2\/media?parent=350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rainforestqa.com\/blog\/wp-json\/wp\/v2\/categories?post=350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rainforestqa.com\/blog\/wp-json\/wp\/v2\/tags?post=350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}