WPF Box and Whisker Chart - Feature-Rich Charts

Overview

The WPF Box and Whisker Chart is used to visualize a group of numerical data by quartiles. It is also referred to as a box plot. The box plot may also have lines (whiskers) extending vertically from the boxes, indicating variability outside the upper and lower quartiles. This chart supports zooming, scrolling, tooltip, trackball, and selection.

WPF Box and Whisker Chart documentation

WPF Box and Whisker Chart

Key features

WPF Box and Whister Chart with Plot mode

Box plot mode

The WPF box-and-whisker chart supports different types of rendering modes such us exclusive, inclusive, and normal.

WPF Box and Whisker Chart with Average Value of Box Plot

Show mean

The WPF box-and-whisker chart allows you to enable or disable displaying the average value of the box plot.

WPF Box and Whisker Chart with Multiple Axes

Multiple axes

Use multiple axes to plot different data sets along two or more axes having different data points and values.

WPF Box and Whisker Chart with Maximum and Minimum data

Outlier

Represent the values beyond the minimum and maximum values of the data. The outlier is usually represented by a circle in the WPF Box and Whisker Chart.

WPF Box and Whisker Chart Customized Color and Box Plot

UI styling

Customize the color of the box plot and outliers by using APIs to make them visually unique. The box plot can be customized with a gradient color. Refer to this article for more information.

WPF Box and Whisker Chart with Multiple series

Multiple box plots

The WPF box plot allows you to plot multiple series in a single chart to compare different data sets. Enabling the legend and tooltip provides more information about individual series.

Code example

Easily get started with the WPF Box and Whisker Chart using a few simple lines of C# code example as demonstrated below,

xaml
c#
<Window x:Class="ChartExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ChartExample"
        xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
        mc:Ignorable="d"
        Title="WPF Box and Whisker Chart" Height="450" Width="700">
    
    <!--Setting DataContext-->
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    
    <StackPanel>
        <chart:SfChart Height="300" Width="500">
            <!--Initialize the horizontal axis for the WPF Chart-->
            <chart:SfChart.PrimaryAxis>
                <chart:CategoryAxis />
            </chart:SfChart.PrimaryAxis>

            <!--Initialize the vertical axis for the WPF Chart-->
            <chart:SfChart.SecondaryAxis>
                <chart:NumericalAxis />
            </chart:SfChart.SecondaryAxis>
           
            <!--Adding Box and Whisker Series to the WPF Chart-->
           <chart:BoxAndWhiskerSeries ShowMedian="True" ShowOutlier="True" 
                    ItemsSource="{Binding BoxWhiskerData}" 
                    XBindingPath="Department" 
                    YBindingPath="Age"/>
        </chart:SfChart>
    </StackPanel>
</Window>
public class BoxWhiskerChartModel
    {
        public string Department { get; set; }

        public List<double> Age { get; set; }

    }

    public class ViewModel
    {
        public ObservableCollection<BoxWhiskerChartModel> BoxWhiskerData { get; set; }
     
        public ViewModel()
        {
            BoxWhiskerData = new ObservableCollection<BoxWhiskerChartModel>();
          
            BoxWhiskerData.Add(new BoxWhiskerChartModel() { 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 BoxWhiskerChartModel() { Department = "HR", Age = new List<double> { 22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56 } });
            BoxWhiskerData.Add(new BoxWhiskerChartModel() { Department = "Sales", Age = new List<double> { 26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45 } });
            BoxWhiskerData.Add(new BoxWhiskerChartModel() { Department = "Inventory", Age = new List<double> { 26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58 } });
            BoxWhiskerData.Add(new BoxWhiskerChartModel() { Department = "Graphics", Age = new List<double> { 21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38 } });
            BoxWhiskerData.Add(new BoxWhiskerChartModel() { Department = "Training", Age = new List<double> { 26, 28, 29, 30, 32, 33, 35, 36, 52} });
        }
    }