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 thewidth
prop above.viewbox_width
: i32 (default:600
): The SVG viewbox width. Together withviewbox_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
to1.0
is the same as0%
to100%
.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 elementclass
of the pie chart.class_series
: &str (default:"dx-series"
): The HTML elementclass
for the group of pie slices.class_slice
: &str (default:"dx-slice"
): The HTML elementclass
for all pie slices.class_label
: &str (default:"dx-label"
): The HTML elementclass
for all labels.