Gantt Chart

Grafico de Gantt com 12 colunas (meses) e barras horizontais por projeto/fase. Ideal para visualizar cronogramas, acompanhar fases de planejamento, execucao e encerramento de projetos ao longo do ano.

components/gantt-chart.cssAbrir no Figma

Uso

Quando e como utilizar o Gantt Chart para visualizar cronogramas de projetos com barras horizontais por fase.

• Cronograma de Projetos — Visualize prazos e fases de multiplos projetos em uma unica timeline anual.
• Fases com Cores — Diferencie planejamento (azul), execucao (verde) e encerramento (amarelo) por cores distintas.
• HTML Estatico — Monte o grafico manualmente com classes CSS de grid e barras, sem JavaScript.
• DataLoader + Factory — Carregue dados de JSON e renderize automaticamente via renderGanttChart().

Exemplos

Veja abaixo o exemplo interativo do Gantt Chart com dados de projetos, incluindo dark mode e estado vazio.

Carregando exemplo...

Anatomia

Estrutura interna do componente e seus elementos.

Parte	Elemento	Descricao
Container	.gantt-chart	Wrapper principal, width 100%
Titulo	.gantt-chart__title	Heading opcional, Space Grotesk 18px w600
Scroll	.gantt-chart__scroll-wrapper	Overflow-x auto com scrollbar customizada (6px)
Cabecalho	.gantt-chart__header	Duas linhas: trimestres (Q1–Q4) e meses (Jan–Dez)
Trimestre	.gantt-chart__header-quarter	Celula agrupando 3 meses com colspan
Mes	.gantt-chart__header-month	Celula individual, texto 12px uppercase
Corpo	.gantt-chart__body	Container com linhas de projetos
Linha	.gantt-chart__row	Linha com label e area de barras
Label da linha	.gantt-chart__row-label	Nome do projeto, sticky left com z-index 1
Area de barras	.gantt-chart__row-bars	Grid de 12 colunas para posicionar barras
Barra	.gantt-chart__bar	Barra horizontal com border-radius e sombra
Label da barra	.gantt-chart__bar-label	Texto dentro da barra (fase + progresso %)
Linha hoje	.gantt-chart__today-line	Linha vertical vermelha com position absolute
Legenda	.gantt-chart__legend	Flex com indicadores de cor e labels
Vazio	.gantt-chart__empty	Estado vazio com borda dashed e padding 48px

Fases

O Gantt Chart utiliza 3 fases com cores distintas para representar o ciclo de vida de cada projeto.

Cada barra recebe um modificador de fase que define sua cor. O progresso pode ser exibido dentro da barra via .gantt-chart__bar-label.

