Event Bar Chart

Built for schedules, release plans and project milestones — any "who does what, when" data. A fixed lane label column sits on the left and a pannable time canvas on the right: the axis switches between day, week and month ticks based on the visible span, each event is a rounded bar positioned by its start and end days, and bars too narrow for their label keep only the color. Press and drag the canvas to pan, with inertia after you let go; Shift + wheel or horizontal trackpad scrolling pans too, and the arrow buttons in the top corners move a third of the view at a time. Hovering or focusing a bar lifts it and expands an event card (date range, day count, status and details); clicking pins the card, and clicking again or pressing Esc closes it.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<EventBarChart/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/event-bar-chart.en.json

Usage

import { EventBarChart } from "@/components/ui/event-bar-chart";

<EventBarChart
  lanes={[
    { id: "design", label: "Design" },
    { id: "web", label: "Frontend", color: "#3b82f6" },
  ]}
  events={[
    {
      id: "d1",
      lane: "design",
      start: "2026-10-03",
      end: "2026-10-18",
      label: "Design review",
      status: "active",
      detail: "High-fidelity mocks of the home and checkout screens.",
    },
    { id: "w1", lane: "web", start: "2026-10-12", end: "2026-10-30", label: "Checkout redesign", status: "planned" },
  ]}
  visibleSpan={30}
  onSelectedChange={(id) => console.log(id)}
/>

Props

EventBarLane

EventBarEvent

EventBarDomain

formatEventRange(start, end) is also exported by name. It returns a string like "10/3–10/18 · 16 days", so readouts outside the chart can reuse the same format.

How it works

• Dates are always read as UTC calendar days: browsers parse ISO date strings as UTC, so reading month and day in local time would make the server and a UTC+8 user disagree. end is therefore inclusive, and a bar's right edge reaches midnight of the next day.
• Ticks: day ticks up to 14 visible days, week ticks (on Mondays) up to 70, month ticks beyond that; the interval then widens based on pixels per day so labels never collide.
• The initial view puts today at the left third of the visible width, or starts at the beginning when today is out of range. Keyboard focus on an off-screen bar pans to it automatically; mouse clicks never jump the view.
• A pointer has to move more than 4px to count as a drag, and only then is it captured, so tapping a bar is still a normal click. After a drag, the canvas coasts on the release velocity (power 0.6) and bounces softly at the edges.
• The accent color comes from --wb-event-bar-chart-accent (defaults to #0d9488 in light mode and #2dd4bf in dark mode) and applies to every lane without its own color; the card open duration comes from --wb-event-bar-chart-duration (default 180ms).
• Events that overlap in time within the same lane are drawn on top of each other; split them into two lanes if needed.

Accessibility

• The time canvas is focusable (role="group"): ← / → pan, Home returns to today and End jumps to the end. The SVG axis is role="img" with an aria-label summarizing lane count, event count and range, plus aria-describedby pointing at an sr-only data table
• Every event bar is a native button; Tab moves through them in time order, the aria-label reads like "Design review, Oct 3 to Oct 18, In progress", and aria-pressed reflects whether it is pinned
• The event card is role="tooltip" on hover or focus and becomes role="dialog" with a close button once pinned; Esc closes it
• When the system "reduce motion" setting is on, bars appear at full size without the grow animation, panning jumps instantly with no inertia or spring, and the event card only fades in