Class BoxAndWhiskerSeries

The BoxAndWhiskerSeries class represents a series that plots box-and-whisker diagrams in a SfCartesianChart.

Inheritance

System.Object

ChartSeries

CartesianSeries

XYDataSeries

BoxAndWhiskerSeries

Inherited Members

CartesianSeries.ActualXAxis

CartesianSeries.ActualYAxis

CartesianSeries.DataLabelSettings

CartesianSeries.DataLabelSettingsProperty

CartesianSeries.GetDataPoints(Double, Double, Double, Double)

CartesianSeries.GetDataPoints(Rect)

CartesianSeries.Label

CartesianSeries.LabelProperty

CartesianSeries.ShowTrackballLabel

CartesianSeries.ShowTrackballLabelProperty

CartesianSeries.TrackballLabelTemplate

CartesianSeries.TrackballLabelTemplateProperty

CartesianSeries.XAxisName

CartesianSeries.XAxisNameProperty

CartesianSeries.YAxisName

CartesianSeries.YAxisNameProperty

ChartSeries.CreateAnimation(Action<Double>)

ChartSeries.DrawDataLabel(ICanvas, Brush, String, PointF, Int32)

ChartSeries.DrawSeries(ICanvas, ReadOnlyObservableCollection<ChartSegment>, RectF)

ChartSeries.EnableAnimation

ChartSeries.EnableAnimationProperty

ChartSeries.EnableTooltip

ChartSeries.EnableTooltipProperty

ChartSeries.Fill

ChartSeries.FillProperty

ChartSeries.GetDataPointIndex(Single, Single)

ChartSeries.IsVisible

ChartSeries.IsVisibleOnLegend

ChartSeries.IsVisibleOnLegendProperty

ChartSeries.IsVisibleProperty

ChartSeries.ItemsSource

ChartSeries.ItemsSourceProperty

ChartSeries.LabelContext

ChartSeries.LabelContextProperty

ChartSeries.LabelTemplate

ChartSeries.LabelTemplateProperty

ChartSeries.LegendIcon

ChartSeries.LegendIconProperty

ChartSeries.Opacity

ChartSeries.OpacityProperty

ChartSeries.PaletteBrushes

ChartSeries.PaletteBrushesProperty

ChartSeries.SelectionBehavior

ChartSeries.SelectionBehaviorProperty

ChartSeries.ShowDataLabels

ChartSeries.ShowDataLabelsProperty

ChartSeries.TooltipTemplate

ChartSeries.TooltipTemplateProperty

ChartSeries.XBindingPath

ChartSeries.XBindingPathProperty

ChartSeries.XRange

ChartSeries.YRange

XYDataSeries.StrokeWidth

XYDataSeries.StrokeWidthProperty

XYDataSeries.YBindingPath

XYDataSeries.YBindingPathProperty

Namespace: Syncfusion.Maui.Toolkit.Charts

Assembly: Syncfusion.Maui.Toolkit.dll

Syntax

public class BoxAndWhiskerSeries : XYDataSeries, IDatapointSelectionDependent, ITooltipDependent, IDataTemplateDependent, IDrawCustomLegendIcon

Remarks

A box-and-whisker plot is a chart that shows the distribution of a dataset, indicating the median, quartiles, and outliers.

To render a series, create an instance of BoxAndWhiskerSeries class, and add it to the Series collection.

It provides options for Fill,StrokeWidth, Stroke, and Opacity to customize the appearance.

EnableTooltip - A tooltip displays information while tapping or mouse hovering above a segment. To display the tooltip on a chart, you need to set the EnableTooltip property as true in BoxAndWhiskerSeries class, and also refer TooltipBehavior property.

Animation - To animate the series, set True to the EnableAnimation property.

LegendIcon - Customize the legend icon using the LegendIcon property.

Spacing - To specify the spacing between segments using the Spacing property.

Width - To specify the width of the box using the Width property.

