Split line chart

One line that changes style at a point: solid for what happened, dashed for what is expected. The two halves meet at the last actual value.

Revenue

Actual to July, then the plan for the rest of the year.

Monthly revenue, actual and projected
	Value	Kind
Jan	£118k	Actual
Feb	£124k	Actual
Mar	£131k	Actual
Apr	£129k	Actual
May	£140k	Actual
Jun	£148k	Actual
Jul	£155k	Actual
Aug	£161k	Plan
Sep	£168k	Plan
Oct	£174k	Plan
Nov	£181k	Plan
Dec	£190k	Plan

Usage

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

#[component]
pub fn Demo() -> impl IntoView {
    // Monthly revenue in £ thousands: actual to July, then the plan.
    let revenue = vec![
        Datum::new("Jan", 118.0),
        Datum::new("Feb", 124.0),
        Datum::new("Mar", 131.0),
        Datum::new("Apr", 129.0),
        Datum::new("May", 140.0),
        Datum::new("Jun", 148.0),
        Datum::new("Jul", 155.0),
        Datum::new("Aug", 161.0),
        Datum::new("Sep", 168.0),
        Datum::new("Oct", 174.0),
        Datum::new("Nov", 181.0),
        Datum::new("Dec", 190.0),
    ];

    view! {
        <ChartFrame title="Revenue" description="Actual to July, then the plan for the rest of the year.">
            <SplitLineChart
                data=revenue
                split=7_usize
                label="Monthly revenue, actual and projected"
                projected_label="Plan"
                format=|v: f64| format!("£{v:.0}k")
                annotations=vec![Annotation::y_line(150.0, "Break-even")]
            />
        </ChartFrame>
    }
}

use dioxus::prelude::*;
use hydroxy_dioxus::chart_frame::ChartFrame;
use hydroxy_dioxus::split_line_chart::{Annotation, Datum, SplitLineChart};

#[component]
pub fn SplitLineChartDemo() -> Element {
    // Monthly revenue in £ thousands: actual to July, then the plan.
    let revenue = vec![
        Datum::new("Jan", 118.0),
        Datum::new("Feb", 124.0),
        Datum::new("Mar", 131.0),
        Datum::new("Apr", 129.0),
        Datum::new("May", 140.0),
        Datum::new("Jun", 148.0),
        Datum::new("Jul", 155.0),
        Datum::new("Aug", 161.0),
        Datum::new("Sep", 168.0),
        Datum::new("Oct", 174.0),
        Datum::new("Nov", 181.0),
        Datum::new("Dec", 190.0),
    ];

    rsx! {
        ChartFrame { title: "Revenue", description: "Actual to July, then the plan for the rest of the year.",
            SplitLineChart {
                data: revenue,
                split: 7,
                label: "Monthly revenue, actual and projected",
                projected_label: "Plan",
                format: move |v: f64| format!("£{v:.0}k"),
                annotations: vec![Annotation::y_line(150.0, "Break-even")],
            }
        }
    }
}

Anatomy

Component	data-part	Renders
`SplitLineChart`	root	figure with a screen-reader table marking each value actual or projected
	line	Solid up to the split; data-dashed after it
	crosshair	Vertical line at the active point
	dot	The active point
	tooltip	The value and whether it is actual or projected
	legend	Actual and projected

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<Datum>	Required. Datum::new(label, value), actual first
`split`	usize	Required. Index of the first projected value
`label`	String	Required. What the chart shows; the accessible name
`actual_label / projected_label`	String	Default "Actual" and "Projected"
`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