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

Chart Templates

Template Name

Template

Stacked Bar Chart

{ 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.