Styling

Bars take their colors from the theme. Set color on a task to paint one bar from your own palette, and className to hang your own CSS on it.

Color a bar by statusCopy Anchor Link

color is an optional Task field. It accepts any CSS color value, including var(--brand) and rgb(255 0 0 / 50%), and the string is passed through after trimming. The remaining fields are in Task data.

const tasks: Task[] = [
  { id: 'audit', name: 'Security audit', parentId: null, sequence: '1',
    startDate: '2026-04-06', endDate: '2026-04-10', progress: 40,
    color: '#2563eb' },
];

The bar, its hover shade, its progress fill and its label all derive from that one value, so a colored bar takes no gray from the theme. The label comes out black or white, whichever the bar color can carry.

On a pale bar the black label sits over the darker progress fill and loses contrast across the filled portion.

color wins over every theme token. The token is only the fallback, so setting --gantt-bar-bg chart-wide leaves a colored task alone.

Summary bars fall back to the summary tokens, which makes the summary and task colors differ on uncolored bars only. See Theming for the token list.

A color that is undefined, '' or whitespace sets nothing, and the bar renders like an uncolored one.

color changes the bar and nothing else. The radius, shadow, selection outline and dependency arrows come from the stylesheet and the theme, and the task list does not read color.

A bar narrower than 56px puts its name outside the right edge, where it takes the theme's muted color regardless of color.

Attach your own CSS to a taskCopy Anchor Link

className on a task is added to that task's bar and to its row in the task list. It is appended last in both.

{ id: 'audit', name: 'Security audit', parentId: null, sequence: '1',
  startDate: '2026-04-06', endDate: '2026-04-10', className: 'blocked' }

.gantt-task-bar.blocked {
  background: repeating-linear-gradient(
    45deg,
    #b45309,
    #b45309 6px,
    #92400e 6px,
    #92400e 12px
  );
}

.gantt-grid-row.blocked .gantt-grid-cell {
  font-style: italic;
}

Position in the class attribute has no effect on the cascade. Your rule wins on specificity, as .gantt-task-bar.blocked outranks .gantt-task-bar, or on source order at equal specificity.

A row that holds several tasks in one lane takes the first task's className. Each bar keeps its own.

Turn tooltips offCopy Anchor Link

showTooltip defaults to true. It controls the hover card and the % readout shown while the progress handle is dragged, and false removes both.

false also removes the live region announcements a pointer drag produces. See Keyboard and screen readers.

A move or a resize shows no hover card either way. Its readout is the date the tick row writes at the dragged edge, part of the header, which showTooltip does not affect. See Locale and date formats.

Before you integrateCopy Anchor Link

• color is a value you supply. There is no palette and no legend, so map a status to a color before passing the tasks.
• color-mix support is required for the two derived shades, and relative color syntax for the computed label. Fewer browsers support the second one. Where either is missing, the bar keeps the plain color and the label falls back to the theme's bar text color.
• The task list renders the task name, plus the row's sequence when showRowNumbers is on. Put other fields in the detail panel, and see Task list and hierarchy.
• Header cells hold text only, and markup cannot be placed in them. renderDetail is the chart's only render prop and is not a styling hook. Every other surface is styled through CSS.

See GanttProps for prop definitions and Task for the color and className fields.