Skip to content
Ever since Paul posted the trick to compile and render an SVG image in Coda, I’ve been wanting to try it out to learn more. I decided to pick a project that would require me to use most of the variables in an SVG because if I have to include them as variables, I have to learn how they work just a little better.
I decided on a Gantt Chart since we get requests for things like custom divider lines and custom segments. Check out the tables in the doc, and look for hidden columns that contain the formulas used, to see how all of this comes together.
Here are some of the community posts and docs I referenced and was inspired by and I encourage you to click through and check them all out.
Give it a try below
Add or edit projects, change the options, and watch the chart change!
Projects
Project
Start Date
End Date
Color
*
One
1/15/2020
3/25/2020
Blue
Two
3/1/2020
5/21/2020
Orange
Three
4/8/2020
8/6/2020
Purple
Four
9/9/2020
12/15/2020
Teal
There are no rows in this table
Options
*Add/Edit segments in
Chart Start Date:1/1/2020
Chart End Date:12/31/2020
Chart Width:px800
Bar Height:px36
Bar Spacing:px8
Bar Radius:px8
*Add/Edit custom colors in
Header Background Color:Med Gray
Header Text Color:Black
Label Text Color:White
Divider Color:Light Gray
Divider Thickness:1
*Set divider bar override colors in
Chart
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.