icon picker
Advanced Charts with The Format Formula

Infinite customizability of your QuickCharts from Coda.
Need a more intricate chart that takes advantage of all the many QuickChart options available? You can always use the Coda formula to construct a QuickChart URL manually. Below is a simple example where we have created a ‘template’ for a given chart in a table (), using the {1}, {2}, etc. syntax to denote places we will later fill in data like a madlib. We then use the Format formula to fill in those values, and finally use the Embed formula to render the chart in Coda!
Chart Templates
Template Name
Template
Stacked Bar Chart
1
{ type: 'bar', data: { labels: {1}, datasets: [ { label: '{2}', backgroundColor: 'rgb(255, 99, 132)', stack: 'Stack 0', data: {3}, }, { label: '{4}', backgroundColor: 'rgb(54, 162, 235)', stack: 'Stack 0', data: {5}, }, ], }, options: { title: { display: true, text: 'Chart.js Bar Chart - Stacked', }, tooltips: { mode: 'index', intersect: false, }, responsive: true, scales: { xAxes: [ { stacked: true, }, ], yAxes: [ { stacked: true, }, ], }, }, }

Chart URL

Construct the chart URL using the above template and the Format formula to fill in the blanks. Make sure to use the EncodeForUrl formula so that all your options are preserved when you use the URL.
"https://quickchart.io/chart?width=400&c=" +
Format([Stacked Bar Chart].Template,
"['January', 'February', 'March', 'April', 'May', 'June', 'July']",
'Dataset1',
"[79, 83, 39, 7, 65, 83, 34]",
'Dataset2',
"[3, -12, -31, 82, -33, 12, -67]"
).EncodeForUrl()
Outputted URL
https://quickchart.io/chart?width=400&c=%7B%0A%20%20type%3A%20'bar'%2C%0A%20%20data%3A%20%7B%0A%20%20%20%20labels%3A%20%5B'January'%2C%20'February'%2C%20'March'%2C%20'April'%2C%20'May'%2C%20'June'%2C%20'July'%5D%2C%0A%20%20%20%20datasets%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20label%3A%20'Dataset1'%2C%0A%20%20%20%20%20%20%20%20backgroundColor%3A%20'rgb(255%2C%2099%2C%20132)'%2C%0A%20%20%20%20%20%20%20%20stack%3A%20'Stack%200'%2C%0A%20%20%20%20%20%20%20%20data%3A%20%5B79%2C%2083%2C%2039%2C%207%2C%2065%2C%2083%2C%2034%5D%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20label%3A%20'Dataset2'%2C%0A%20%20%20%20%20%20%20%20backgroundColor%3A%20'rgb(54%2C%20162%2C%20235)'%2C%0A%20%20%20%20%20%20%20%20stack%3A%20'Stack%200'%2C%0A%20%20%20%20%20%20%20%20data%3A%20%5B3%2C%20-12%2C%20-31%2C%2082%2C%20-33%2C%2012%2C%20-67%5D%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%20%20options%3A%20%7B%0A%20%20%20%20title%3A%20%7B%0A%20%20%20%20%20%20display%3A%20true%2C%0A%20%20%20%20%20%20text%3A%20'Chart.js%20Bar%20Chart%20-%20Stacked'%2C%0A%20%20%20%20%7D%2C%0A%20%20%20%20tooltips%3A%20%7B%0A%20%20%20%20%20%20mode%3A%20'index'%2C%0A%20%20%20%20%20%20intersect%3A%20false%2C%0A%20%20%20%20%7D%2C%0A%20%20%20%20responsive%3A%20true%2C%0A%20%20%20%20scales%3A%20%7B%0A%20%20%20%20%20%20xAxes%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20stacked%3A%20true%2C%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20yAxes%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20stacked%3A%20true%2C%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%7D%2C%0A%20%20%7D%2C%0A%7D

Embedded Chart

Finally, use the Embed formula to render the chart URL that you have constructed.
Embed([Chart URL], force: true)
Load content from quickchart.io?
Loading external content may reveal information to 3rd parties. Learn more
Allow
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.