Edit Gantt Chart

Name

Also known as (comma separated)

Brief definition Task timeline with durations/dependencies.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "title", "type": "text", "label": "Chart title", "default": "Q3 launch plan" }, { "id": "unit", "type": "select", "label": "Time unit", "default": "Week", "options": [ "Week", "Day" ] }, { "id": "density", "type": "select", "label": "Density", "default": "comfortable", "options": [ "comfortable", "compact" ] }, { "id": "accent", "type": "color", "label": "Bar colour", "default": "#E8A020", "presets": [ "#E8A020", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#241430" ] }, { "id": "dependency", "type": "toggle", "label": "Show dependency line", "default": true } ]

Templates (JSON object keyed by format) { "html": "<figure class=\"gantt-demo gantt-demo--{{density}}\" style=\"--accent:{{accent}};\">\n <figcaption class=\"gantt-demo__title\">{{title}}</figcaption>\n <div class=\"gantt-demo__chart\">\n <div class=\"gantt-demo__header\" aria-hidden=\"true\">\n <span class=\"gantt-demo__tick\">{{unit}} 1</span>\n <span class=\"gantt-demo__tick\">{{unit}} 2</span>\n <span class=\"gantt-demo__tick\">{{unit}} 3</span>\n <span class=\"gantt-demo__tick\">{{unit}} 4</span>\n <span class=\"gantt-demo__tick\">{{unit}} 5</span>\n <span class=\"gantt-demo__tick\">{{unit}} 6</span>\n </div>\n <div class=\"gantt-demo__row\">\n <span class=\"gantt-demo__label\">Research</span>\n <div class=\"gantt-demo__track\">\n <div class=\"gantt-demo__bar\" style=\"left:0%;width:33.3%;\">Research</div>\n </div>\n </div>\n <div class=\"gantt-demo__row\">\n <span class=\"gantt-demo__label\">Design</span>\n <div class=\"gantt-demo__track\">\n <div class=\"gantt-demo__bar\" style=\"left:16.7%;width:33.3%;\">Design</div>\n {{#if dependency}}<div class=\"gantt-demo__dep\" style=\"left:49.5%;width:16.8%;\" aria-hidden=\"true\"></div>{{/if}}\n </div>\n </div>\n <div class=\"gantt-demo__row\">\n <span class=\"gantt-demo__label\">Build</span>\n <div class=\"gantt-demo__track\">\n <div class=\"gantt-demo__bar gantt-demo__bar--critical\" style=\"left:33.3%;width:50%;\">Build</div>\n </div>\n </div>\n <div class=\"gantt-demo__row\">\n <span class=\"gantt-demo__label\">Test</span>\n <div class=\"gantt-demo__track\">\n <div class=\"gantt-demo__bar\" style=\"left:66.7%;width:25%;\">Test</div>\n </div>\n </div>\n <div class=\"gantt-demo__row\">\n <span class=\"gantt-demo__label\">Launch</span>\n <div class=\"gantt-demo__track\">\n <div class=\"gantt-demo__bar gantt-demo__bar--milestone\" style=\"left:91.7%;width:8.3%;\">Launch</div>\n </div>\n </div>\n </div>\n <table class=\"gantt-demo__summary\">\n <caption>Task summary</caption>\n <thead>\n <tr><th scope=\"col\">Task</th><th scope=\"col\">Start</th><th scope=\"col\">End</th></tr>\n </thead>\n <tbody>\n <tr><th scope=\"row\">Research</th><td>{{unit}} 1</td><td>{{unit}} 2</td></tr>\n <tr><th scope=\"row\">Design</th><td>{{unit}} 2</td><td>{{unit}} 3</td></tr>\n <tr><th scope=\"row\">Build</th><td>{{unit}} 3</td><td>{{unit}} 5</td></tr>\n <tr><th scope=\"row\">Test</th><td>{{unit}} 5</td><td>{{unit}} 5.5</td></tr>\n <tr><th scope=\"row\">Launch</th><td>{{unit}} 6</td><td>{{unit}} 6</td></tr>\n </tbody>\n </table>\n</figure>\n<style>\n.gantt-demo { font: 13px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1.5px solid #24143022; border-radius: 12px; padding: 18px; box-sizing: border-box; }\n.gantt-demo__title { font-size: 15px; font-weight: 600; margin-bottom: 14px; }\n.gantt-demo__chart { display: flex; flex-direction: column; gap: 10px; }\n.gantt-demo--compact .gantt-demo__chart { gap: 4px; }\n.gantt-demo__header { display: flex; padding-left: 90px; margin-bottom: 4px; }\n.gantt-demo__tick { flex: 1; font-size: 10px; color: #24143099; text-transform: uppercase; letter-spacing: .03em; }\n.gantt-demo__row { display: flex; align-items: center; gap: 8px; }\n.gantt-demo__label { width: 82px; flex-shrink: 0; font-size: 12px; font-weight: 600; }\n.gantt-demo__track { position: relative; flex: 1; height: 22px; background: #24143010; border-radius: 6px; }\n.gantt-demo--compact .gantt-demo__track { height: 16px; }\n.gantt-demo__bar { position: absolute; top: 0; bottom: 0; background: var(--accent); border-radius: 6px; color: #241430; font-size: 11px; font-weight: 600; display: flex; align-items: center; padding: 0 8px; white-space: nowrap; overflow: hidden; }\n.gantt-demo__bar--critical { background: #241430; color: #FAF7F2; }\n.gantt-demo__bar--milestone { background: #F5C2E0; }\n.gantt-demo__dep { position: absolute; top: -10px; height: 2px; background: #24143055; }\n.gantt-demo__summary { margin-top: 16px; width: 100%; border-collapse: collapse; font-size: 11px; }\n.gantt-demo__summary caption { text-align: left; font-size: 11px; color: #24143099; margin-bottom: 4px; }\n.gantt-demo__summary th, .gantt-demo__summary td { text-align: left; padding: 3px 8px 3px 0; border-bottom: 1px solid #24143014; }\n</style>", "tailwind": "<figure class=\"gantt-tw gantt-tw--{{density}} font-sans text-[13px] text-[#241430] bg-[#FAF7F2] border-[1.5px] border-[#24143022] rounded-xl p-[18px] box-border\" style=\"--accent:{{accent}};\">\n <figcaption class=\"text-[15px] font-semibold mb-3.5\">{{title}}</figcaption>\n <div class=\"gantt-tw__chart flex flex-col gap-2.5\">\n <div class=\"gantt-tw__header flex pl-[90px] mb-1\" aria-hidden=\"true\">\n <span class=\"flex-1 text-[10px] uppercase tracking-wide text-[#241430]/60\">{{unit}} 1</span>\n <span class=\"flex-1 text-[10px] uppercase tracking-wide text-[#241430]/60\">{{unit}} 2</span>\n <span class=\"flex-1 text-[10px] uppercase tracking-wide text-[#241430]/60\">{{unit}} 3</span>\n <span class=\"flex-1 text-[10px] uppercase tracking-wide text-[#241430]/60\">{{unit}} 4</span>\n <span class=\"flex-1 text-[10px] uppercase tracking-wide text-[#241430]/60\">{{unit}} 5</span>\n <span class=\"flex-1 text-[10px] uppercase tracking-wide text-[#241430]/60\">{{unit}} 6</span>\n </div>\n <div class=\"flex items-center gap-2\">\n <span class=\"w-[82px] shrink-0 text-xs font-semibold\">Research</span>\n <div class=\"gantt-tw__track relative flex-1 bg-[#24143010] rounded-md\">\n <div class=\"gantt-tw__bar absolute inset-y-0 rounded-md text-[#241430] text-[11px] font-semibold flex items-center px-2 whitespace-nowrap overflow-hidden\" style=\"left:0%;width:33.3%;background:{{accent}};\">Research</div>\n </div>\n </div>\n <div class=\"flex items-center gap-2\">\n <span class=\"w-[82px] shrink-0 text-xs font-semibold\">Design</span>\n <div class=\"gantt-tw__track relative flex-1 bg-[#24143010] rounded-md\">\n <div class=\"gantt-tw__bar absolute inset-y-0 rounded-md text-[#241430] text-[11px] font-semibold flex items-center px-2 whitespace-nowrap overflow-hidden\" style=\"left:16.7%;width:33.3%;background:{{accent}};\">Design</div>\n {{#if dependency}}<div class=\"absolute h-0.5 bg-[#24143055]\" style=\"top:-10px;left:49.5%;width:16.8%;\" aria-hidden=\"true\"></div>{{/if}}\n </div>\n </div>\n <div class=\"flex items-center gap-2\">\n <span class=\"w-[82px] shrink-0 text-xs font-semibold\">Build</span>\n <div class=\"gantt-tw__track relative flex-1 bg-[#24143010] rounded-md\">\n <div class=\"gantt-tw__bar absolute inset-y-0 rounded-md text-[#FAF7F2] text-[11px] font-semibold flex items-center px-2 whitespace-nowrap overflow-hidden bg-[#241430]\" style=\"left:33.3%;width:50%;\">Build</div>\n </div>\n </div>\n <div class=\"flex items-center gap-2\">\n <span class=\"w-[82px] shrink-0 text-xs font-semibold\">Test</span>\n <div class=\"gantt-tw__track relative flex-1 bg-[#24143010] rounded-md\">\n <div class=\"gantt-tw__bar absolute inset-y-0 rounded-md text-[#241430] text-[11px] font-semibold flex items-center px-2 whitespace-nowrap overflow-hidden\" style=\"left:66.7%;width:25%;background:{{accent}};\">Test</div>\n </div>\n </div>\n <div class=\"flex items-center gap-2\">\n <span class=\"w-[82px] shrink-0 text-xs font-semibold\">Launch</span>\n <div class=\"gantt-tw__track relative flex-1 bg-[#24143010] rounded-md\">\n <div class=\"gantt-tw__bar absolute inset-y-0 rounded-md text-[#241430] text-[11px] font-semibold flex items-center px-2 whitespace-nowrap overflow-hidden bg-[#F5C2E0]\" style=\"left:91.7%;width:8.3%;\">Launch</div>\n </div>\n </div>\n </div>\n <table class=\"gantt-tw__summary mt-4 w-full border-collapse text-[11px]\">\n <caption class=\"text-left text-[11px] text-[#241430]/60 mb-1\">Task summary</caption>\n <thead>\n <tr><th scope=\"col\" class=\"text-left py-1 pr-2 border-b border-[#24143014]\">Task</th><th scope=\"col\" class=\"text-left py-1 pr-2 border-b border-[#24143014]\">Start</th><th scope=\"col\" class=\"text-left py-1 pr-2 border-b border-[#24143014]\">End</th></tr>\n </thead>\n <tbody>\n <tr><th scope=\"row\" class=\"text-left py-1 pr-2 border-b border-[#24143014] font-normal\">Research</th><td class=\"py-1 pr-2 border-b border-[#24143014]\">{{unit}} 1</td><td class=\"py-1 pr-2 border-b border-[#24143014]\">{{unit}} 2</td></tr>\n <tr><th scope=\"row\" class=\"text-left py-1 pr-2 border-b border-[#24143014] font-normal\">Design</th><td class=\"py-1 pr-2 border-b border-[#24143014]\">{{unit}} 2</td><td class=\"py-1 pr-2 border-b border-[#24143014]\">{{unit}} 3</td></tr>\n <tr><th scope=\"row\" class=\"text-left py-1 pr-2 border-b border-[#24143014] font-normal\">Build</th><td class=\"py-1 pr-2 border-b border-[#24143014]\">{{unit}} 3</td><td class=\"py-1 pr-2 border-b border-[#24143014]\">{{unit}} 5</td></tr>\n <tr><th scope=\"row\" class=\"text-left py-1 pr-2 border-b border-[#24143014] font-normal\">Test</th><td class=\"py-1 pr-2 border-b border-[#24143014]\">{{unit}} 5</td><td class=\"py-1 pr-2 border-b border-[#24143014]\">{{unit}} 5.5</td></tr>\n <tr><th scope=\"row\" class=\"text-left py-1 pr-2 font-normal\">Launch</th><td class=\"py-1 pr-2\">{{unit}} 6</td><td class=\"py-1 pr-2\">{{unit}} 6</td></tr>\n </tbody>\n </table>\n</figure>\n<style>\n.gantt-tw--compact .gantt-tw__chart { gap: 4px; }\n.gantt-tw--compact .gantt-tw__track { height: 16px; }\n.gantt-tw__track { height: 22px; }\n</style>", "react": "export function GanttChart({\n title = \"{{title}}\",\n unit = \"{{unit}}\",\n density = \"{{density}}\",\n accent = \"{{accent}}\",\n dependency = {{dependency}},\n}) {\n const rows = [\n { label: \"Research\", left: 0, width: 33.3, fill: accent, text: \"#241430\" },\n { label: \"Design\", left: 16.7, width: 33.3, fill: accent, text: \"#241430\" },\n { label: \"Build\", left: 33.3, width: 50, fill: \"#241430\", text: \"#FAF7F2\" },\n { label: \"Test\", left: 66.7, width: 25, fill: accent, text: \"#241430\" },\n { label: \"Launch\", left: 91.7, width: 8.3, fill: \"#F5C2E0\", text: \"#241430\" },\n ];\n const summary = [\n { label: \"Research\", start: 1, end: 2 },\n { label: \"Design\", start: 2, end: 3 },\n { label: \"Build\", start: 3, end: 5 },\n { label: \"Test\", start: 5, end: 5.5 },\n { label: \"Launch\", start: 6, end: 6 },\n ];\n const trackHeight = density === \"compact\" ? 16 : 22;\n const rowGap = density === \"compact\" ? 4 : 10;\n return (\n <figure style={{ fontFamily: \"system-ui, sans-serif\", fontSize: 13, color: \"#241430\", background: \"#FAF7F2\", border: \"1.5px solid #24143022\", borderRadius: 12, padding: 18, boxSizing: \"border-box\" }}>\n <figcaption style={{ fontSize: 15, fontWeight: 600, marginBottom: 14 }}>{title}</figcaption>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: rowGap }}>\n <div style={{ display: \"flex\", paddingLeft: 90, marginBottom: 4 }} aria-hidden=\"true\">\n {[1, 2, 3, 4, 5, 6].map((n) => (\n <span key={n} style={{ flex: 1, fontSize: 10, color: \"#24143099\", textTransform: \"uppercase\", letterSpacing: \".03em\" }}>{unit} {n}</span>\n ))}\n </div>\n {rows.map((r) => (\n <div key={r.label} style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n <span style={{ width: 82, flexShrink: 0, fontSize: 12, fontWeight: 600 }}>{r.label}</span>\n <div style={{ position: \"relative\", flex: 1, height: trackHeight, background: \"#24143010\", borderRadius: 6 }}>\n <div style={{ position: \"absolute\", top: 0, bottom: 0, left: `${r.left}%`, width: `${r.width}%`, background: r.fill, color: r.text, borderRadius: 6, fontSize: 11, fontWeight: 600, display: \"flex\", alignItems: \"center\", padding: \"0 8px\", whiteSpace: \"nowrap\", overflow: \"hidden\" }}>{r.label}</div>\n {dependency && r.label === \"Design\" && (\n <div style={{ position: \"absolute\", top: -10, left: \"49.5%\", width: \"16.8%\", height: 2, background: \"#24143055\" }} aria-hidden=\"true\" />\n )}\n </div>\n </div>\n ))}\n </div>\n <table style={{ marginTop: 16, width: \"100%\", borderCollapse: \"collapse\", fontSize: 11 }}>\n <caption style={{ textAlign: \"left\", fontSize: 11, color: \"#24143099\", marginBottom: 4 }}>Task summary</caption>\n <thead>\n <tr>\n <th scope=\"col\" style={{ textAlign: \"left\", padding: \"3px 8px 3px 0\", borderBottom: \"1px solid #24143014\" }}>Task</th>\n <th scope=\"col\" style={{ textAlign: \"left\", padding: \"3px 8px 3px 0\", borderBottom: \"1px solid #24143014\" }}>Start</th>\n <th scope=\"col\" style={{ textAlign: \"left\", padding: \"3px 8px 3px 0\", borderBottom: \"1px solid #24143014\" }}>End</th>\n </tr>\n </thead>\n <tbody>\n {summary.map((s) => (\n <tr key={s.label}>\n <th scope=\"row\" style={{ textAlign: \"left\", fontWeight: 400, padding: \"3px 8px 3px 0\", borderBottom: \"1px solid #24143014\" }}>{s.label}</th>\n <td style={{ padding: \"3px 8px 3px 0\", borderBottom: \"1px solid #24143014\" }}>{unit} {s.start}</td>\n <td style={{ padding: \"3px 8px 3px 0\", borderBottom: \"1px solid #24143014\" }}>{unit} {s.end}</td>\n </tr>\n ))}\n </tbody>\n </table>\n </figure>\n );\n}" }