Timeline (range bars) ​

Bars from a start to an end: a series with start and end columns, base: 'start', horizontal.

ts
import {
  d3pAutoInteractionArea, D3PAxis, D3PAxisDomain, D3PBarRenderer, D3PChart, d3pDomTooltip, D3PSeries,
  D3PTooltip, getGlobalBus,
} from 'd3pict'

const bus = getGlobalBus()

const container = document.getElementById('app')! // any element with a size: the chart fills it

const tasks: [string, number, number][] = [['Design', 0, 8], ['Backend', 5, 20], ['Frontend', 9, 24], ['Testing', 18, 28], ['Launch', 27, 30]]
// a bar from `start` to `end`: the primary value is the end, the base is the start
const plan = new D3PSeries({ bus, name: 'plan', columns: ['x', 'start', 'end'], primary: 'end', data: tasks })

const dday = new D3PAxisDomain({ bus, domain: [0, 30] })
const dtask = new D3PAxisDomain({ bus, domain: tasks.map((t) => t[0]).reverse() })
const day = new D3PAxis({ bus, name: 'day', domain: dday, props: { grid: { enabled: true } } })
const task = new D3PAxis({ bus, name: 'task', domain: dtask, position: 'left', scaleType: 'band' })
const bars = new D3PBarRenderer({ bus, series: plan, props: { orientation: 'horizontal', base: 'start', style: { color: '#f28e2b' } } })

const tooltip = new D3PTooltip({ bus })
const objects = [day, task, bars, tooltip]
const margin = { left: 90 }

const chart = new D3PChart({ container, bus, margin })
const stopArea = d3pAutoInteractionArea(chart) // before the objects: the cursor, the tooltip and the tools ask for an interaction area
objects.forEach((o) => o.addToChart(chart))
const stopTooltip = d3pDomTooltip(tooltip)

All the chart types · how each type is built