Gantt

Creates a Gantt chart from an array of tasks: one labeled row per task, its bar running from start to end over a time axis. Tasks can be grouped into phases (group), drawn as milestones (milestone), linked by dependency arrows (dependencies), and filled by their progress, with an optional today line.

Basic example

Each task gets its own row, labeled in the column on the left, with a bar from its start to its end on the time axis along the top. A task that starts and ends on the same day is a milestone, drawn as a diamond.

start

Accessor function or string key for the start date of each data point. A key also aggregates grouped rows by their earliest start.

end

Accessor function or string key for the end date of each data point. A key also aggregates grouped rows by their latest end.

taskSort

The order of the tasks: "data" (default) keeps the data's order, "start" sorts them by start, and a function compares two data rows. Groups follow their first task.

datastart

labelWidth

The most the task label column on the left may take: a share of the chart's width when 1 or below (0.3 by default), else pixels. The column fits the widest label up to it, wrapping or truncating longer ones; 0 hides it.

Dependencies

Each task’s dependencies lists the ids of the tasks it waits on. An arrow leaves each predecessor’s end and turns into the dependent’s start; when the dependent starts before there is room to turn, the arrow doubles back between the rows. Arrows take the chart’s text color at reduced opacity, and stay lit when either end is hovered.

dependencies

Accessor function or string key for each task's predecessors: the ids (by groupBy) of the tasks it waits on, as an array or a comma-separated string. Each draws an arrow from the predecessor's end to this task's start.

Progress

A task’s progress (a fraction such as 0.6, or a percent string such as "60%") fills that share of its bar in the task’s color, and leaves the rest in a paler shade. A milestone not yet reached draws pale and outlined. today marks a date with a labeled line; today: true marks the current time.

progress

Accessor function or string key for each task's progress: a fraction from 0 to 1 (0.6), or a percent string ("60%"). The done part of the bar fills in the task's color and the rest in a paler shade; the tooltip lists it. A milestone below 100% draws pale and outlined. A key also averages grouped rows' progress.

today

Draws a "today" line across the rows: true at the current time, or a date (or anything the axis parses) to mark that time. Off (false) by default. It only draws inside the time axis.

"2024-04-10"

Phases

group gathers tasks under a header row for each phase, with a bracket spanning its tasks; the tasks indent beneath it. Groups appear in the order of their first task, so taskSort: "start" orders both.

group

Accessor function or string key for each task's group (such as its project phase). Grouped tasks sit under a header row that names the group, with a bracket spanning its tasks.

taskSort

The order of the tasks: "data" (default) keeps the data's order, "start" sorts them by start, and a function compares two data rows. Groups follow their first task.

datastart

Drilling into phases

With two groupBy levels, the chart starts with one bar per phase, spanning its earliest start to its latest end with its tasks’ average progress. Clicking a phase drills into its tasks, and Back steps out.

groupBy

Defines the mapping between data and shape. The value can be a String matching a key in each data point (default is "id"), or an accessor Function that returns a unique value for each data point. Additionally, an Array of these values may be provided if the visualization supports nested hierarchies.

["phase", "task"]

Working days

axisConfig.rangeBreaks hides time on the axis: "weekends" closes up Saturdays and Sundays, so bars show working days.

const schedule = [
  {
    task: "Kickoff",
    phase: "Discovery",
    start: "2024-03-04",
    end: "2024-03-04",
    progress: 1,
  },
  {
    task: "Stakeholder interviews",
    phase: "Discovery",
    start: "2024-03-04",
    end: "2024-03-13",
    progress: 1,
    dependencies: ["Kickoff"],
  },
  {
    task: "Requirements",
    phase: "Discovery",
    start: "2024-03-11",
    end: "2024-03-22",
    progress: 1,
    dependencies: ["Stakeholder interviews"],
  },
  {
    task: "Sign-off",
    phase: "Discovery",
    start: "2024-03-22",
    end: "2024-03-22",
    progress: 1,
    dependencies: ["Requirements"],
  },
  {
    task: "Wireframes",
    phase: "Design",
    start: "2024-03-25",
    end: "2024-04-05",
    progress: 0.8,
    dependencies: ["Sign-off"],
  },
  {
    task: "Visual design",
    phase: "Design",
    start: "2024-04-01",
    end: "2024-04-19",
    progress: 0.4,
    dependencies: ["Wireframes"],
  },
  {
    task: "Design review",
    phase: "Design",
    start: "2024-04-19",
    end: "2024-04-19",
    progress: 0,
    dependencies: ["Visual design"],
  },
  {
    task: "API",
    phase: "Build",
    start: "2024-03-25",
    end: "2024-04-26",
    progress: 0.5,
    dependencies: ["Sign-off"],
  },
  {
    task: "Front end",
    phase: "Build",
    start: "2024-04-15",
    end: "2024-05-10",
    progress: 0.1,
    dependencies: ["Wireframes", "API"],
  },
  {
    task: "Testing",
    phase: "Launch",
    start: "2024-05-06",
    end: "2024-05-17",
    progress: 0,
    dependencies: ["Front end"],
  },
  {
    task: "Go live",
    phase: "Launch",
    start: "2024-05-20",
    end: "2024-05-20",
    dependencies: ["Testing"],
  },
];

