Function dioxus_charts::charts::bar::BarChart

source · 
pub fn BarChart(props: BarChartProps) -> Element
Expand description

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

§Example

ⓘ
use dioxus::prelude::*;
use dioxus_charts::BarChart;

fn app() -> Element {
    rsx! {
        BarChart {
            padding_top: 30,
            padding_left: 70,
            padding_right: 50,
            padding_bottom: 30,
            bar_width: "10%",
            horizontal_bars: true,
            label_interpolation: (|v| format!("{v:.1}%")) as fn(f32) -> String,
            series: vec![
                vec![63.0, 14.4, 8.0, 5.1, 1.8],
            ],
            labels: vec!["Chrome".into(), "Safari".into(), "IE/Edge".into(), "Firefox".into(), "Opera".into()]
        }
    }
}

§Props

  • series: Vec<Vec<f32>> (required): The series vector of vectors with the all series values.
  • labels: Vec<String> (optional): Optional labels to show on the labels axis.
  • 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_series_labels: bool (default: true): Show/hide the values labels at the top of bars.
  • label_size: i32 (default: 60): The maximum width or height of the label rect depending on whether the chart shows horizontal or vertical bars.
  • label_interpolation: fn(f32) -> String (optional): Function for formatting the generated labels for values.
  • bar_width: &str (default: "5%"): The width of each bar.
  • bar_distance: f32 (default: 30.0): The distance between the bars for charts that have multiple ones side by side.
  • horizontal_bars: bool (default: false): Show horizontal bars.
  • stacked_bars: bool (default: false): Build a Stacked Bars chart.
  • class_chart_bar: &str (default: "dx-chart-line"): The HTML element class of the chart.
  • class_bar: &str (default: "dx-bar"): The HTML element class of the whole line.
  • class_bar_group: &str (default: "dx-bar-group"): The HTML element class of the line path.
  • class_bar_label: &str (default: "dx-bar-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.