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.

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!

What was missing? (optional)

Voting requires cookies or local storage. What we store