theta-vn/leptos_chart

Draw chart with svg for leptos

A visualization library for leptos

The project provides chart types to draw for leptos.

• PieChart
• BarChart
• LineChart
• RadarChart
• ScatterChart
• LineChartGroup
• BarChartGroup
• Voronoi Diagram

Examples and Usage

PieChart

Cargo.toml for PieChart

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["PieChart"]}

main.rs for 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>
    }
}

Result for PieChart

Result with feature debug for PieChart

BarChart

Cargo.toml for BarChart

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["BarChart"]}

main.rs for 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>
    }
}

Result (debug) for BarChart

BarChartGroup

Cargo.toml for BarChartGroup

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["BarChartGroup"]}

main.rs for 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>
    }
}

Result (debug) for BarChartGroup

LineChart

Cargo.toml for LineChart

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["LineChart"]}

main.rs for 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>
    }
}

Result (debug) for LineChart

LineChartGroup

Cargo.toml for LineChartGroup

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["LineChartGroup"]}

main.rs for 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>
    }
}

Result (debug) for LineChartGroup

RadarChart

Cargo.toml for RadarChart

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["RadarChart"]}

main.rs for 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>
    }
}

Result (debug) for RadarChart

ScatterChart

Cargo.toml for ScatterChart

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["ScatterChart"]}

main.rs for 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>
    }
}

Result (debug) for ScatterChart

Voronoi

Cargo.toml for Voronoi

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["Voronoi"]}
rand = "0.8"

main.rs for Voronoi

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>
    }
}

Result (debug) for Voronoi