CSSPLAY

CSS DEMOS › CSS ONLY Pie Chart using no images

Date : 30th June 2012

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

Information

After a recent email asking if it was possible to produce a CSS only pie chart without using any images and have a simple way of calculating the angles involved, I searched the web and could not find any suitable demonstrations so set about producing my own version.

The result can be seen above, where each sector can 'standalone' and does not overlap adjacent sectors. In this way it is possible to pull a sector from the chart as a highlight.

It is also possible to have each sector as a link to other pages.

Working in IE9+, Firefox, Safari, Chrome, Opera, iPad, iPhone and iPod Touch.

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.