Lots of people love pie. Some people love pie charts. I personally love pie charts so much that I wanted mine to use a gradient fill. Now yours can too, and here’s how:
Drawing pie charts with canvas is relatively straightforward. Draw a complete arc of one color, and then an arc of another color to indicate the completed percent. Canvas even supports gradient fills, so we’re all set, right? Unfortunately, no. The linear and radial fills that canvas uses aren’t quite what we need. What we really need is a ‘polar gradient’. It’s a bit more work, but we can actually build one of these too. Using
So what good does this gradient do us? Well, it means we can draw an arc of one color in the main canvas, and then use
Here’s what the final pie chart looks like…
…and here’s the code to generate it…
pieChart({fillPercent: 95,backgroundStrokeColor: "#CCC",foregroundStrokeColor: ["green", "blue"],animationRate: 5000,radius: 120,stroke: 12,container: document.getElementById('ff')});
To learn more, check out the code here on GitHub.
—William Farrell