How To Create a Gantt Chart Easily Using Code

Channel:

Confused Engineer

Subscribers:

660

Published on January 30, 2024 7:41:59 PM ● Video Link: https://www.youtube.com/watch?v=K70D5ebtEiw

Category:

Guide

Duration: 7:32

439 views

4

So I recently had to make a Gantt chart and it look me longer than I care to say figuring out how to customize it and make it fancy AF. So to save someone else the headache I created this short video to highlight how to create a Gantt chart in Markdown using the Mermaid framework, this will work with other charts too but I specifically talk about a Gantt chart in this video.

As promised as well here is the code I used in this video, it should just be a matter of changing some elements to make it how you like. Not also that the theme needs to be kept as the base theme as it is the only editable theme:

```mermaid
%%{
init: {
"gantt": {
'topPadding' :100,
'rightPadding' :100,
'leftPadding' :100,
'barHeight' :50,
'fontSize' :17,
'titleTopMargin': 75,
'gridLineStartPadding' : 48,
'barGap' :10,
'sectionFontSize': 16
},
'theme': 'base',
'themeVariables': {
"fontFamily": 'Sans-Serif',
'primaryColor': '#bcc8ff',
'primaryTextColor': '#000',
'primaryBorderColor': '#2d2ac9',
'tertiaryColor': '#000',
'textColor':'#000',
'tertiaryTextColor': '#000'
}
}
}%%

%% https://mermaid.js.org/config/directives.html#declaring-directives
%% https://mermaid.js.org/config/schema-docs/config-defs-gantt-diagram-config.html#toppadding

%% color theme need opened with the high contrast light theme.

gantt
title changed title
dateFormat MM
axisFormat %B
section Task 1
Do Task 1 :task1, 01, 91d
section Task 2
Do Task 2 :task2, 02, 60d
section Task 3
create chart :task3, 05, 30d



If you enjoyed the video don't forget to SUBSCRIBE!