`<bmx-pert-chart>`

The plan as a network: a box for each piece of work, arrows for the order it has to happen in, and on every box the dates the critical-path method gives it - earliest and latest start and finish, and the float between them.

13 properties · 1 events · 6 methods · 10 parts

Example

Each box carries its critical-path arithmetic: earliest start, length and earliest finish across the top; latest start, float and latest finish across the bottom. The chart reads the same tasks and links as bmx-gantt and bmx-task-board, so the three can show one plan side by side.

Read in order, not by lines. Each box says what it follows and what it leads to. Tab in once; → goes to the next piece of work, ← to the one before, ↑ and ↓ along a column. Drag the background to pan, and Ctrl with the wheel to zoom.

Show markup

<bmx-pert-chart
  label="Office move network"
  project-start="2026-03-02"
  tasks='[
    {"id":"p1","name":"Survey the new site","duration":3},
    {"id":"p2","name":"Agree the floor plan","duration":4},
    {"id":"f1","name":"Network cabling","duration":6},
    {"id":"f2","name":"Furniture delivery","duration":2},
    {"id":"f3","name":"Meeting rooms AV","duration":5},
    {"id":"m1","name":"Move day","duration":1}
  ]'
  links='[
    {"from":"p1","to":"p2"},{"from":"p2","to":"f1"},{"from":"p2","to":"f2"},
    {"from":"f1","to":"f3","type":"SS","lag":2},{"from":"f3","to":"m1"},{"from":"f2","to":"m1"}
  ]'
></bmx-pert-chart>

<div class="row" style="margin-block-start: 1rem">
  <span class="note">
    <strong>Each box carries its critical-path arithmetic:</strong> earliest start, length and earliest finish
    across the top; latest start, float and latest finish across the bottom. The chart reads the same
    <code>tasks</code> and <code>links</code> as <code>bmx-gantt</code> and <code>bmx-task-board</code>, so the three
    can show one plan side by side.
  </span>
</div>

<div class="row" style="margin-block-start: 1rem">
  <span class="note">
    <strong>Read in order, not by lines.</strong> Each box says what it follows and what it leads to. Tab in once;
    <kbd>&rarr;</kbd> goes to the next piece of work, <kbd>&larr;</kbd> to the one before, <kbd>&uarr;</kbd> and
    <kbd>&darr;</kbd> along a column. Drag the background to pan, and <kbd>Ctrl</kbd> with the wheel to zoom.
  </span>
</div>

<bmx-pert-chart
  label="Office move"
  project-start="2026-03-02"
  tasks='[{"id":"1","name":"Survey","duration":3},
          {"id":"2","name":"Fit-out","duration":10}]'
  links='[{"from":"1","to":"2"}]'
></bmx-pert-chart>

It reads the same tasks and links as bmx-gantt and bmx-task-board and schedules them with the same arithmetic, so the three can show one plan side by side: assign the same arrays to all three and they agree. A summary task is not a box, because a PERT chart shows work rather than structure; a link drawn to a summary leads to the subtasks it starts with.

READ IN ORDER, NOT BY LINES

The arrows are a picture, so each box says in words what follows it and what it follows. The boxes are a list with one Tab stop: Right goes to the next piece of work, Left to the one before, Up and Down along a column. The canvas pans with a drag and zooms with Ctrl and the wheel, or with the zoomIn, zoomOut and zoomToFit methods.

Properties

Property	Attribute	Type	Default	Description
`columnGap`	`column-gap`	`number`	`64`	Space between columns, in pixels.
`holidays`	`holidays`	`string[] \| string`	`[]`	Dates that are not worked, `YYYY-MM-DD`.
`label`	`label`	`string`	—	What the chart is called. Without one it is announced as "Task network".
`links`	`links`	`BmxTaskLink[] \| string`	`[]`	The links between tasks.
`locale`	`locale`	`string`	—	The locale dates are written in. Defaults to the page's.
`nodeHeight`	`node-height`	`number`	`92`	How tall a box is, in pixels.
`nodeWidth`	`node-width`	`number`	`188`	How wide a box is, in pixels. A layout input; its looks are CSS.
`projectStart`	`project-start`	`string`	—	The first day work can happen, `YYYY-MM-DD`.
`rowGap`	`row-gap`	`number`	`28`	Space between rows, in pixels.
`scale`	`scale`	`number`	`1`	How large the chart is drawn, from 0.25 to 2.
`showCriticalPath`	`show-critical-path`	`boolean`	`true`	Draws the critical path in the critical colour.
`tasks`	`tasks`	`BmxTask[] \| string`	`[]`	The tasks, as a flat list with parent references - the same list `bmx-gantt` takes.
`workingDays`	`working-days`	`number[] \| string`	`[1, 2, 3, 4, 5]`	Days of the week that are worked, 0 for Sunday.

Events

Event	Detail	Description
`bmxSelect`	`BmxPertSelectDetail`	A task was chosen.

Methods

Method	Signature	Description
`exportSvg`	`exportSvg() => Promise<string>`	The network as a standalone SVG document.
`focusTask`	`focusTask(id: string) => Promise<void>`	Scrolls a task's box into view and focuses it.
`getSchedule`	`getSchedule() => Promise<BmxSchedule>`	The plan as scheduled.
`zoomIn`	`zoomIn() => Promise<void>`	Draws the chart larger.
`zoomOut`	`zoomOut() => Promise<void>`	Draws the chart smaller.
`zoomToFit`	`zoomToFit() => Promise<void>`	Scales the chart to fit its box.

Slots

Slot	Description
`empty`	what to draw when there are no tasks.

CSS shadow parts

Part	Description
`canvas`
`empty`
`network`
`node-early`
`node-late`
`node-name`
`node-title`
`node-wbs`
`viewport`
`wires`

CSS custom properties

Property	Description
`--bmx-pert-band-color`	The date rows at the top and bottom of a box.
`--bmx-pert-critical-color`	A critical box's border and a critical arrow.
`--bmx-pert-height`	How tall the chart's scrolling area is.
`--bmx-pert-node-background`	A box's fill.
`--bmx-pert-node-border`	Its border.
`--bmx-pert-node-color`	Its text.
`--bmx-pert-node-height`	How tall a box is. From `node-height`.
`--bmx-pert-node-radius`	Its corners.
`--bmx-pert-node-width`	How wide a box is. Written by the component from `node-width`.
`--bmx-pert-wire-color`	The arrows.
`--bmx-pert-wire-width`	How thick they are. @part viewport - the scrolling area. @part canvas - the drawing, scaled by `scale`. @part wires - the SVG layer of arrows. @part wire - one arrow. Also `wire-critical`. @part network - the `role="list"` that holds the boxes. @part node - one box. Also `node-critical`, `node-milestone`, `node-selected` and `node-<category>`. @part node-early - the top row: earliest start, length, earliest finish. @part node-title - the outline number and name. @part node-wbs - the outline number. @part node-name - the name. @part node-late - the bottom row: latest start, float, latest finish. @part empty - what is drawn when there are no tasks.