Dark gantt

Gantt styletype: "gantt"

Generate dark-mode Gantt timeline images — bright bars on a dark card with progress fills — for roadmaps and status cards. Fresh data per API call. Create timeline images free with Imejis.

Edit it — this is the actual editor panel

Design JSON — “Dark” variant

{
  "title": "Gantt sample",
  "description": "A project timeline with progress bars",
  "dimensions": {
    "width": 860,
    "height": 420
  },
  "background": {
    "color": "#0d1117"
  },
  "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": "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
          }
        ],
        "barColor": "#22d3ee",
        "barRadius": 4,
        "showProgress": true,
        "showGrid": true,
        "opacity": 1,
        "gridColor": "#1e293b",
        "labelColor": "#e2e8f0",
        "axisColor": "#64748b"
      }
    }
  ]
}

Gantt examples

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

Dark roadmap

A launch plan in cyan on a near-black card.

API overrides for this example

{
  "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": "#22d3ee",
  "gantt.gridColor": "#1e293b",
  "gantt.labelColor": "#e2e8f0",
  "gantt.axisColor": "#64748b"
}

Dark sprint

A workstream-colored sprint on dark.

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.barColor": "#22d3ee",
  "gantt.gridColor": "#1e293b",
  "gantt.labelColor": "#e2e8f0",
  "gantt.axisColor": "#64748b"
}

When to use the dark style

Dark-theme roadmap and status cards
Launch and milestone graphics on dark
Social cards with a project timeline

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": "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": "#22d3ee",
    "gantt.barRadius": 4,
    "gantt.showProgress": true,
    "gantt.showGrid": true,
    "gantt.opacity": 1,
    "gantt.gridColor": "#1e293b",
    "gantt.labelColor": "#e2e8f0",
    "gantt.axisColor": "#64748b"
}'

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

Other gantt styles

Default By workstreamDark

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