Skip to main content
WireKit
Copy for LLM

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

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

<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 and apexcharts.com/license for the full terms.

See Also

  • Range Bar for non-timeline range visualizations
  • Annotations for marking events on a regular line/bar chart

Design Tokens

See ApexCharts adapter — Design Tokens for the color, typography, and grid tokens shared across every ApexCharts demo.