By workstream gantt

Gantt styletype: "gantt"

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.

Edit it — this is the actual editor panel

Design JSON — “By workstream” variant

{
  "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
      }
    }
  ]
}

Gantt examples

Real renders of the by workstream gantt — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Sprint by team

A two-week sprint, one color per workstream.

API overrides for this example

{
  "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 for this example

{
  "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
}

When to use the by workstream style

Sprint plans colored by team
Roadmaps grouped by workstream
Schedules colored by owner

Use it dynamically via the API

Push fresh tasks per render with '<key>.data' as [{ label, start, end, progress? }]; start/end are ISO dates or numbers, and the timeline re-lays-out to fit.

Full API request with this variant's current values — the playground above sends only the properties you change

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": "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.barColor": "#4f46e5",
    "gantt.barRadius": 4,
    "gantt.showProgress": true,
    "gantt.showGrid": true,
    "gantt.opacity": 1
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Other gantt styles

DefaultBy workstreamDark

See the gantt component page for the full property reference and FAQs.