---
title: Range Bar
description: Date-range and Gantt-style schedule visualizations with paired start/end values.
visibility: guest
draft: false
related:
  - /components/charts-apex
  - /components/charts-apex/timeline
  - /components/charts-apex/bar
---

# 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](./bar.md); for Gantt-with-task-relationships consider [timeline charts](./timeline.md) (similar API, different default styling).

## Basic Example — Sprint schedule

:::preview{title="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

:::preview{title="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

```blade
@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](/components/chart#license-apexcharts-only) and [apexcharts.com/license](https://apexcharts.com/license/) for the full terms.

## See Also

- [Timeline charts](./timeline.md) — similar API with project-timeline-specific styling
- [Bar charts](./bar.md) for single-value comparisons

## Design Tokens

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