Read-only Mode
Set readOnly: true at construction to render a chart the user cannot drag:
import { createGantt } from '@fluxgantt/core';
import { withRender } from '@fluxgantt/core/render';
import { withInteraction } from '@fluxgantt/core/interaction';
const gantt = withInteraction(
withRender(
createGantt({
readOnly: true,
tasks: [/* … */],
dependencies: [/* … */],
}),
),
);
gantt.mount(document.getElementById('gantt')!);What it changes
mount()does not wire the drag gestures. Move, resize, and create-dependency are all inert — dragging a bar does nothing. (ComposingwithInteractionat all is optional; in read-only mode it still wires click-select and keyboard navigation, which stay available.)- Link handles are not rendered. They are an interactive affordance whose recognizer isn't wired in read-only mode, so showing them would be a misleading dead control.
What it does not change
The edit hooks (task:activated, task:context-requested) still fire in a
read-only chart, since opening a detail card is not editing. Decide in your handler what to offer.
readOnly governs the rendered UI's interactivity only. The full programmatic API still
works — a host app can keep pushing updates into a read-only view (e.g. from a live server
subscription):
const gantt = withInteraction(withRender(createGantt({ readOnly: true, tasks: [/* … */] })));
gantt.mount(el);
// still works — readOnly does not lock the API:
gantt.addTask({ id: toTaskId('qa'), name: 'QA', start: '2026-08-12', end: '2026-08-13', progress: 0, type: 'task' });
gantt.moveTask(toTaskId('qa'), '2026-08-13');This makes readOnly the right choice for dashboards and shared/embedded views where the
viewer should see live changes but not edit the plan by hand.