---
title: Timeline
description: Project-timeline and multi-series schedule visualizations.
visibility: guest
draft: false
related:
  - /components/charts-apex
  - /components/charts-apex/range-bar
---

# Timeline

Timeline charts visualize events along a date axis — release timelines, employee tenure, project schedules. The underlying ApexCharts type is `range-bar` with `plotOptions.bar.horizontal = true`; this demo page focuses on the timeline-style use cases that share the same API.

## Basic Example — Release timeline

:::preview{title="Product release timeline"}
<x-wirekit-chart
    library="apexcharts"
    type="range-bar"
    :labels="['v1.0', 'v1.1', 'v1.2', 'v2.0', 'v2.1']"
    :datasets="[[
        'label' => 'Releases',
        'data' => [
            ['x' => 'v1.0', 'y' => [1709251200000, 1711929600000]],
            ['x' => 'v1.1', 'y' => [1711929600000, 1714521600000]],
            ['x' => 'v1.2', 'y' => [1714521600000, 1717200000000]],
            ['x' => 'v2.0', 'y' => [1717200000000, 1722556800000]],
            ['x' => 'v2.1', 'y' => [1722556800000, 1725235200000]],
        ],
    ]]"
    :options="['xaxis' => ['type' => 'datetime', 'labels' => ['datetimeUTC' => false, 'format' => 'MMM dd']], 'plotOptions' => ['bar' => ['horizontal' => true]], 'tooltip' => ['x' => ['format' => 'MMM dd, yyyy']]]"
    aria-label="Product release timeline"
/>
:::

## Multi-team — Project schedule

```blade
<x-wirekit-chart
    type="range-bar"
    :labels="['Spec', 'Build', 'QA', 'Deploy']"
    :datasets="[[
        'label' => 'Sprint 14',
        'data' => [
            ['x' => 'Spec',    'y' => [1711929600000, 1712188800000], 'fillColor' => 'var(--color-wk-accent)'],
            ['x' => 'Build',   'y' => [1712188800000, 1712707200000], 'fillColor' => 'var(--color-wk-accent)'],
            ['x' => 'QA',      'y' => [1712707200000, 1712880000000], 'fillColor' => 'var(--color-wk-warning)'],
            ['x' => 'Deploy',  'y' => [1712880000000, 1712966400000], 'fillColor' => 'var(--color-wk-success)'],
        ],
    ]]"
    :options="['xaxis' => ['type' => 'datetime', 'labels' => ['datetimeUTC' => false, 'format' => 'MMM dd']], 'plotOptions' => ['bar' => ['horizontal' => true]]]"
/>
```

Per-data-point `fillColor` overrides the dataset palette — useful when each timeline phase carries a semantic color.

## License note

ApexCharts is non-MIT — see [the License section on the Chart overview page](/components/chart#license-apexcharts-only) and [apexcharts.com/license](https://apexcharts.com/license/) for the full terms.

## See Also

- [Range Bar](./range-bar.md) for non-timeline range visualizations
- [Annotations](./annotations.md) for marking events on a regular line/bar chart

## Design Tokens

See [ApexCharts adapter — Design Tokens](/components/charts-apex#design-tokens) for the color, typography, and grid tokens shared across every ApexCharts demo.