Ripl

Appearance

Gantt Chart ​

The Gantt Chart displays tasks as horizontal bars along a time axis, with task names on the y-axis. Each bar can show a progress overlay, and a configurable "today" marker highlights the current date. It supports animated transitions when tasks are added, removed, or rescheduled, plus tooltips and grid lines.

NOTE

For the full API, see the Charts API Reference.

Example ​

Usage ​

ts
import {
    createGanttChart,
} from '@ripl/charts';

const chart = createGanttChart('#container', {
    data: [...],
    key: 'id',
    label: 'name',
    start: 'start',
    end: 'end',
    progress: 'progress',  // optional, 0–1
    showToday: true,
});

// Update data
chart.update({ data: newData });

Options ​

  • data — The data array (one item per task)
  • key — Unique key accessor per task
  • label — Label accessor for y-axis task names
  • start — Start date accessor
  • end — End date accessor
  • color — Optional color accessor per task
  • progress — Optional progress accessor (0–1)
  • grid — boolean | ChartGridOptions — Show/configure grid lines
  • tooltip — boolean | ChartTooltipOptions — Show/configure tooltips
  • axis — boolean | ChartAxisOptions — Configure axes
  • showToday — Show a vertical "today" marker line (default true)
  • todayColor — Color for the today marker (default #ef4444)
  • borderRadius — Bar corner radius (default 3)
  • padding — Chart padding