Span chart

A bar per category from a start value to an end value, such as a salary band or a temperature range, with both ends labelled. An optional marker shows a point inside the range, such as the median.

Salary bands

Offers made in 2025, thousands per year. The dot is the median offer.

£32k£41k£42k£58k£55k£74k£70k£92k£88k£125k

Salary band by design role
	From	To	Median
Junior designer	£32k	£41k	£36k
Product designer	£42k	£58k	£49k
Senior designer	£55k	£74k	£63k
Design lead	£70k	£92k	£80k
Head of design	£88k	£125k	£104k

July temperatures

Typical overnight low to daytime high.

9°C14°C11°C19°C18°C28°C23°C33°C

Typical July temperature range by city
	From	To
Reykjavík	9°C	14°C
Edinburgh	11°C	19°C
Lisbon	18°C	28°C
Athens	23°C	33°C

Usage

use hydroxy_leptos::chart_frame::ChartFrame;
use hydroxy_leptos::span_chart::*;
use leptos::prelude::*;

#[component]
pub fn Demo() -> impl IntoView {
    let roles: Vec<String> =
        ["Junior designer", "Product designer", "Senior designer", "Design lead", "Head of design"]
            .map(String::from)
            .to_vec();
    // Each band runs from the lowest to the highest offer; the marker is the median.
    let bands = vec![
        Span::new(32.0, 41.0).with_marker(36.5),
        Span::new(42.0, 58.0).with_marker(49.0),
        Span::new(55.0, 74.0).with_marker(63.0),
        Span::new(70.0, 92.0).with_marker(80.0),
        Span::new(88.0, 125.0).with_marker(104.0),
    ];
    let cities: Vec<String> = ["Reykjavík", "Edinburgh", "Lisbon", "Athens"].map(String::from).to_vec();
    let july = vec![Span::new(9.0, 14.0), Span::new(11.0, 19.0), Span::new(18.0, 28.0), Span::new(23.0, 33.0)];

    view! {
        <div style="display: grid; gap: var(--space-10);">
            <ChartFrame title="Salary bands" description="Offers made in 2025, thousands per year. The dot is the median offer.">
                <SpanChart rows=roles data=bands label="Salary band by design role" marker_label="Median" format=|v: f64| format!("£{v:.0}k") />
            </ChartFrame>
            <ChartFrame title="July temperatures" description="Typical overnight low to daytime high.">
                <SpanChart
                    rows=cities
                    data=july
                    label="Typical July temperature range by city"
                    format=|v: f64| format!("{v:.0}°C")
                    annotations=vec![Annotation::y_line(25.0, "Beach weather")]
                />
            </ChartFrame>
        </div>
    }
}

use dioxus::prelude::*;
use hydroxy_dioxus::chart_frame::ChartFrame;
use hydroxy_dioxus::span_chart::{Annotation, Span, SpanChart};

#[component]
pub fn SpanChartDemo() -> Element {
    let roles: Vec<String> =
        ["Junior designer", "Product designer", "Senior designer", "Design lead", "Head of design"]
            .map(String::from)
            .to_vec();
    // Each band runs from the lowest to the highest offer; the marker is the median.
    let bands = vec![
        Span::new(32.0, 41.0).with_marker(36.5),
        Span::new(42.0, 58.0).with_marker(49.0),
        Span::new(55.0, 74.0).with_marker(63.0),
        Span::new(70.0, 92.0).with_marker(80.0),
        Span::new(88.0, 125.0).with_marker(104.0),
    ];
    let cities: Vec<String> = ["Reykjavík", "Edinburgh", "Lisbon", "Athens"].map(String::from).to_vec();
    let july = vec![Span::new(9.0, 14.0), Span::new(11.0, 19.0), Span::new(18.0, 28.0), Span::new(23.0, 33.0)];

    rsx! {
        div { style: "display: grid; gap: var(--space-10);",
            ChartFrame { title: "Salary bands", description: "Offers made in 2025, thousands per year. The dot is the median offer.",
                SpanChart {
                    rows: roles,
                    data: bands,
                    label: "Salary band by design role",
                    marker_label: "Median",
                    format: move |v: f64| format!("£{v:.0}k"),
                }
            }
            ChartFrame { title: "July temperatures", description: "Typical overnight low to daytime high.",
                SpanChart {
                    rows: cities,
                    data: july,
                    label: "Typical July temperature range by city",
                    format: move |v: f64| format!("{v:.0}°C"),
                    annotations: vec![Annotation::y_line(25.0, "Beach weather")],
                }
            }
        }
    }
}

Anatomy

Component	data-part	Renders
`SpanChart`	root	figure with a screen-reader table of every range
	bar	The range, extending from its start
	end-label	The start and end values, either side of the bar
	marker	The point of interest inside the range
	x-label	Row names, down the left
	tooltip	Start, end, spread and the marker for the row
	legend	Range and marker, shown when there are markers

Keyboard

Key	Does
`ArrowUp / ArrowDown`	Previous or next row
`Home / End`	First or last row
`Escape`	Hide the tooltip

Props

Prop	Type	Notes
`rows`	Vec<String>	Required. One label per row
`data`	Vec<Span>	Required. Span::new(start, end), optionally .with_marker(value)
`label`	String	Required. What the chart shows; the accessible name
`marker_label`	String	What the marker means, such as Median. Default Marker
`height`	u16	Plot height in px. Default 36 per row
`format`	Fn(f64) -> String	Formats ticks, end labels, tooltip and table
`annotations`	Vec<Annotation>	y_line and y_band mark values (drawn vertically); x is a row index

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