Home / Part to Whole

Part to Whole in HTML and JavaScript

These charts show how a whole splits into parts: how people paid, where money goes, what fills a drive. Use a pie or donut for a few simple shares, a waffle when you want people to picture the numbers, and a treemap, sunburst or icicle for nested data. Each chart is one HTML file with no library.

Pie Chart example: how customers paid at a cafe

021. Pie Chart

Example: how customers paid at a cafe
Donut Chart example: workouts logged by members of a fitness app

022. Donut Chart

Example: workouts logged by members of a fitness app
Semi Donut Chart example: a fundraising appeal and the money still needed

023. Semi Donut Chart

Example: a fundraising appeal and the money still needed
Treemap example: bookshop sales by section and genre

024. Treemap

Example: bookshop sales by section and genre
Sunburst Chart example: where a city sends its household waste

025. Sunburst Chart

Example: where a city sends its household waste
Waffle Chart example: how 100 new customers found a furniture shop

026. Waffle Chart

Example: how 100 new customers found a furniture shop
Marimekko Chart example: e-bike market share by region and brand

027. Marimekko Chart

Example: e-bike market share by region and brand
Funnel Chart example: shoppers moving from first visit to purchase in an online shop

028. Funnel Chart

Example: shoppers moving from first visit to purchase in an online shop
Icicle Chart example: what is filling up a laptop drive

029. Icicle Chart

Example: what is filling up a laptop drive
Circle Packing Chart example: staff at a food company grouped by department and team

030. Circle Packing Chart

Example: staff at a food company grouped by department and team