Timeline chart

Plan or review work over time. Items sit in lanes on a date axis with calendar-aligned ticks; spans are bars, events are diamonds, and overlapping items in a lane stack. Hover, touch or arrow-key to an item to read its dates.

Design

Research

Prototype

Design review

Build

API

Web app

Launch

Beta

Public launch

Release plan
Lane	Item	When
Design	Research	5 Oct 2026 to 23 Oct 2026
Design	Prototype	19 Oct 2026 to 6 Nov 2026
Design	Design review	9 Nov 2026
Build	API	26 Oct 2026 to 4 Dec 2026
Build	Web app	9 Nov 2026 to 18 Dec 2026
Launch	Beta	7 Dec 2026 to 21 Dec 2026
Launch	Public launch	12 Jan 2027

Usage

use hydroxy_leptos::timeline_chart::{Item, Lane, TimelineChart, ms_from_civil};
use leptos::prelude::*;

pub fn demo() -> AnyView {
    let day = |m: i64, d: i64| ms_from_civil(2026, m, d);
    let lanes = vec![
        Lane::new(
            "Design",
            [
                Item::span("Research", day(10, 5), day(10, 23)),
                Item::span("Prototype", day(10, 19), day(11, 6)),
                Item::event("Design review", day(11, 9)),
            ],
        ),
        Lane::new(
            "Build",
            [Item::span("API", day(10, 26), day(12, 4)), Item::span("Web app", day(11, 9), day(12, 18))],
        ),
        Lane::new(
            "Launch",
            [Item::span("Beta", day(12, 7), day(12, 21)), Item::event("Public launch", ms_from_civil(2027, 1, 12))],
        ),
    ];

    view! { <TimelineChart lanes=lanes label="Release plan" /> }.into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::timeline_chart::{Item, Lane, TimelineChart, ms_from_civil};

#[component]
pub fn TimelineChartDemo() -> Element {
    let day = |m: i64, d: i64| ms_from_civil(2026, m, d);
    let lanes = vec![
        Lane::new(
            "Design",
            [
                Item::span("Research", day(10, 5), day(10, 23)),
                Item::span("Prototype", day(10, 19), day(11, 6)),
                Item::event("Design review", day(11, 9)),
            ],
        ),
        Lane::new(
            "Build",
            [Item::span("API", day(10, 26), day(12, 4)), Item::span("Web app", day(11, 9), day(12, 18))],
        ),
        Lane::new(
            "Launch",
            [Item::span("Beta", day(12, 7), day(12, 21)), Item::event("Public launch", ms_from_civil(2027, 1, 12))],
        ),
    ];

    rsx! {
        TimelineChart { lanes, label: "Release plan" }
    }
}

Anatomy

Component	data-part	Renders
`TimelineChart`	root	figure with a screen-reader table of every item
	body	Focusable group of lanes; arrow keys step through items
	lane	A named row group; grows to fit stacked items
	item	Span or event; `data-active` and its tooltip shown when picked
	marker	Diamond for an event
	axis	Date ticks on whole hours, days, Mondays, months or years
	sr-live	Announces the picked item's lane, name and dates
	sr-table	Every item with its lane and dates

Keyboard

Key	Does
`ArrowRight / ArrowLeft`	Step to the next or previous item, lane by lane
`Home / End`	Jump to the first or last item
`Escape`	Clear the picked item

Props

Prop	Type	Notes
`lanes`	Vec<Lane>	Required. Lane::new(name, items)
`label`	String	Required. What the chart shows; the accessible name
`format`	Fn(f64) -> String	Formats times in the tooltip, live region and table. Default: "5 Oct 2026"
`Item::span`	(label, start, end)	A range. Times are epoch milliseconds, UTC; see ms_from_civil
`Item::event`	(label, at)	A single moment

Events

Prop	Type	Notes
`on_hover`	Callback<Option<Datum>>	The mark under the pointer or keyboard focus changes, or is left. Fires only on a change
`on_select`	Callback<Datum>	Click, tap or Enter on a mark