Box plot

Compare the spread of several groups. Each box shows the quartiles and median, whiskers reach to the furthest value within 1.5 times the interquartile range, and values beyond them are drawn as outliers. Hover, touch or arrow-key to a box to read its numbers.

Deploy time by team
Group	Count	Lower whisker	Q1	Median	Q3	Upper whisker	Outliers
Platform	11	12 min	15 min	17 min	20 min	22 min	41 min
Payments	10	18 min	26 min	29 min	34 min	44 min
Search	11	8 min	9 min	11 min	13 min	15 min	2 min, 31 min
Mobile	9	20 min	29 min	34 min	40 min	55 min

Usage

use hydroxy_leptos::box_plot::{BoxPlot, Group};
use leptos::prelude::*;

#[component]
pub fn Demo() -> impl IntoView {
    let groups = vec![
        Group::new("Platform", [12.0, 14.0, 15.0, 15.5, 16.0, 17.0, 18.0, 19.0, 21.0, 22.0, 41.0]),
        Group::new("Payments", [18.0, 22.0, 25.0, 27.0, 28.0, 30.0, 33.0, 35.0, 38.0, 44.0]),
        Group::new("Search", [8.0, 9.0, 9.5, 10.0, 11.0, 12.0, 12.5, 14.0, 15.0, 2.0, 31.0]),
        Group::new("Mobile", [20.0, 26.0, 29.0, 31.0, 34.0, 36.0, 40.0, 47.0, 55.0]),
    ];

    view! { <BoxPlot groups=groups label="Deploy time by team" format=|v: f64| format!("{v:.0} min") /> }
}

use dioxus::prelude::*;
use hydroxy_dioxus::box_plot::{BoxPlot, Group};

#[component]
pub fn BoxPlotDemo() -> Element {
    let groups = vec![
        Group::new("Platform", [12.0, 14.0, 15.0, 15.5, 16.0, 17.0, 18.0, 19.0, 21.0, 22.0, 41.0]),
        Group::new("Payments", [18.0, 22.0, 25.0, 27.0, 28.0, 30.0, 33.0, 35.0, 38.0, 44.0]),
        Group::new("Search", [8.0, 9.0, 9.5, 10.0, 11.0, 12.0, 12.5, 14.0, 15.0, 2.0, 31.0]),
        Group::new("Mobile", [20.0, 26.0, 29.0, 31.0, 34.0, 36.0, 40.0, 47.0, 55.0]),
    ];

    rsx! {
        BoxPlot { groups, label: "Deploy time by team", format: move |v: f64| format!("{v:.0} min") }
    }
}

Anatomy

Component	data-part	Renders
`BoxPlot`	root	figure with a screen-reader table of each group's numbers
	columns	Focusable group of boxes; arrow keys step between them
	column	One per group; `data-active` and its tooltip shown when picked
	box	First to third quartile
	median	Line across the box
	whisker	Range within 1.5 IQR, with a cap at each end
	outlier	Hollow dot for each value beyond the whiskers
	tooltip	Whiskers, quartiles, median and outlier count of the picked group
	sr-live	Announces the picked group's numbers
	sr-table	Every group's count, quartiles, whiskers and outliers

Keyboard

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

Props

Prop	Type	Notes
`groups`	Vec<Group>	Required. Group::new(label, values); non-finite values are ignored
`label`	String	Required. What the chart shows; the accessible name
`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