# TimelineChart

> Gantt-style time ranges: one row per resource, one bar per item.

Source: https://ui.jcsoftdev.com/docs/components/timeline-chart

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

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

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

## Usage

```tsx
<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

- [Default](/storybook/?path=/story/charts-timelinechart--default)
- [Without Now Marker](/storybook/?path=/story/charts-timelinechart--without-now-marker)
- [Fixed Business Hours](/storybook/?path=/story/charts-timelinechart--fixed-business-hours)
- [Compact](/storybook/?path=/story/charts-timelinechart--compact)
- [Now = current time](/storybook/?path=/story/charts-timelinechart--live-now)
- [Loading](/storybook/?path=/story/charts-timelinechart--loading)
- [Empty](/storybook/?path=/story/charts-timelinechart--empty)
- [Narrow](/storybook/?path=/story/charts-timelinechart--narrow)
- [Fill Parent](/storybook/?path=/story/charts-timelinechart--fill-parent)

## Source

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