Confidence band chart

An estimate over time with a shaded band where the true value probably lies. Narrow bands mean more certainty.

New checkout conversion

Weekly estimate with its 95% interval. The dashed line is the old checkout's rate.

Weekly conversion rate of the new checkout, with 95% interval
	Conversion	Low	High
Week 1	2.4%	1.5%	3.3%
Week 2	2.9%	2.2%	3.6%
Week 3	3.1%	2.5%	3.7%
Week 4	3.0%	2.5%	3.5%
Week 5	3.3%	2.8%	3.8%
Week 6	3.2%	2.8%	3.6%
Week 7	3.4%	3.0%	3.8%
Week 8	3.5%	3.2%	3.8%
Week 9	3.4%	3.1%	3.7%
Week 10	3.6%	3.3%	3.9%

Usage

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

pub fn demo() -> AnyView {
    // Conversion rate (%) for a new checkout, with a 95% interval that narrows as traffic builds.
    let rate = [2.4, 2.9, 3.1, 3.0, 3.3, 3.2, 3.4, 3.5, 3.4, 3.6];
    let spread = [0.9, 0.7, 0.6, 0.5, 0.45, 0.4, 0.35, 0.32, 0.3, 0.28];
    let weeks: Vec<Interval> = rate
        .iter()
        .zip(spread)
        .enumerate()
        .map(|(i, (&v, s))| Interval::new(format!("Week {}", i + 1), v, v - s, v + s))
        .collect();

    view! {
        <ChartFrame title="New checkout conversion" description="Weekly estimate with its 95% interval. The dashed line is the old checkout's rate.">
            <ConfidenceBandChart
                data=weeks
                label="Weekly conversion rate of the new checkout, with 95% interval"
                value_label="Conversion"
                format=|v: f64| format!("{v:.1}%")
                annotations=vec![Annotation::y_line(2.8, "Old checkout")]
            />
        </ChartFrame>
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::chart_frame::ChartFrame;
use hydroxy_dioxus::confidence_band_chart::{Annotation, ConfidenceBandChart, Interval};

#[component]
pub fn ConfidenceBandChartDemo() -> Element {
    // Conversion rate (%) for a new checkout, with a 95% interval that narrows as traffic builds.
    let rate = [2.4, 2.9, 3.1, 3.0, 3.3, 3.2, 3.4, 3.5, 3.4, 3.6];
    let spread = [0.9, 0.7, 0.6, 0.5, 0.45, 0.4, 0.35, 0.32, 0.3, 0.28];
    let weeks: Vec<Interval> = rate
        .iter()
        .zip(spread)
        .enumerate()
        .map(|(i, (&v, s))| Interval::new(format!("Week {}", i + 1), v, v - s, v + s))
        .collect();

    rsx! {
        ChartFrame { title: "New checkout conversion", description: "Weekly estimate with its 95% interval. The dashed line is the old checkout's rate.",
            ConfidenceBandChart {
                data: weeks,
                label: "Weekly conversion rate of the new checkout, with 95% interval",
                value_label: "Conversion",
                format: move |v: f64| format!("{v:.1}%"),
                annotations: vec![Annotation::y_line(2.8, "Old checkout")],
            }
        }
    }
}

Anatomy

Component	data-part	Renders
`ConfidenceBandChart`	root	figure with a screen-reader table of estimates and bounds
	band	Shaded region from the low to the high bound
	line	The estimate
	crosshair	Vertical line at the active point
	tooltip	The estimate and its interval
	legend	The estimate and the band

Keyboard

Key	Does
`ArrowLeft / ArrowRight`	Previous or next point
`Home / End`	First or last point
`Escape`	Hide the tooltip

Props

Prop	Type	Notes
`data`	Vec<Interval>	Required. Interval::new(label, value, low, high) in x order
`label`	String	Required. What the chart shows; the accessible name
`value_label`	String	Names the line. Default "Estimate"
`band_label`	String	Names the band. Default "95% interval"
`curve`	Curve	Linear (default) or Monotone
`scale`	ScaleKind	Linear (default), Log or Symlog
`height`	u16	Plot height in px. Default 240
`format`	Fn(f64) -> String	Formats the ticks, tooltip and table
`annotations`	Vec<Annotation>	x is a point 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