const config = {
  data: schedule.slice(0, 7),
  groupBy: "task",
  axisConfig: {rangeBreaks: "weekends"},
};

Configuration

import {Gantt} from "@d3plus/core";

Extends Viz.

Filter 42 config keys

activefalse | function

The active callback function for highlighting shapes.

axisConfigobjectDefault {scale: "time"}

The time axis along the top of the rows (orient: "bottom" moves it under them). It reads dates by default (scale: "time"); a rangeBreaks setting such as "weekends" hides those times.

classNamestring | array.<string> | undefined

CSS classes added to the outermost element this chart or component draws into, next to its fixed d3plus classes, so page CSS can target it: a chart's root <svg class="d3plus-viz"> (its <canvas> with the Canvas renderer) and a standalone component's <svg>. Takes a space-separated string or an array. A new value replaces the classes the previous one added; unset adds none. Tooltips take their own tooltipConfig.className.

colorDefaultscolordefaultsconfig

Overrides the default colors used when assigning fills from data and choosing legible text colors: dark and light (the text colors picked for contrast against a background), missing (null/undefined values), on/off (true/false values), sequential (the anchor hue for magnitude ramps), and scale (the categorical palette, given as a d3 ordinal scale or an array of colors). Keys are merged into the current defaults, and a Viz passes its overrides down to the shapes and components it draws.

configd3plusconfig

Methods that correspond to the key/value pairs and returns this class.

datastring | array.<datapoint> | object

The primary data array used to draw the visualization. The value passed should be an Array of objects or a String representing a filepath or URL to be loaded. The following filetypes are supported: csv, tsv, txt, and json.

If your data URL needs specific headers to be set, an Object with a "url" and "headers" (or any other fetch request option) may also be passed. An Object with any other key is a data row, not a request.

Additionally, a custom formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final array of obejcts to be used as the primary data array. For example, some JSON APIs return the headers split from the data values to save bandwidth. These would need be joined using a custom formatter.

If you would like to specify certain configuration options based on the yet-to-be-loaded data, you can also return a full config object from the data formatter (including the new data array as a key in the object).

To re-fetch a URL on an interval and redraw when its data changes, set dataPollingInterval; each poll runs the same formatter.

Defaults to an empty array ([]).

dependenciesstring | function | falseDefault "dependencies"

dependencyConfig{stroke, strokeWidth, strokeOpacity, arrowSize}Default {}