Fase	Modificador	Cor (light)	Descricao
Planejamento	--planning	Azul (#3b82f6)	Fase de concepcao, escopo e definicao de requisitos
Execucao	--execution	Verde (#22c55e)	Fase de desenvolvimento e implementacao ativa
Encerramento	--closing	Amarelo (#eab308)	Fase de finalizacao, homologacao e entrega

A barra exibe visualmente a duracao da fase, posicionada no grid de acordo com os meses de inicio e fim. O campo progresso (0–100) pode ser exibido como texto dentro da barra:

<div class="gantt-chart__bar gantt-chart__bar--execution"
     style="grid-column: 4 / 7;">
  <span class="gantt-chart__bar-label">Execucao — 65%</span>
</div>

Grid de Meses

O grafico utiliza um grid CSS de 12 colunas iguais, uma para cada mes do ano.

As barras sao posicionadas usando grid-column com base nos valores de inicio e fim do JSON. O cabecalho possui duas linhas: a primeira agrupa trimestres (Q1 a Q4, cada um com colspan="3"), a segunda lista os 12 meses individualmente.

.gantt-chart__row-bars {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
}

A linha .gantt-chart__today-line e posicionada automaticamente via JavaScript com base no mes atual, usando left percentual calculado como (mesAtual / 12) * 100%.

Propriedades

Classes CSS disponiveis para configurar o Gantt Chart.

Propriedade	Tipo	Default	Descrição
.gantt-chart	classe	—	Container principal do grafico de Gantt (width 100%).
.gantt-chart__title	classe	—	Titulo do grafico (18px w600, font-heading).
.gantt-chart__scroll-wrapper	classe	—	Wrapper com overflow-x auto para scroll horizontal.
.gantt-chart__header	classe	—	Linha de cabecalho com trimestres e meses.
.gantt-chart__header-quarter	classe	—	Celula de trimestre (Q1–Q4) agrupando 3 meses com colspan.
.gantt-chart__header-month	classe	—	Celula individual de mes (Jan–Dez), texto 12px uppercase.
.gantt-chart__body	classe	—	Container do corpo com as linhas de projetos/fases.
.gantt-chart__row	classe	—	Linha individual de projeto com label e area de barras.
.gantt-chart__row-label	classe	—	Nome do projeto/fase na primeira coluna (sticky left).
.gantt-chart__row-bars	classe	—	Area de grid com 12 colunas para posicionar as barras.
.gantt-chart__bar	classe	—	Barra horizontal representando duracao de uma fase.
.gantt-chart__bar--planning	classe	—	Modificador de fase planejamento (azul).
.gantt-chart__bar--execution	classe	—	Modificador de fase execucao (verde).
.gantt-chart__bar--closing	classe	—	Modificador de fase encerramento (amarelo).
.gantt-chart__bar-label	classe	—	Texto dentro da barra com nome da fase e progresso.
.gantt-chart__today-line	classe	—	Linha vertical vermelha indicando a data atual.
.gantt-chart__legend	classe	—	Legenda com indicadores de cor para cada fase.
.gantt-chart__empty	classe	—	Estado vazio com borda dashed e texto centralizado.

Codigo

Snippets prontos para copiar e usar no seu projeto.

HTML estatico

<div class="gantt-chart">
  <h3 class="gantt-chart__title">Cronograma de Projetos — 2026</h3>
  <div class="gantt-chart__scroll-wrapper">
    <div class="gantt-chart__header">
      <div class="gantt-chart__row-label"></div>
      <div class="gantt-chart__header-quarter" style="grid-column: 1 / 4;">Q1</div>
      <div class="gantt-chart__header-quarter" style="grid-column: 4 / 7;">Q2</div>
      <div class="gantt-chart__header-quarter" style="grid-column: 7 / 10;">Q3</div>
      <div class="gantt-chart__header-quarter" style="grid-column: 10 / 13;">Q4</div>
    </div>
    <div class="gantt-chart__header">
      <div class="gantt-chart__row-label"></div>
      <div class="gantt-chart__header-month">Jan</div>
      <div class="gantt-chart__header-month">Fev</div>
      <div class="gantt-chart__header-month">Mar</div>
      <div class="gantt-chart__header-month">Abr</div>
      <div class="gantt-chart__header-month">Mai</div>
      <div class="gantt-chart__header-month">Jun</div>
      <div class="gantt-chart__header-month">Jul</div>
      <div class="gantt-chart__header-month">Ago</div>
      <div class="gantt-chart__header-month">Set</div>
      <div class="gantt-chart__header-month">Out</div>
      <div class="gantt-chart__header-month">Nov</div>
      <div class="gantt-chart__header-month">Dez</div>
    </div>
    <div class="gantt-chart__body">
      <div class="gantt-chart__row">
        <div class="gantt-chart__row-label">Redesign Portal</div>
        <div class="gantt-chart__row-bars">
          <div class="gantt-chart__bar gantt-chart__bar--planning" style="grid-column: 1 / 4;">
            <span class="gantt-chart__bar-label">Planejamento — 100%</span>
          </div>
          <div class="gantt-chart__bar gantt-chart__bar--execution" style="grid-column: 4 / 9;">
            <span class="gantt-chart__bar-label">Execucao — 65%</span>
          </div>
          <div class="gantt-chart__bar gantt-chart__bar--closing" style="grid-column: 9 / 11;">
            <span class="gantt-chart__bar-label">Encerramento — 0%</span>
          </div>
        </div>
      </div>
      <div class="gantt-chart__row">
        <div class="gantt-chart__row-label">App Mobile</div>
        <div class="gantt-chart__row-bars">
          <div class="gantt-chart__bar gantt-chart__bar--planning" style="grid-column: 2 / 5;">
            <span class="gantt-chart__bar-label">Planejamento — 100%</span>
          </div>
          <div class="gantt-chart__bar gantt-chart__bar--execution" style="grid-column: 5 / 10;">
            <span class="gantt-chart__bar-label">Execucao — 40%</span>
          </div>
          <div class="gantt-chart__bar gantt-chart__bar--closing" style="grid-column: 10 / 12;">
            <span class="gantt-chart__bar-label">Encerramento — 0%</span>
          </div>
        </div>
      </div>
      <div class="gantt-chart__today-line" style="left: 20.8%;"></div>
    </div>
  </div>
  <div class="gantt-chart__legend">
    <span class="gantt-chart__legend-item gantt-chart__bar--planning">Planejamento</span>
    <span class="gantt-chart__legend-item gantt-chart__bar--execution">Execucao</span>
    <span class="gantt-chart__legend-item gantt-chart__bar--closing">Encerramento</span>
  </div>
</div>

DataLoader + Factory

<div id="gantt-json"></div>

<script type="module">
  import { DataLoader } from '../core/data-loader.js';
  import { renderGanttChart } from '../components/gantt-chart.js';

  const data = await DataLoader.load({
    endpoint: '/data/gantt/projetos-2026.json'
  });

  renderGanttChart(
    document.getElementById('gantt-json'),
    data,
    { rowLabel: 'projeto', phaseField: 'fase', startField: 'inicio', endField: 'fim' },
    { title: 'Cronograma de Projetos — 2026', legend: true, todayLine: true }
  );
</script>

Auto-init via data attributes

<div data-arenito="gantt-chart"
     data-endpoint="/data/gantt/projetos-2026.json"
     data-format="json"
     data-title="Cronograma de Projetos — 2026"
     data-mapping='{"rowLabel":"projeto","phaseField":"fase","startField":"inicio","endField":"fim"}'
     data-legend="true"
     data-today-line="true">
</div>

Estado vazio

<div class="gantt-chart">
  <h3 class="gantt-chart__title">Cronograma de Projetos</h3>
  <div class="gantt-chart__empty">Nenhum projeto encontrado para o periodo selecionado.</div>
</div>

Fonte de Dados

O Gantt Chart aceita dados em formato JSON. Cada entrada representa uma fase de um projeto com mes de inicio, mes de fim e progresso.

O DataLoader carrega o JSON e o factory renderGanttChart() agrupa as fases por projeto para montar as linhas do grafico.

Exemplo de JSON compativel:

[
  { "projeto": "Redesign Portal", "fase": "planning", "inicio": 1, "fim": 3, "progresso": 100, "responsavel": "Joao" },
  { "projeto": "Redesign Portal", "fase": "execution", "inicio": 4, "fim": 8, "progresso": 65, "responsavel": "Maria" },
  { "projeto": "Redesign Portal", "fase": "closing", "inicio": 9, "fim": 10, "progresso": 0, "responsavel": "Joao" },
  { "projeto": "App Mobile", "fase": "planning", "inicio": 2, "fim": 4, "progresso": 100, "responsavel": "Carlos" },
  { "projeto": "App Mobile", "fase": "execution", "inicio": 5, "fim": 9, "progresso": 40, "responsavel": "Ana" },
  { "projeto": "App Mobile", "fase": "closing", "inicio": 10, "fim": 11, "progresso": 0, "responsavel": "Carlos" }
]

Campo	Tipo	Descricao
projeto	string	Nome do projeto (agrupa as fases na mesma linha)
fase	string	Tipo da fase: planning, execution ou closing
inicio	number	Mes de inicio (1 = Janeiro, 12 = Dezembro)
fim	number	Mes de fim (inclusive)
progresso	number	Percentual de conclusao (0–100)
responsavel	string	Nome do responsavel pela fase (opcional, exibido em tooltip)

Os valores de inicio e fim sao mapeados para grid-column no CSS. O valor de fim recebe +1 para inclusao correta da coluna final (ex: inicio: 1, fim: 3 gera grid-column: 1 / 4).

Dark Mode

O Gantt Chart adapta automaticamente suas cores para o dark mode via classe .dark no body.

No dark mode, as cores das barras de fase sao substituidas por versoes com opacidade reduzida usando rgba(). Isso evita que cores vibrantes dominem a interface em fundo escuro e mantem o contraste legivel.

Fase	Light	Dark
Planning	#3b82f6 (azul solido)	rgba(59, 130, 246, 0.35)
Execution	#22c55e (verde solido)	rgba(34, 197, 94, 0.35)
Closing	#eab308 (amarelo solido)	rgba(234, 179, 8, 0.35)
Today line	#ef4444 (vermelho)	rgba(239, 68, 68, 0.6)

Os elementos .gantt-chart__header-quarter, .gantt-chart__header-month e .gantt-chart__row-label herdam automaticamente os tokens semanticos de superficie e nao precisam de ajuste manual. A borda entre colunas do grid utiliza var(--border-color) que se adapta ao tema.

Versão0.2.0

Última atualização14 mar 2026

Caminhosrc/components/gantt-chart.css