leptos-chartistry 0.1.0

Welcome to Chartistry! This crate provides a flexible way to build charts in Leptos.

All charts are built using the [Chart] fn. If you understand this function, you understand this library.

Examples

• See the demo for Chartistry in action.
• There is also an large, assorted list of examples available.

Below is an example chart:

use leptos::*;
use leptos_chartistry::*;

# use chrono::prelude::*;
# struct MyData { x: DateTime<Utc>, y1: f64, y2: f64 }
# fn load_data() -> Signal<Vec<MyData>> { Signal::default() }

# #[component]
# fn SimpleChartComponent() -> impl IntoView {
let data: Signal<Vec<MyData>> = load_data(/* pull data from a resource */);
view! {
<Chart
// Sets the width and height
aspect_ratio=AspectRatio::from_outer_ratio(600.0, 300.0)

// Decorate our chart
top=RotatedLabel::middle("My garden")
left=TickLabels::aligned_floats()
right=Legend::end()
bottom=TickLabels::timestamps()
inner=[
AxisMarker::left_edge().into_inner(),
AxisMarker::bottom_edge().into_inner(),
XGridLine::default().into_inner(),
YGridLine::default().into_inner(),
XGuideLine::over_data().into_inner(),
YGuideLine::over_mouse().into_inner(),
]
tooltip=Tooltip::left_cursor()

// Describe the data
series=Series::new(|data: &MyData| data.x)
.line(Line::new(|data: &MyData| data.y1).with_name("butterflies"))
.line(Line::new(|data: &MyData| data.y2).with_name("dragonflies"))
data=data
/>
}
# }