Strip plot

Every value of each group as a dot on one row, spread by a small fixed jitter so repeated values stay visible. Good for modest samples where each observation matters.

API response time by region
Group	Value
US East	182 ms
US East	195 ms
US East	201 ms
US East	188 ms
US East	210 ms
US East	224 ms
US East	176 ms
US East	199 ms
US East	240 ms
US East	205 ms
US East	192 ms
US East	186 ms
US East	215 ms
US East	230 ms
US East	198 ms
US East	310 ms
US East	207 ms
US East	189 ms
US East	221 ms
US East	203 ms
EU West	142 ms
EU West	151 ms
EU West	160 ms
EU West	138 ms
EU West	149 ms
EU West	172 ms
EU West	155 ms
EU West	147 ms
EU West	166 ms
EU West	158 ms
EU West	144 ms
EU West	139 ms
EU West	181 ms
EU West	152 ms
EU West	161 ms
EU West	148 ms
EU West	290 ms
EU West	157 ms
EU West	150 ms
EU West	163 ms
Asia Pacific	260 ms
Asia Pacific	284 ms
Asia Pacific	271 ms
Asia Pacific	299 ms
Asia Pacific	255 ms
Asia Pacific	318 ms
Asia Pacific	276 ms
Asia Pacific	290 ms
Asia Pacific	266 ms
Asia Pacific	305 ms
Asia Pacific	281 ms
Asia Pacific	340 ms
Asia Pacific	270 ms
Asia Pacific	262 ms
Asia Pacific	295 ms
Asia Pacific	287 ms
Asia Pacific	412 ms
Asia Pacific	279 ms
Asia Pacific	301 ms
Asia Pacific	268 ms

Usage

use hydroxy_leptos::strip_plot_chart::{Annotation, Group, StripPlotChart};
use leptos::prelude::*;

#[component]
pub fn Demo() -> impl IntoView {
    let groups = vec![
        Group::new(
            "US East",
            [
                182.0, 195.0, 201.0, 188.0, 210.0, 224.0, 176.0, 199.0, 240.0, 205.0, 192.0, 186.0, 215.0, 230.0,
                198.0, 310.0, 207.0, 189.0, 221.0, 203.0,
            ],
        ),
        Group::new(
            "EU West",
            [
                142.0, 151.0, 160.0, 138.0, 149.0, 172.0, 155.0, 147.0, 166.0, 158.0, 144.0, 139.0, 181.0, 152.0,
                161.0, 148.0, 290.0, 157.0, 150.0, 163.0,
            ],
        ),
        Group::new(
            "Asia Pacific",
            [
                260.0, 284.0, 271.0, 299.0, 255.0, 318.0, 276.0, 290.0, 266.0, 305.0, 281.0, 340.0, 270.0, 262.0,
                295.0, 287.0, 412.0, 279.0, 301.0, 268.0,
            ],
        ),
    ];

    view! {
        <StripPlotChart
            groups=groups
            label="API response time by region"
            annotations=vec![Annotation::x_line(300.0, "SLO")]
            format=|v: f64| format!("{v:.0} ms")
        />
    }
}

use dioxus::prelude::*;
use hydroxy_dioxus::strip_plot_chart::{Annotation, Group, StripPlotChart};

#[component]
pub fn StripPlotChartDemo() -> Element {
    let groups = vec![
        Group::new(
            "US East",
            [
                182.0, 195.0, 201.0, 188.0, 210.0, 224.0, 176.0, 199.0, 240.0, 205.0, 192.0, 186.0, 215.0, 230.0,
                198.0, 310.0, 207.0, 189.0, 221.0, 203.0,
            ],
        ),
        Group::new(
            "EU West",
            [
                142.0, 151.0, 160.0, 138.0, 149.0, 172.0, 155.0, 147.0, 166.0, 158.0, 144.0, 139.0, 181.0, 152.0,
                161.0, 148.0, 290.0, 157.0, 150.0, 163.0,
            ],
        ),
        Group::new(
            "Asia Pacific",
            [
                260.0, 284.0, 271.0, 299.0, 255.0, 318.0, 276.0, 290.0, 266.0, 305.0, 281.0, 340.0, 270.0, 262.0,
                295.0, 287.0, 412.0, 279.0, 301.0, 268.0,
            ],
        ),
    ];

    rsx! {
        StripPlotChart {
            groups,
            label: "API response time by region",
            annotations: vec![Annotation::x_line(300.0, "SLO")],
            format: move |v: f64| format!("{v:.0} ms"),
        }
    }
}

Anatomy

Component	data-part	Renders
`StripPlotChart`	root	figure with a screen-reader table of every value
	overlay	Focusable plot; arrow keys step through dots
	dot	One per value
	tooltip	Group and value of the active dot
	annotation	Reference line, band or point

Keyboard

Key	Does
`ArrowRight / ArrowLeft`	Next or previous dot, row by row
`Home / End`	First or last dot
`Escape`	Clear

Props

Prop	Type	Notes
`groups`	Vec<Group>	Required. Group::new(label, values), one row each
`label`	String	Required. What the chart shows; the accessible name
`jitter`	f64	Share of each row the dots spread over. Default 0.6
`scale`	ScaleKind	Linear, Log or Symlog value axis. Default Linear
`annotations`	Vec<Annotation>	X in data values, y in row indices
`height`	u16	Plot height in px. Default 240
`format`	Fn(f64) -> String	Formats ticks, tooltip and table

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