TimelineChart

Live preview

Loading example…

Gantt-style time ranges: one row per resource, one bar per item. Bars that overlap inside a row are stacked into lanes, so nothing is hidden. Colors come from groups (statuses), and an optional marker shows the current time.

Import

import { TimelineChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/timeline-chart.

Usage

<TimelineChart
  title="Agenda de hoy por barbero"
  rows={rows}
  items={citas}
  groups={groups}
  laneHeight={28}
  grid
  tooltip
  loading={false}
  animate
  texts={spanishTexts}
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`rows` *	`readonly TimelineRow[]`
`items` *	`readonly TimelineItem[]`
`groups`	`readonly TimelineGroup[]`	`[]`
`title` *	`string`		Accessible name of the chart.
`description`	`string`
`domain`	`readonly [number \| Date, number \| Date]`		Visible time window; by default the items rounded out to whole hours.
`now`	`number \| false \| Date \| "auto"`	`false`	A “now” marker. “auto” uses the current time; false hides it.
`height`	`"fill"`		By default the height follows the lanes. `"fill"` stretches the lanes to the height of the parent; `aspectRatio` does the same from the width.
`aspectRatio`	`number`		Width / height ratio; stretches the lanes to fit it.
`laneHeight`	`number`	`28`	Height of one lane (a bar) in pixels, 28 by default (the minimum when stretching is 14).
`grid`	`boolean`	`true`
`legend`	`boolean`
`tooltip`	`boolean`	`true`
`loading`	`boolean`
`animate`	`boolean`	`true`
`initialHidden`	`readonly string[]`
`texts`	`Partial<TimelineTexts>`
`labels`	`Partial<ChartLabels>`
`className`	`string`

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/timeline-chart/timeline-chart.tsx