Skip to main content
WireKit
Copy for LLM

Range Bar

Range bars render each data point as a bar spanning a [from, to] pair instead of a single value. The canonical use case is project-schedule visualization — every task has a start and end date, every employee has an attendance window.

Note: range-bar is an ApexCharts-specific chart type. Chart.js does not have a native equivalent; switching the active library throws TypeNotSupportedException.

When to use

When every data point has a meaningful [start, end] envelope. For single-value comparisons reach for bar charts; for Gantt-with-task-relationships consider timeline charts (similar API, different default styling).

Basic Example — Sprint schedule

Two-week sprint task schedule 
<x-wirekit-chart
    library="apexcharts"
    type="range-bar"
    :labels="['Spec', 'Implement', 'Review', 'QA', 'Deploy']"
    :datasets="[[
        'label' => 'Sprint 14',
        'data' => [
            ['x' => 'Spec',      'y' => [1711929600000, 1712102400000]],
            ['x' => 'Implement', 'y' => [1712102400000, 1712620800000]],
            ['x' => 'Review',    'y' => [1712620800000, 1712793600000]],
            ['x' => 'QA',        'y' => [1712793600000, 1712966400000]],
            ['x' => 'Deploy',    'y' => [1712966400000, 1713052800000]],
        ],
    ]]"
    :options="['xaxis' => ['type' => 'datetime', 'labels' => ['datetimeUTC' => false, 'format' => 'MMM dd']], 'plotOptions' => ['bar' => ['horizontal' => true]], 'tooltip' => ['x' => ['format' => 'MMM dd, yyyy']]]"
    aria-label="Two-week sprint task schedule"
/>

Multi-team — Working hours overlap

Working hours by team across timezones 
<x-wirekit-chart
    library="apexcharts"
    type="range-bar"
    :labels="['EU Team', 'NA Team', 'APAC Team']"
    :datasets="[[
        'label' => 'Active hours (UTC)',
        'data' => [
            ['x' => 'EU Team',   'y' => [9, 18]],
            ['x' => 'NA Team',   'y' => [14, 23]],
            ['x' => 'APAC Team', 'y' => [1, 10]],
        ],
    ]]"
    height="240px"
/>

Real-world recipe — Eloquent task schedule

@php
    $tasks = \App\Models\Task::query()
        ->where('sprint_id', $sprint->id)
        ->orderBy('start_at')
        ->get(['title', 'start_at', 'end_at']);

    $taskData = $tasks->map(fn ($t) => [
        'x' => $t->title,
        'y' => [$t->start_at->timestamp * 1000, $t->end_at->timestamp * 1000],
    ])->all();
@endphp

<x-wirekit-chart
    type="range-bar"
    :labels="$tasks->pluck('title')->all()"
    :datasets="[['label' => $sprint->name, 'data' => $taskData]]"
    :options="['xaxis' => ['type' => 'datetime', 'labels' => ['datetimeUTC' => false, 'format' => 'MMM dd']], 'plotOptions' => ['bar' => ['horizontal' => true]], 'tooltip' => ['x' => ['format' => 'MMM dd, yyyy']]]"
    height="360px"
/>

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

Design Tokens

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