Custom SVG Gantt Chart

Explore

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.

⁠

MEGA TRICK: SVG in Coda⁠

- Paul Danyliuk

⁠

Mind map (tree chart) implementation⁠

- Paul Danyliuk

⁠

Radar Chart⁠

- Paul Danyliuk

⁠

Single Elimination Tournament Bracket (SVG Implementation) ⁠

- Phil Hamilton-Schmidt

⁠

Product Milestone View⁠

- Brandon Trew

⁠

Electoral College Prediction Pool⁠

- Fil Fortes

Give it a try below

Add or edit projects, change the options, and watch the chart change!

Projects

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 Segments⁠

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
Color Options⁠

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 Segments⁠

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.