The project provides chart types to draw for leptos.
- PieChart
- BarChart
- LineChart
- RadarChart
- ScatterChart
- LineChartGroup
- BarChartGroup
- Voronoi Diagram
leptos = {version = "0.5"}
leptos_chart = {version = "0.2", features = ["PieChart"]}
use leptos::*;
use leptos_chart::*;
fn main() {
wasm_logger::init(wasm_logger::Config::default());
leptos::mount_to_body(|| leptos::view! { <App/> })
}
#[component]
pub fn App() -> impl IntoView {
let chart = Polar::new(
Series::from(vec![1.0, 2.0, 3.]),
Series::from(vec!["A", "B", "C"]),
)
.set_view(740, 540, 1, 200, 20);
let color = Color::from("#ff0000");
let shift_degrees = 120.;
view! {
<div class="mx-auto p-8">
<h1>"Pie chart example with right label"</h1>
// color and shift_degrees are options
<PieChart chart=chart color=color shift_degrees=shift_degrees/>
</div>
}
}
leptos = {version = "0.5"}
leptos_chart = {version = "0.2", features = ["BarChart"]}
use leptos::*;
use leptos_chart::*;
fn main() {
wasm_logger::init(wasm_logger::Config::default());
leptos::mount_to_body(|| leptos::view! { <App/> })
}
#[component]
pub fn App() -> impl IntoView {
let chart_v = Cartesian::new(
Series::from(vec!["A", "B", "C"]),
Series::from(vec![1.0, 6.0, 9.]),
)
.set_view(820, 620, 3, 50, 50, 20);
let chart_h = Cartesian::new(
Series::from(vec![0.7, 1.5, 1.9]),
Series::from(vec!["A", "B", "C"]),
)
.set_view(820, 620, 3, 30, 30, 20);
view! {
<div class="mx-auto p-8" style="background:#00000077">
<h1>"Bar chart example"</h1>
<BarChart chart=chart_v />
<h1>"Bar chart example"</h1>
<BarChart chart=chart_h />
</div>
}
}
leptos = {version = "0.5"}
leptos_chart = {version = "0.2", features = ["BarChartGroup"]}
use leptos::*;
use leptos_chart::*;
fn main() {
wasm_logger::init(wasm_logger::Config::default());
leptos::mount_to_body(|| leptos::view! { <App/> })
}
#[component]
pub fn App() -> impl IntoView {
let chart = CartesianGroup::new()
.set_view(840, 640, 3, 50, 50, 20)
.add_data(
Series::from(vec!["A", "B", "C"]),
Series::from(vec![0.7, 1.5, 1.9]),
)
.add_data(
Series::from(vec!["A", "B", "C"]),
Series::from(vec![0.3, 0.5, 0.9]),
);
view! {
<div class="mx-auto p-8">
<h1>"Bar chart stack example"</h1>
<BarChartGroup chart=chart />
</div>
}
}
leptos = {version = "0.5"}
leptos_chart = {version = "0.2", features = ["LineChart"]}
use leptos::*;
use leptos_chart::*;
fn main() {
wasm_logger::init(wasm_logger::Config::default());
leptos::mount_to_body(|| leptos::view! { <App/> })
}
#[component]
pub fn App() -> impl IntoView {
let chart = Cartesian::new(
Series::from(vec![0., 1.0, 2.]),
Series::from(vec![3.0, 1.0, 5.]),
)
.set_view(820, 620, 3, 100, 100, 20);
view! {
<div class="mx-auto p-8" style="background:#00000077">
<h1>"Line chart example"</h1>
<LineChart chart=chart />
</div>
}
}
leptos = {version = "0.5"}
leptos_chart = {version = "0.2", features = ["LineChartGroup"]}
use leptos::*;
use leptos_chart::*;
fn main() {
wasm_logger::init(wasm_logger::Config::default());
leptos::mount_to_body(|| leptos::view! { <App/> })
}
#[component]
pub fn App() -> impl IntoView {
let chart = CartesianGroup::new()
.set_view(840, 640, 3, 50, 50, 20)
.add_data(
Series::from((vec!["1982", "1986", "2010", "2020", ], "%Y", "year")),
Series::from(vec![3., 2.0, 1., 4.]),
)
.add_data(
Series::from((vec!["1982", "1986", "2017", "2020"], "%Y", "year")),
Series::from(vec![0., 1.0, 2., 3.]),
);
view! {
<div class="mx-auto p-8">
<h1>"Line chart group example"</h1>
<LineChartGroup chart=chart />
</div>
}
}
leptos = {version = "0.5"}
leptos_chart = {version = "0.2", features = ["RadarChart"]}
use leptos::*;
use leptos_chart::*;
fn main() {
wasm_logger::init(wasm_logger::Config::default());
leptos::mount_to_body(|| leptos::view! { <App/> })
}
#[component]
pub fn App() -> impl IntoView {
let chart = Polar::new(
Series::from(vec![85.0, 55.0, 45., 60., 40.]),
Series::from(vec!["Reading", "Writing", "Listening", "Speaking", "React"]),
)
.set_view(740, 540, 1, 0, 20);
view! {
<div class="mx-auto p-8">
<h1>"Radar chart example"</h1>
<RadarChart chart=chart />
</div>
}
}
leptos = {version = "0.5"}
leptos_chart = {version = "0.2", features = ["ScatterChart"]}
use leptos::*;
use leptos_chart::*;
fn main() {
wasm_logger::init(wasm_logger::Config::default());
leptos::mount_to_body(|| leptos::view! { <App/> })
}
#[component]
pub fn App() -> impl IntoView {
let chart = Cartesian::new(
Series::from(vec![50,60,70,80,90,100,110,120,130,140,150])
.set_range(40., 160.),
Series::from(vec![7,8,8,9,9,9,10,11,14,14,15])
.set_range(6., 16.),
)
.set_view(820, 620, 3, 100, 100, 20);
view! {
<div class="mx-auto p-8">
<h1>"Scatter chart example"</h1>
<ScatterChart chart=chart />
</div>
}
}
leptos = {version = "0.5"}
leptos_chart = {version = "0.2", features = ["Voronoi"]}
rand = "0.8"
use leptos::*;
use leptos_chart::*;
use rand::Rng;
fn main() {
wasm_logger::init(wasm_logger::Config::default());
leptos::mount_to_body(|| leptos::view! { <App/> })
}
#[component]
pub fn App() -> impl IntoView {
// fill the unit square with points
let mut rng = rand::thread_rng();
let vx = (0..100)
.map(|_| (96_f64 * rng.gen::<f64>() + 2_f64) )
.collect::<Vec<_>>();
let vy = (0..100)
.map(|_| (96_f64 * rng.gen::<f64>() + 2_f64) )
.collect::<Vec<_>>();
let chart = Cartesian::new(
Series::from(vx).set_range(0., 100.),
Series::from(vy).set_range(0., 100.),
)
.set_view(720, 720, 3, 80, 80, 20);
let color = Color::from("#ff0000");
view! {
<div class="mx-auto p-8">
<h1>"Voronoi diagram example"</h1>
<Voronoi chart=chart.clone()/>
</div>
<div class="mx-auto p-8">
<h1>"Voronoi diagram with triangle example"</h1>
<Voronoi chart=chart delaunay=true color=color/>
</div>
}
}