Skip to content
QuickChart Pack
QuickChart Pack
Sparklines for Objectives and Key Results in Coda
Advanced Charts with The Format Formula
More by David
More
Share
Explore

icon picker
Advanced Charts with The Format Formula

Infinite customizability of your QuickCharts from Coda.
Noah Silverstein
Need a more intricate chart that takes advantage of all the many QuickChart options available? You can always use the Coda
Format
⁠
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 (
Chart Templates
⁠
), 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
0
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.