Gantt component

Datatype: "gantt"

A Gantt / timeline chart — horizontal bars across a shared time axis, one per task, with optional progress fills. Key each task by { label, start, end } and swap the data on every API call to build roadmap, project-status and schedule images.

Edit it — this is the actual editor panel

Design 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": "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": "#4f46e5",
        "barRadius": 4,
        "showProgress": true,
        "showGrid": true,
        "opacity": 1
      }
    }
  ]
}

Like what you built? The full editor — canvas, templates and the render API — is free to start.

Open the editor

Gantt examples

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

Product launch plan

Five phases with progress, from research to launch.

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": "#4f46e5"
}

Roadmap in teal

The same plan in a single teal hue.

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": "#0d9488"
}

All gantt styles

Every style rendered live — each is just a different set of property values on the same component, and each has its own page with a dedicated preview, use cases and API example.

By workstreamPer-task colors to group a plan by team, owner or phase.

DarkA timeline on a dark card with bright bars — built for social.

Use cases

What developers typically build with the gantt component.

Product roadmaps and release timelines
Project and sprint status for reports
Schedules and plans in slides and emails
Content and campaign calendars
Year-in-review and milestone graphics

Use it dynamically via the API

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

Full API request with the sample design'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": "#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.

Property reference

Every property the gantt component accepts — in the editor, in design JSON, and as API overrides.

Property	Type	Edits as	Default	Description
data	object[]	text	[]	Tasks: array of { label, start, end, color?, progress? }. start/end are ISO dates ("2026-01-15") or numbers.
barColor	color	#4f46e5	"#4f46e5"	Default bar fill.
barRadius	number	4	4	Bar corner radius (px).
showProgress	boolean	true	true	Draw the completed portion of a bar from each task's `progress`.
showGrid	boolean	true	true	Draw vertical time gridlines.
gridColor	color	#e5e7eb	"#e5e7eb"	Gridline color.
labelColor	color	#334155	"#334155"	Task-label + axis text color.
axisColor	color	#94a3b8	"#94a3b8"	Time-axis line and tick color.
rowLabelWidth	number	0.26	0.26	Fraction of width reserved for the task-label column (0–0.6).
opacity	number	1	1	Overall component opacity from 0 (transparent) to 1 (opaque).
borderWidth	number	0	0	Border thickness in pixels around the component.
borderColor	color	transparent	"transparent"	Border color (any CSS color).
borderStyle	'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'none'	soliddasheddotteddoublenone	"solid"	Border line style.
borderRadius	number	0	0	Corner radius in pixels.
boxShadow	string	text	—	CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)".

Frequently Asked Questions

Send '<key>.data' as an array of { label, start, end } objects, with an optional progress (0–100) and color per task. start and end are ISO dates like "2026-01-15" or plain numbers; the timeline scales to fit.

Yes. Give a task a progress from 0 to 100 and the bar draws a filled portion for the completed part over a lighter track. Leave progress off and the bar is a solid block.

No. start and end can be ISO date strings for a real calendar axis, or plain numbers (like a day or week index) for a generic timeline. The axis labels adapt to which you use.

Yes. Add a color to any task and that bar uses it; tasks without a color fall back to barColor. It is an easy way to group a plan by team, owner or phase.

Gantt examples

Product launch plan

Roadmap in teal

All gantt styles

Use cases

Use it dynamically via the API

Property reference

Frequently Asked Questions

How do I pass the tasks?

Can bars show progress?

Do I have to use dates?

Can I color bars by workstream or owner?