# Pie Charts

Published articles for Pie Charts.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Simple pie charts with fallback, today

DevFeed: [Simple pie charts with fallback, today](<https://devfeed.tech/articles/simple-pie-charts-with-fallback-today-52125.md>)

Original publisher: [Read original article](<https://lea.verou.me/2020/11/simple-pie-charts-with-fallback-today/>)

Author: Lea Verou

Published: 2020-11-12T00:00:00Z

Content type: tutorial

Language: en

Sources: [Lea Verou's blog](<https://devfeed.tech/sources/lea-verou-s-blog.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [polyfill](<https://devfeed.tech/topics/polyfill.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Firefox](<https://devfeed.tech/topics/firefox.md>)

Tags: [background-image](<https://devfeed.tech/tags/background-image.md>), [blog](<https://devfeed.tech/tags/blog.md>), [charts](<https://devfeed.tech/tags/charts.md>), [color](<https://devfeed.tech/tags/color.md>), [conic-gradient](<https://devfeed.tech/tags/conic-gradient.md>), [css](<https://devfeed.tech/tags/css.md>), [fallback](<https://devfeed.tech/tags/fallback.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [just](<https://devfeed.tech/tags/just.md>), [pie-charts](<https://devfeed.tech/tags/pie-charts.md>), [polyfill](<https://devfeed.tech/tags/polyfill.md>), [svg](<https://devfeed.tech/tags/svg.md>), [tips](<https://devfeed.tech/tags/tips.md>)

### AI overview

A CSS tutorial explains how to create pie charts with conic gradients while providing graceful-degradation fallbacks for browsers that lack conic-gradient support. It recommends linear-gradient fallbacks over a heavy polyfill for production sites and discusses layout considerations.

### Source excerpt

Five years ago, I had written this extensive Smashing Magazine article detailing multiple different methods for creating simple pie charts, either with clever use of transforms and pseudo-elements, or with SVG stroke-dasharray. In the end, I mentioned creating pie charts with conic gradients, as a future technique. It was actually a writeup of my "The Missing Slice" talk, and an excerpt of my CSS Secrets book, which had just been published. I was reminded of this article today by someone on Twitter: https://twitter.com/sam\_kent\_/status/1326805431390531584 I suggested conic gradients, since they are now supported in >87% of users' browsers, but he needed to support IE11. He suggested using my polyfill from back then, but this is not a very good idea today. https://twitter.com/fcorradini/status/1326880827825905665 Indeed, unless you really need to display conic gradients, even I would not recommend using the polyfill on a production facing site. It requires -prefix-free, which re-fetches (albeit from cache) your entire CSS and sticks it in a <style> element, with no sourcemaps since those were not a thing back when -prefix-free was written. If you're already using -prefix-free, the polyfill is great, but if not, it's way too heavy a dependency. Pie charts with fallback (modern browsers) Instead, what I would recommend is graceful degradation, i.e. to use the same color stops, but in a linear gradient. We can use @supports and have quite an elaborate progress bar fallback. For example, take a look at this 40% pie chart: .pie { height: 20px; background: linear-gradient(to right, deeppink 40%, transparent 0); background-color: gold; } @supports (background: conic-gradient(white, black)) { .pie { width: 200px; height: 200px; background-image: conic-gradient(deeppink 40%, transparent 0); border-radius: 50%; } } This is what it looks like in Firefox 82 (conic gradients are scheduled to ship unflagged in Firefox 83) or IE11: Note that because @supports is only used for the