Function dioxus_charts::charts::pie::PieChart

source ·
pub fn PieChart<'a>(cx: Scope<'a, PieChartProps<'a>>) -> Element<'_>
Expand description

This is the PieChart function used to render the pie 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::PieChart;

fn app(cx: Scope) -> Element {
    cx.render(rsx! {
        PieChart {
            start_angle: -60.0,
            label_position: LabelPosition::Outside,
            label_offset: 35.0,
            padding: 20.0,
            series: vec![59.54, 17.2, 9.59, 7.6, 5.53, 0.55]
            labels: vec!["Asia".into(), "Africa".into(), "Europe".into(), "N. America".into(), "S. America".into(), "Oceania".into()],
        }
    })
}

Props

  • series: Vec<f32> (required): The series vector with the values.
  • labels: Vec<String> (optional): Optional labels to show for each value of the series.

  • 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 scaling up or down the chart and labels.
  • viewbox_height: i32 (default: 400): The SVG viewbox height.

  • show_labels: bool (default: true): Show/hide labels.
  • label_position: LabelPosition (default: LabelPosition::Inside): A hint for the automatic positioning of labels on the chart.
  • label_offset: f32 (default: 0.0): An extra offset for the labels relative to the center of the pie.
  • label_interpolation: fn(f32) -> String (optional): Function for formatting the generated labels.

  • start_angle: f32 (default: 0.0): The initial angle used for drawing the pie.
  • total: f32 (optional): The series total sum. Can be used to make Gauge charts.
  • show_ratio: f32 (optional): Used for making Gauge charts more easily. 0.0001 to 1.0 is the same as 0% to 100%.
  • padding: f32 (default: 0.0): Padding for every side of the SVG view box.

  • donut: bool (default: false): Draw the slices differently to make a donut-looking chart instead.
  • donut_width: f32 (default: 40.0): The width of each donut slice.

  • class_chart: &str (default: "dx-pie-chart"): The HTML element class of the pie chart.
  • class_series: &str (default: "dx-series"): The HTML element class for the group of pie slices.
  • class_slice: &str (default: "dx-slice"): The HTML element class for all pie slices.
  • class_label: &str (default: "dx-label"): The HTML element class for all labels.