Examples

    <chart:SfCartesianChart>

          <chart:SfCartesianChart.XAxes>
              <chart:CategoryAxis/>
          </chart:SfCartesianChart.XAxes>

          <chart:SfCartesianChart.YAxes>
              <chart:NumericalAxis/>
          </chart:SfCartesianChart.YAxes>

          <chart:SfCartesianChart.Series>
              <chart:BoxAndWhiskerSeries
                  ItemsSource="{Binding BoxWhiskerData}"
                  XBindingPath="Department"
                  YBindingPath="Age"/>
          </chart:SfCartesianChart.Series>  

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();

    CategoryAxis xAxis = new CategoryAxis();
    NumericalAxis yAxis = new NumericalAxis();

    chart.XAxes.Add(xAxis);
    chart.YAxes.Add(yAxis);

    ViewModel viewModel = new ViewModel();

    BoxAndWhiskerSeries series = new BoxAndWhiskerSeries();
    series.ItemsSource = viewModel.BoxWhiskerData;
    series.XBindingPath = "Department";
    series.YBindingPath = "Age";
    chart.Series.Add(series);

    public ObservableCollection<Model> BoxWhiskerData { get; set; }

    public ViewModel()
    {
        BoxWhiskerData= new ObservableCollection<Model>(); 
        BoxWhiskerData.Add(new Model(){Department="Development",Age=new List<double>{22, 22,23,25,25,25,26,27,27,28,28,29,30,32,34,32, 34,36,35,38};
        BoxWhiskerData.Add(new Model(){Department="HR",Age=new List<double>{22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56};
        BoxWhiskerData.Add(new Model(){Department="Finance",Age=new List<double>{26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45};
        BoxWhiskerData.Add(new Model(){Department="Inventory",Age=new List<double>{21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38};
        BoxWhiskerData.Add(new Model(){Department="R&D",Age=new List<double>{27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53};
        BoxWhiskerData.Add(new Model(){Department="Graphics",Age=new List<double>{26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58};
     }

Constructors

BoxAndWhiskerSeries()

Declaration

public BoxAndWhiskerSeries()

Fields

BoxPlotModeProperty

Identifies the BoxPlotMode bindable property.

Declaration

public static readonly BindableProperty BoxPlotModeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

Defines the mode of the box plot (Exclusive or Inclusive).

OutlierShapeTypeProperty

Identifies the OutlierShapeType bindable property.

Declaration

public static readonly BindableProperty OutlierShapeTypeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

Defines the shape used for outliers in the box plot.

ShowMedianProperty

Identifies the ShowMedian bindable property.

Declaration

public static readonly BindableProperty ShowMedianProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

Determines whether to display the median line in the box plot.

ShowOutlierProperty

Identifies the ShowOutlier bindable property.

Declaration

public static readonly BindableProperty ShowOutlierProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

Determines whether to display outliers in the box plot.

SpacingProperty

Identifies the Spacing bindable property.

Declaration

public static readonly BindableProperty SpacingProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

Defines the spacing between box plots in the series.

StrokeProperty

Identifies the Stroke bindable property.

Declaration

public static readonly BindableProperty StrokeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

Defines the stroke brush used for the box plot series.

WidthProperty

Identifies the Width bindable property.

Declaration

public static readonly BindableProperty WidthProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

Defines the width of the box plots in the series.

Properties

BoxPlotMode

Gets or sets the plot mode, which defines how the box plot series should be rendered.

Declaration

public BoxPlotMode BoxPlotMode { get; set; }

Property Value

Type	Description
BoxPlotMode	It accepts the BoxPlotMode values and its default value is Exclusive.

Remarks

Normal - This is the default value, which plots the minimum, maximum, median, and quartiles of the data.

Inclusive - This plots all the data values within the interquartile range (IQR), in addition to the minimum, maximum, median, and quartiles.

Exclusive - This plots all the data values outside the interquartile range (IQR), in addition to the minimum, maximum, median, and quartiles.

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

        <chart:BoxAndWhiskerSeries ItemsSource="{Binding BoxWhiskerData}"
                                   XBindingPath="Department"
                                   YBindingPath="Age"
                                   BoxPlotMode = "Inclusive" />

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

    BoxAndWhiskerSeries series = new BoxAndWhiskerSeries()
    {
          ItemsSource = viewModel.BoxWhiskerData,
          XBindingPath = "Department",
          YBindingPath = "Age",
          BoxPlotMode = BoxPlotMode.Inclusive,
    };

    chart.Series.Add(series);

OutlierShapeType

Gets or sets the shape type for the outlier.

Declaration

public ShapeType OutlierShapeType { get; set; }

Property Value

Type	Description
ShapeType	It accepts ShapeType values and its default value is Circle.

Examples

Xaml
C#

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:BoxAndWhiskerSeries ItemsSource="{Binding BoxWhiskerData}"
                                    XBindingPath="Department"
                                    YBindingPath="Age"
                                    OutlierShapeType="Plus" />

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

    BoxAndWhiskerSeries series = new BoxAndWhiskerSeries()
    {
          ItemsSource = viewModel.BoxWhiskerData,
          XBindingPath = "Department",
          YBindingPath = "Age",
          OutlierShapeType = ShapeType.Plus,
    };

    chart.Series.Add(series);

ShowMedian

Gets or sets a value indicating whether to show the median in the box plot or not.

Declaration

public bool ShowMedian { get; set; }

Property Value

Type	Description
System.Boolean	Its accepts the `bool` values and its default is `False`

Examples

Xaml
C#

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:BoxAndWhiskerSeries ItemsSource="{Binding BoxWhiskerData}"
                                    XBindingPath="Department"
                                    YBindingPath="Age"
                                    ShowMedian="True"/>

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

    BoxAndWhiskerSeries series = new BoxAndWhiskerSeries()
    {
          ItemsSource = viewModel.BoxWhiskerData,
          XBindingPath = "Department",
          YBindingPath = "Age",
          ShowMedian = true,
    };

    chart.Series.Add(series);

ShowOutlier

Gets or sets the value that indicates whether to show or hide the outlier of the box plot.

Declaration

public bool ShowOutlier { get; set; }

Property Value

Type	Description
System.Boolean	Its accepts the `bool` values and its default is `True`

Examples

Xaml
C#

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:BoxAndWhiskerSeries ItemsSource="{Binding BoxWhiskerData}"
                                    XBindingPath="Department"
                                    YBindingPath="Age"
                                    ShowOutlier="False" />

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

    BoxAndWhiskerSeries series = new BoxAndWhiskerSeries()
    {
          ItemsSource = viewModel.BoxWhiskerData,
          XBindingPath = "Department",
          YBindingPath = "Age",
          ShowOutlier = false,
    };

    chart.Series.Add(series);

Spacing

Gets or sets a value to indicate gap between the segments across the series.

Declaration

public double Spacing { get; set; }

Property Value

Type	Description
System.Double	It accepts `double` values ranging from 0 to 1, where the default value is 0.

Examples

Xaml
C#

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:BoxAndWhiskerSeries ItemsSource="{Binding BoxWhiskerData}"
                                    XBindingPath="Department"
                                    YBindingPath="Age"
                                    Spacing="0.5" />

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

    BoxAndWhiskerSeries series = new BoxAndWhiskerSeries()
    {
          ItemsSource = viewModel.BoxWhiskerData,
          XBindingPath = "Department",
          YBindingPath = "Age",
          Spacing = 0.5,
    };

    chart.Series.Add(series);

Stroke

Gets or sets a value to customize the border's appearance of the BoxAndWhisker series.

Declaration

public Brush Stroke { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	It accept the Microsoft.Maui.Controls.Brush values and its default is `Black`.

Examples

Xaml
C#

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:BoxAndWhiskerSeries ItemsSource="{Binding BoxWhiskerData}"
                                    XBindingPath="Department"
                                    YBindingPath="Age"
                                    Stroke="Red" />

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

    BoxAndWhiskerSeries series = new BoxAndWhiskerSeries()
    {
          ItemsSource = viewModel.BoxWhiskerData,
          XBindingPath = "Department",
          YBindingPath = "Age",
          Stroke = new SolidColorBrush(Colors.Red),
    };

    chart.Series.Add(series);

Width

Gets or sets a value to indicate the width of the box plot.

Declaration

public double Width { get; set; }

Property Value

Type	Description
System.Double	It accepts `double` values ranging from 0 to 1, where the default value is `0.8`.

Examples

Xaml
C#

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:BoxAndWhiskerSeries ItemsSource="{Binding BoxWhiskerData}"
                                    XBindingPath="Department"
                                    YBindingPath="Age"
                                    Width="0.7"/>

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

    BoxAndWhiskerSeries series = new BoxAndWhiskerSeries()
    {
          ItemsSource = viewModel.BoxWhiskerData,
          XBindingPath = "Department",
          YBindingPath = "Age",
          Width = 0.7,
    };

    chart.Series.Add(series);

Methods

CreateSegment()

Creates and initializes a new chart segment for the chart.

Declaration

protected override ChartSegment CreateSegment()

Returns

Type
ChartSegment

Overrides

ChartSeries.CreateSegment()