Ripl

Appearance

Gantt Chart ​

The Gantt Chart places each task as a bar between its start and end on a time axis, with task names down the y-axis. It is the schedule view when duration and overlap are the story: project plans, release trains, resource bookings. progress draws a completion overlay inside each bar, dependencies connects finish-to-start pairs with curved connectors, showToday and todayColor mark the current date, and colorBy groups the bars. Tasks animate when they are added, removed or rescheduled, and tooltips and grid lines are built in. Point it at a Canvas, SVG or terminal context and nothing else changes.

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 });

Data Format ​

Each item is one task, with a key, a label, and Date values for its start and end. progress is optional and drawn as an overlay on the bar:

ts
const data = [
    {
        id: 'design',
        name: 'Design',
        start: new Date('2024-01-08'),
        end: new Date('2024-01-19'),
        progress: 1,
    },
    {
        id: 'build',
        name: 'Build',
        start: new Date('2024-01-22'),
        end: new Date('2024-02-16'),
        progress: 0.4,
        dependsOn: ['design'],
    },
];

dependencies returns the keys of the tasks a task waits on, and draws a finish-to-start connector from each one.

Options ​

A full configuration for this chart. The options every chart shares — padding, title, animation, theme and the rest — behave the same everywhere and are documented on Shared Options.

ts
createGanttChart('#container', {
    data,
    key: 'id',
    label: 'name',
    start: 'start',
    end: 'end',
    colorBy: 'team',
    // Completion ratio (0–1), drawn as an overlay on each bar.
    progress: 'progress',
    // Ids of the tasks this one depends on, drawn as connectors.
    dependencies: 'dependsOn',
    borderRadius: 4,
    showToday: true,
    todayColor: '#f4a0b9',
    grid: true,
    tooltip: true,
    axis: { x: { title: 'Timeline' } },
    format: 'percentage',
});

Events ​

Subscribe with chart.on(...). A handler receives an Event object, not the payload directly — the payload is on event.data, and carries the interacted datum plus its { x, y } anchor in chart pixels. event.target and event.stopPropagation() are also available.

ts
// Emitted when a task bar is clicked.
chart.on('taskclick', event => console.log(event.data)); // event.data: GanttChartTaskEvent
// Emitted when the pointer enters a task bar.
chart.on('taskenter', event => console.log(event.data)); // event.data: GanttChartTaskEvent
// Emitted when the pointer leaves a task bar.
chart.on('taskleave', event => console.log(event.data)); // event.data: GanttChartTaskEvent