Styles the dependency arrows: stroke (the chart's text color by default), strokeWidth (1), strokeOpacity (0.55), and arrowSize (6, in pixels).

endstring | functionDefault "end"

Accessor function or string key for the end date of each data point. A key also aggregates grouped rows by their latest end.

Splits the chart into small multiples: a grid of equally sized panels, one per distinct value of this data key or accessor, each drawing the chart for that value's rows. The panels share one legend, color scale, title, and timeline, color each series the same way, and hover, tooltips, and legend clicks apply across all of them. Pass false to draw a single chart. See facetConfig for the grid's layout and shared scales.

facetConfigfacetconfig

Configuration for small multiples (see facet), merged into the current config: - columns / rows: the grid's shape. Chosen by default to make the panels as large as the chart's shape allows. - padding: the space between panels, in pixels (default 20). - sort: panel order — "ascending" (default), "descending", "data" (first appearance), a comparator over facet values, or an Array of values. - scales: "shared" (default) gives every panel of a chart with axes the same x/y domains; "independent" fits each panel to its own rows. Funnel defaults to "independent" (each panel sized to its own widest stage); "shared" sizes every panel against the widest stage across all panels. PolarArea and RadialBar default to "independent" (each panel's rings and ticks fit its own values); "shared" gives every panel the same value domain. - axes: with shared scales, "outer" (default) labels the axes only along the grid's left and bottom edges; "all" labels every panel. An object sets each axis on its own, as in {x: "all", y: "outer"}: every panel labels its x axis, only the left column labels its y axis, and the panels' plot areas line up. BumpChart defaults to "all", and Marimekko labels its categories on every panel and its 0–100% share axis only along the outer edge, even with independent scales. - title: a (value, data) => string function for each panel's title, or false to hide panel titles. - titleConfig: TextBox config for the panel titles (fontSize, fontWeight, fontColor, textAnchor, padding, …).

fontFamilystring | array.<string>

The font family used throughout the visualization.

groupstring | function | falseDefault false

Accessor function or string key for each task's group (such as its project phase). Grouped tasks sit under a header row that names the group, with a bracket spanning its tasks.

groupBystring | function | array.<string | function>

highlightfalse | function

Persistently emphasizes the data points matching the given predicate: the matching marks keep their color while every other mark is de-emphasized to a neutral gray (the "emphasis" form — highlight one series, gray the rest). Unlike hover/active (transient, opacity-based), highlight is a standing state that survives pointer movement. Pass false to clear it.

hoverfalse | function

The hover callback function for highlighting shapes on mouseover.

labelWidthnumberDefault 0.3

legendboolean | functionDefault function

Shows a legend only when its entries group the tasks (for example, a color by phase), since every task is labeled in its row.

localestring | object

The locale used for all text and number formatting. Supports the locales defined in d3plus-format. The locale can be a complex Object, a locale code (like "en-US"), or a 2-digit language code (like "en"). If a 2-digit code is provided, the "findLocale" function is used to identify the most approximate locale.

milestonestring | function | falseDefault "milestone"

Accessor function or string key for whether a task is a milestone, drawn as a diamond at its end. Without one, a task that starts and ends at the same time is a milestone.

onstring

Event listener for the specified event typenames. Mirrors the core d3-selection behavior.

paddingInnernumberDefault 0.35

The space between neighboring task bars, as a share of each row (see d3's paddingInner).

paddingOuternumberDefault 0.2

The space above the first row and below the last, as a share of a row (see d3's paddingOuter).

parentunknown

Parent config used by the wrapper.

progressstring | function | falseDefault "progress"

renderfunction

Draws the visualization given the specified configuration.

rendererboolean | "svg" | "canvas"

Selects which @d3plus/render backend paints the visible output. "svg" = SvgRenderer (default), "canvas" = CanvasRenderer. Boolean arguments both normalize to "svg".

selectstring | htmlelement

The SVG container element as a d3 selector or DOM element. Defaults to undefined.

shapeConfigd3plusconfig

Configuration object with key/value pairs applied as method calls on each shape.

startstring | functionDefault "start"

Accessor function or string key for the start date of each data point. A key also aggregates grouped rows by their earliest start.

taskLabelConfig{fontColor, fontFamily, fontSize}Default {}

Styles the task label column: fontColor (the chart's text color by default), fontFamily, and fontSize (12).

taskSort"data" | "start" | functionDefault "data"

The order of the tasks: "data" (default) keeps the data's order, "start" sorts them by start, and a function compares two data rows. Groups follow their first task.

thresholdnumber | function

The threshold value for bucketing small data points together, as a share of the total. On a stacked Plot, the series whose summed value across every position is under that share of the whole chart's total merge into one series, stacked on top. A bucket needs at least two items, and its tooltips list them. Off (0) by default on Plot charts.

thresholdKeystring | function

Accessor for the value used in the threshold algorithm. A stacked Plot defaults to its stacked value.

timestring | false | function

Accessor function or string key for the time dimension of each data point.

timelineDefaultstring | date | array.<string | date>

The starting time or range for the timeline. Can be a single Date/String, or an Array of 2 values representing the min and max.

todayboolean | Date | string | numberDefault false

Draws a "today" line across the rows: true at the current time, or a date (or anything the axis parses) to mark that time. Off (false) by default. It only draws inside the time axis.

todayConfigReferenceLineConfigDefault {}

Styles the "today" line like a referenceLines entry: stroke, strokeWidth (1.5), strokeOpacity (0.85), dash, and its label (the translated "Today"; false for none), with the label's font settings and labelPosition.

tooltipConfigtooltipconfigDefault {tbody: (d: DataPoint, i: number) => ganttTooltipRows(viz, d, i)}

Lists each task's Start, End, Duration, and Progress in the tooltip body.

totalstring | boolean | function

Accessor function or string key for the total value displayed in the visualization.

translatefunction

Defines how informational text strings should be displayed. By default, this function will try to find the string in question (which is the first argument provided to this function) inside of an internally managed translation Object. If you'd like to override to use custom text, simply pass this method your own custom formatting function.

zoombooleanDefault false

Zooming doesn't help read a schedule's rows, so it's off by default.