--- title: "Gantt by Workstream API — Colored timeline bars | Imejis" description: "Render Gantt timeline images with per-task colors to group a plan by team, owner or phase, each bar with a progress fill. Fresh data per API call. Try Imejis free." url: "https://www.imejis.io/components/gantt/workstream" --- # Gantt by Workstream API — Colored timeline bars | Imejis Per-task colors to group a plan by team, owner or phase. ## Use cases - Sprint plans colored by team - Roadmaps grouped by workstream - Schedules colored by owner ## Properties | Name | Type | Default | Description | | --- | --- | --- | --- | | `data` | `object[]` | `[]` | Tasks: array of { label, start, end, color?, progress? }. start/end are ISO dates ("2026-01-15") or numbers. | | `barColor` | `color` | `"#4f46e5"` | Default bar fill. | | `barRadius` | `number` (min 0) | `4` | Bar corner radius (px). | | `showProgress` | `boolean` | `true` | Draw the completed portion of a bar from each task's `progress`. | | `showGrid` | `boolean` | `true` | Draw vertical time gridlines. | | `gridColor` | `color` | `"#e5e7eb"` | Gridline color. | | `labelColor` | `color` | `"#334155"` | Task-label + axis text color. | | `axisColor` | `color` | `"#94a3b8"` | Time-axis line and tick color. | | `rowLabelWidth` | `number` (min 0, max 0.6) | `0.26` | Fraction of width reserved for the task-label column (0–0.6). | | `opacity` | `number` | `1` | Overall component opacity from 0 (transparent) to 1 (opaque). | | `borderWidth` | `number` | `0` | Border thickness in pixels around the component. | | `borderColor` | `color` | `"transparent"` | Border color (any CSS color). | | `borderStyle` | `'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'none'` | `"solid"` | Border line style. | | `borderRadius` | `number` | `0` | Corner radius in pixels. | | `boxShadow` | `string` | — | CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)". | ## Design JSON (this variant) ```json { "title": "Gantt sample", "description": "A project timeline with progress bars", "dimensions": { "width": 860, "height": 420 }, "background": { "color": "#ffffff" }, "components": [ { "id": "sample-gantt", "key": "gantt", "type": "gantt", "position": { "x": 20, "y": 20 }, "rotation": 0, "size": { "width": 820, "height": 380 }, "dynamic": true, "properties": { "data": [ { "label": "API", "start": "2026-05-04", "end": "2026-05-15", "color": "#2563eb", "progress": 80 }, { "label": "Web app", "start": "2026-05-11", "end": "2026-05-29", "color": "#16a34a", "progress": 45 }, { "label": "Docs", "start": "2026-05-18", "end": "2026-05-27", "color": "#f59e0b", "progress": 30 }, { "label": "Release", "start": "2026-05-27", "end": "2026-06-01", "color": "#dc2626", "progress": 0 } ], "barColor": "#4f46e5", "barRadius": 4, "showProgress": true, "showGrid": true, "opacity": 1 } } ] } ``` ## Examples ### Sprint by team A two-week sprint, one color per workstream. API overrides that reproduce this example: ```json { "gantt.data": [ { "label": "API", "start": "2026-05-04", "end": "2026-05-15", "color": "#2563eb", "progress": 80 }, { "label": "Web app", "start": "2026-05-11", "end": "2026-05-29", "color": "#16a34a", "progress": 45 }, { "label": "Docs", "start": "2026-05-18", "end": "2026-05-27", "color": "#f59e0b", "progress": 30 }, { "label": "Release", "start": "2026-05-27", "end": "2026-06-01", "color": "#dc2626", "progress": 0 } ], "gantt.showProgress": true } ``` ### Sprint, no progress The same sprint as solid bars. API overrides that reproduce this example: ```json { "gantt.data": [ { "label": "API", "start": "2026-05-04", "end": "2026-05-15", "color": "#2563eb", "progress": 80 }, { "label": "Web app", "start": "2026-05-11", "end": "2026-05-29", "color": "#16a34a", "progress": 45 }, { "label": "Docs", "start": "2026-05-18", "end": "2026-05-27", "color": "#f59e0b", "progress": 30 }, { "label": "Release", "start": "2026-05-27", "end": "2026-06-01", "color": "#dc2626", "progress": 0 } ], "gantt.showProgress": false } ``` ## API overrides Push fresh tasks per render with '.data' (or just '') as [{ label, start, end, progress? }]; start/end are ISO dates or numbers, and the timeline re-lays-out to fit. Flat override payload (`key.property` addressing) with the sample design's current values — send only the keys you want to change: ```json { "gantt.data": [ { "label": "Research", "start": "2026-01-05", "end": "2026-01-23", "progress": 100 }, { "label": "Design", "start": "2026-01-19", "end": "2026-02-13", "progress": 100 }, { "label": "Build", "start": "2026-02-09", "end": "2026-03-27", "progress": 55 }, { "label": "QA", "start": "2026-03-16", "end": "2026-04-10", "progress": 20 }, { "label": "Launch", "start": "2026-04-06", "end": "2026-04-17", "progress": 0 } ], "gantt.barColor": "#4f46e5", "gantt.barRadius": 4, "gantt.showProgress": true, "gantt.showGrid": true, "gantt.opacity": 1 } ``` ```bash curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \ --header 'dma-api-key: {{YOUR_API_KEY}}' \ --header 'Content-Type: application/json' \ --data '{ "gantt.data": [ { "label": "Research", "start": "2026-01-05", "end": "2026-01-23", "progress": 100 }, { "label": "Design", "start": "2026-01-19", "end": "2026-02-13", "progress": 100 }, { "label": "Build", "start": "2026-02-09", "end": "2026-03-27", "progress": 55 }, { "label": "QA", "start": "2026-03-16", "end": "2026-04-10", "progress": 20 }, { "label": "Launch", "start": "2026-04-06", "end": "2026-04-17", "progress": 0 } ], "gantt.barColor": "#4f46e5", "gantt.barRadius": 4, "gantt.showProgress": true, "gantt.showGrid": true, "gantt.opacity": 1 }' ``` `{{YOUR_DESIGN_ID}}` and `{{YOUR_API_KEY}}` are placeholders: first create the design in your account (paste the sample design JSON above into the editor at https://app.imejis.io, or create it programmatically via the imejis MCP server's `create_design` + `update_design` tools), then render it with the design's id and one of your API keys. Agents: the MCP server at https://api.imejis.io/api/mcp exposes this same catalog as structured data via the `list_component_types` tool (property kinds, allowed values, bounds, ready-to-use sample designs). ## Related - [Gantt component](https://www.imejis.io/components/gantt.md) — full reference and FAQs - [Dark](https://www.imejis.io/components/gantt/dark.md) — A timeline on a dark card with bright bars — built for social.