Share
Explore
Example: Sunburst, Donut and Pie Chart Diagrams In Coda
Easily create Sunburst/donut Diagrams in Coda
Have you ever wanted to create a sunburst diagram in Coda?
This pack makes it easy to create these Sunburst Diagrams with 1 formula and a few inputs.
Features include
- Live updating
- Auto sizing
- Auto sorting
- Auto coloring
- Unlimited rings
Enjoy!
1. Sunburst from Simple Tables
A simple example demonstrating how to turn a table into a sunburst diagram.
Note the formula for the below sunburst diagram: 
','hsl(52.5,+100%,+90%)','hsl(190,+100%,+50%)','hsl(190,+100%,+90%)','hsl(327.5,+100%,+50%)'],+},+{+label:+'Dataset+0',+labels:+['Car','Airport','Food'],+data:+[2500,1700,400],+backgroundColor:+['hsl(52.5,+100%,+50%)','hsl(190,+100%,+50%)','hsl(327.5,+100%,+50%)'],+},+],+},+options:+{+cutoutPercentage:+38+,+plugins:+{+doughnutlabel:+{+labels:+[{+text:+'$4,600',+font:+{+size:+20+}+},+{+text:+'Travel'+}],+},+datalabels:+{+formatter:+(val,+ctx)+=>+{+if+(val+<+0)+return+'';+const+label+=+ctx.chart.data.datasets[ctx.datasetIndex].labels[ctx.dataIndex];+const+formattedVal+=+Intl.NumberFormat('en-US').format(val);+return+label+%2B+'+$'+%2B+formattedVal;+},+color:+'black',+font:+{+size:+6,+},+rotation:+function(ctx)+{+const+valuesBefore+=+ctx.dataset.data.slice(0,ctx.dataIndex).reduce((a,b)=>a+%2B+b,+0);+const+sum+=+ctx.dataset.data.reduce((a,+b)+=>+a+%2B+b,+0);+let+rotation+=+((valuesBefore+%2B+ctx.dataset.data[ctx.dataIndex]+/+2)+/+sum+*+360)+%2B+90;+if+(rotation+>+90+%26%26+rotation+<+270)+{+rotation+%2B=+180;+}+return+rotation;+},+},+},+},+})
Budget Data
2. Sunburst from Tables
A more complex example demonstrating how to turn a table into a sunburst diagram. Note that we are using the £ symbol and the -1 causes values under 1.5% to be hidden .
Note the formula for the below sunburst diagram: 
','hsl(52.5,+100%,+52%)','hsl(52.5,+100%,+54%)','hsl(52.5,+100%,+53%)','hsl(52.5,+100%,+57%)','hsl(52.5,+100%,+56%)','hsl(52.5,+100%,+60%)','hsl(52.5,+100%,+59%)','hsl(52.5,+100%,+61%)','hsl(52.5,+100%,+65%)','hsl(52.5,+100%,+64%)','hsl(52.5,+100%,+68%)','hsl(52.5,+100%,+67%)','hsl(52.5,+100%,+70%)','hsl(52.5,+100%,+74%)','hsl(190,+100%,+50%)','hsl(190,+100%,+54%)','hsl(190,+100%,+53%)','hsl(190,+100%,+57%)','hsl(190,+100%,+55%)','hsl(190,+100%,+56%)','hsl(190,+100%,+58%)','hsl(190,+100%,+58%)','hsl(190,+100%,+62%)','hsl(190,+100%,+60%)','hsl(190,+100%,+63%)','hsl(190,+100%,+67%)','hsl(190,+100%,+65%)','hsl(190,+100%,+69%)','hsl(190,+100%,+68%)'],+},+{+label:+'Dataset+1',+labels:+['Car','Food','Adventure','Insurance','Misc','Airport','Accommodation','Equipment','Airport','Food','Adventure','Car','Insurance','Misc','Accommodation','Equipment'],+data:+[2693,746,500,448,248,227,84,30,1809,1050,1029,320,220,210,177,51],+backgroundColor:+['hsl(52.5,+100%,+50%)','hsl(52.5,+100%,+53%)','hsl(52.5,+100%,+56%)','hsl(52.5,+100%,+59%)','hsl(52.5,+100%,+61%)','hsl(52.5,+100%,+64%)','hsl(52.5,+100%,+67%)','hsl(52.5,+100%,+70%)','hsl(190,+100%,+50%)','hsl(190,+100%,+53%)','hsl(190,+100%,+55%)','hsl(190,+100%,+58%)','hsl(190,+100%,+60%)','hsl(190,+100%,+63%)','hsl(190,+100%,+65%)','hsl(190,+100%,+68%)'],+},+{+label:+'Dataset+0',+labels:+['1st+Holiday','2nd+Holiday'],+data:+[4976,4866],+backgroundColor:+['hsl(52.5,+100%,+50%)','hsl(190,+100%,+50%)'],+},+],+},+options:+{+cutoutPercentage:+38+,+plugins:+{+doughnutlabel:+{+labels:+[{+text:+'$9,842',+font:+{+size:+20+}+},+{+text:+'Detailed\nBudget'+}],+},+datalabels:+{+formatter:+(val,+ctx)+=>+{+if+(val+<+147.63)+return+'';+const+label+=+ctx.chart.data.datasets[ctx.datasetIndex].labels[ctx.dataIndex];+const+formattedVal+=+Intl.NumberFormat('en-US').format(val);+return+label+%2B+'+£'+%2B+formattedVal;+},+color:+'black',+font:+{+size:+6,+},+rotation:+function(ctx)+{+const+valuesBefore+=+ctx.dataset.data.slice(0,ctx.dataIndex).reduce((a,b)=>a+%2B+b,+0);+const+sum+=+ctx.dataset.data.reduce((a,+b)+=>+a+%2B+b,+0);+let+rotation+=+((valuesBefore+%2B+ctx.dataset.data[ctx.dataIndex]+/+2)+/+sum+*+360)+%2B+90;+if+(rotation+>+90+%26%26+rotation+<+270)+{+rotation+%2B=+180;+}+return+rotation;+},+},+},+},+})
Detailed Budget Data
3. Adding Filters to Sunburst from anything
This example demonstrates how any 3 lists can be used to create a sunburst diagram.
This is great for adding filters to your diagrams.
Min Amount:
0000
0Budget items that meet filter:
@Restaurants
@Car Hire
@Fuel
@Flights
@Taxi
$400$2,000$500$1,500$200
Food
Car
Car
Airport
Airport
RestaurantsCar HireFuelFlightsTaxi
Note the formula for the below sunburst diagram: 
','hsl(52.5,+100%,+90%)','hsl(190,+100%,+50%)','hsl(190,+100%,+90%)','hsl(327.5,+100%,+50%)'],+},+{+label:+'Dataset+0',+labels:+['Car','Airport','Food'],+data:+[2500,1700,400],+backgroundColor:+['hsl(52.5,+100%,+50%)','hsl(190,+100%,+50%)','hsl(327.5,+100%,+50%)'],+},+],+},+options:+{+cutoutPercentage:+38+,+plugins:+{+doughnutlabel:+{+labels:+[{+text:+'$4,600',+font:+{+size:+20+}+},+{+text:+'Expenses'+}],+},+datalabels:+{+formatter:+(val,+ctx)+=>+{+if+(val+<+69)+return+'';+const+label+=+ctx.chart.data.datasets[ctx.datasetIndex].labels[ctx.dataIndex];+const+formattedVal+=+Intl.NumberFormat('en-US').format(val);+return+label+%2B+'+$'+%2B+formattedVal;+},+color:+'black',+font:+{+size:+6,+},+rotation:+function(ctx)+{+const+valuesBefore+=+ctx.dataset.data.slice(0,ctx.dataIndex).reduce((a,b)=>a+%2B+b,+0);+const+sum+=+ctx.dataset.data.reduce((a,+b)+=>+a+%2B+b,+0);+let+rotation+=+((valuesBefore+%2B+ctx.dataset.data[ctx.dataIndex]+/+2)+/+sum+*+360)+%2B+90;+if+(rotation+>+90+%26%26+rotation+<+270)+{+rotation+%2B=+180;+}+return+rotation;+},+},+},+},+})
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.