Renko chart

Fixed-size bricks laid each time price moves a full brick from the last one, ignoring time. Small moves are filtered out, so trends and reversals stand out.

ACME closes, brick size $2
Brick	Completed at	Open	Close
Brick 1	Price 2	$212	$214
Brick 2	Price 7	$214	$216
Brick 3	Price 7	$216	$218
Brick 4	Price 10	$218	$220
Brick 5	Price 11	$220	$222
Brick 6	Price 13	$222	$224
Brick 7	Price 15	$224	$222
Brick 8	Price 17	$222	$220
Brick 9	Price 18	$220	$218
Brick 10	Price 18	$218	$216
Brick 11	Price 19	$216	$214
Brick 12	Price 22	$214	$212
Brick 13	Price 24	$212	$210
Brick 14	Price 30	$210	$208
Brick 15	Price 30	$208	$206
Brick 16	Price 32	$206	$204
Brick 17	Price 32	$204	$202
Brick 18	Price 33	$202	$200
Brick 19	Price 33	$200	$198
Brick 20	Price 34	$198	$200
Brick 21	Price 35	$200	$198
Brick 22	Price 35	$198	$196
Brick 23	Price 37	$196	$198
Brick 24	Price 40	$198	$200

Usage

use hydroxy_leptos::renko_chart::RenkoChart;
use leptos::prelude::*;

#[component]
pub fn Demo() -> impl IntoView {
    let closes = vec![
        212.34, 214.99, 213.28, 215.41, 215.04, 214.67, 218.62, 219.08, 219.15, 220.76, 223.16, 223.25, 224.58, 222.78,
        222.19, 221.47, 218.95, 216.09, 212.98, 212.66, 212.46, 211.97, 212.26, 209.74, 209.73, 210.35, 212.01, 210.46,
        209.81, 205.93, 205.08, 200.83, 198.14, 200.50, 196.24, 197.99, 198.80, 198.32, 199.39, 200.60,
    ];

    view! { <RenkoChart prices=closes label="ACME closes, brick size $2" brick_size=2.0 format=|v: f64| format!("${v:.0}") /> }
}

use dioxus::prelude::*;
use hydroxy_dioxus::renko_chart::RenkoChart;

#[component]
pub fn RenkoChartDemo() -> Element {
    let closes = vec![
        212.34, 214.99, 213.28, 215.41, 215.04, 214.67, 218.62, 219.08, 219.15, 220.76, 223.16, 223.25, 224.58, 222.78,
        222.19, 221.47, 218.95, 216.09, 212.98, 212.66, 212.46, 211.97, 212.26, 209.74, 209.73, 210.35, 212.01, 210.46,
        209.81, 205.93, 205.08, 200.83, 198.14, 200.50, 196.24, 197.99, 198.80, 198.32, 199.39, 200.60,
    ];

    rsx! {
        RenkoChart { prices: closes, label: "ACME closes, brick size $2", brick_size: 2.0, format: move |v: f64| format!("${v:.0}") }
    }
}

Anatomy

Component	data-part	Renders
`RenkoChart`	root	figure with a screen-reader table of every brick
	overlay	Focusable plot; arrow keys move between bricks
	brick	One per brick, data-dir up or down
	tooltip	Open and close of the active brick, and the price that completed it
	annotation	Reference line, band or point

Keyboard

Key	Does
`ArrowRight / ArrowLeft`	Next or previous brick
`Home / End`	First or last brick
`Escape`	Clear

Props

Prop	Type	Notes
`prices`	Vec<f64>	Required. Prices in time order, such as daily closes
`labels`	Vec<String>	One per price, such as a date, named in the tooltip
`label`	String	Required. What the chart shows; the accessible name
`brick_size`	f64	Brick size in price units. Default: a twentieth of the range, rounded
`annotations`	Vec<Annotation>	Y in prices, x in brick indices
`height`	u16	Plot height in px. Default 240
`format`	Fn(f64) -> String	Formats prices on the axis, 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