Skip to content

Custom SVG Gantt Chart

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.

- Paul Danyliuk
- Paul Danyliuk
- Brandon Trew


Give it a try below
Add or edit projects, change the options, and watch the chart change!

Projects
0
Project
Start Date
End Date
Color
*
1
One
1/15/2020
3/25/2020
Blue
2
Two
3/1/2020
5/21/2020
Orange
3
Three
4/8/2020
8/6/2020
Purple
4
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:
800
px
Bar Height:
36
px
Bar Spacing:
8
px
Bar Radius:
8
px
*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.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.