Function dioxus_charts::charts::line::LineChart

pub fn LineChart(props: LineChartProps) -> Element

This is the LineChart function used to render the line chart Element. In Dioxus, components are just functions, so this is the main PieChart component to be used inside rsx! macros in your code.

Example

use dioxus::prelude::*;
use dioxus_charts::LineChart;

fn app() -> Element {
    rsx! {
        LineChart {
            padding_top: 30,
            padding_left: 65,
            padding_right: 80,
            padding_bottom: 30,
            label_interpolation: (|v| format!("${v:.0}B")) as fn(f32) -> String,
            series: vec![
                vec![29.0, 30.5, 32.6, 35.0, 37.5],
                vec![20.0, 25.1, 26.0, 25.2, 26.6],
                vec![18.0, 21.0, 22.5, 24.0, 25.1],
                vec![12.5, 17.0, 19.3, 20.1, 21.0],
            ],
            labels: vec!["2020A".into(), "2021E".into(), "2022E".into(), "2023E".into(), "2024E".into()],
            series_labels: vec!["Disney".into(), "Comcast".into(), "Warner".into(), "Netflix".into()],
        }
    }
}

Props

• series: Vec<Vec<f32>> (required): The series vector of vectors with the series values.
• labels: Vec<String> (optional): Optional labels to show on the labels axis.
• series_labels: Vec<String> (optional): Optional labels to show for each generated line.

---

• width: &str (default: "100%"): The SVG element width attribute. It also accepts any other CSS style, i.e., “200px”
• height: &str (default: "100%"): The SVG height counter-part of the width prop above.
• viewbox_width: i32 (default: 600): The SVG viewbox width. Together with viewbox_height it is useful for adjusting the aspect ratio for longer charts.
• viewbox_height: i32 (default: 400): The SVG viewbox height.

---

• padding_top: i32 (default: 0): Padding for the top side of the view box.
• padding_bottom: i32 (default: 0): Padding for the bottom side of the view box.
• padding_left: i32 (default: 0): Padding for the left side of the view box.
• padding_right: i32 (default: 0): Padding for the right side of the view box.

---

• lowest: f32 (optional): The lowest number on the chart for the value axis.
• highest: f32 (optional): The highest number on the chart for the value axis.
• max_ticks: i32 (default: 8): The maximum number of ticks on the generated value axis.

---

• show_grid: bool (default: true): Show/hide the chart grid.
• show_dotted_grid: bool (default: true): Show the chart grid with dotted style or not.
• show_grid_ticks: bool (default: false): Show the chart grid ticks instead of drawing the whole grid lines for a cleaner look.
• show_labels: bool (default: true): Show/hide the labels.
• show_dots: bool (default: true): Show/hide the line dots.
• show_lines: bool (default: true): Show/hide the series lines.
• show_line_labels: bool (default: true): Show/hide the labels for the lines.

---

• line_width: &str (default: "1%"): The width of the series lines.
• dot_size: &str (default: "3%"): The size of the line dots.
• label_interpolation: fn(f32) -> String (optional): Function for formatting the generated labels.

---

• class_chart_line: &str (default: "dx-chart-line"): The HTML element class of the chart.
• class_line: &str (default: "dx-line"): The HTML element class of the whole line.
• class_line_path: &str (default: "dx-line"): The HTML element class of the line path.
• class_line_dot: &str (default: "dx-line-dot"): The HTML element class of the line dot.
• class_line_label: &str (default: "dx-line-label"): The HTML element class of the line labels.
• class_grid: &str (default: "dx-grid"): The HTML element class of the grid.
• class_grid_line: &str (default: "dx-grid-line"): The HTML element class of every grid line.
• class_grid_label: &str (default: "dx-grid-label"): The HTML element class of the grid labels.
• class_grid_labels: &str (default: "dx-grid-labels"): The HTML element class of the group of grid labels.