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.

Was this page helpful?

Thank you for your feedback!

Voting requires cookies or local storage. What we store