New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Vertical Box Plot Chart

  • Demo Configurator
Outliers Settings
Extremes Settings

The demo shows the Vertical Box Plot chart type (it uses VerticalBoxPlotSeries) in Telerik ASP.NET Chart, which is useful for comparing distributions between different sets of numerical data. With OutliersAppearance and ExtremesAppearance properties, you can control the visual settings of certain data points, whose value is far too big or far too small in comparison to the rest of the items.

You can manually customize the configurators and see how setting each of the properties affects the chart.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" 
    Inherits="Telerik.Web.Examples.HtmlChart.ChartTypes.BoxPlotChart.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadHtmlChart runat="server" ID="BoxPlotChart" Width="800" Height="500" Skin="Silk">
            <PlotArea>
                <Series>
                    <telerik:VerticalBoxPlotSeries
                        DataLowerField="lower"
                        DataQ1Field="q1"
                        DataMedianField="median"
                        DataQ3Field="q3"
                        DataMeanField="mean"
                        DataUpperField="upper"
                        DataOutliersField="outliers">
                        <TooltipsAppearance Color="White"></TooltipsAppearance>
                        <Appearance FillStyle-BackgroundColor="#4f99d2"></Appearance>
                    </telerik:VerticalBoxPlotSeries>
                </Series>
                <XAxis>
                    <Items>
                        <telerik:AxisItem LabelText="January" />
                        <telerik:AxisItem LabelText="February" />
                        <telerik:AxisItem LabelText="March" />
                        <telerik:AxisItem LabelText="April" />
                        <telerik:AxisItem LabelText="May" />
                        <telerik:AxisItem LabelText="June" />
                        <telerik:AxisItem LabelText="July" />
                        <telerik:AxisItem LabelText="August" />
                        <telerik:AxisItem LabelText="September" />
                        <telerik:AxisItem LabelText="October" />
                        <telerik:AxisItem LabelText="November" />
                        <telerik:AxisItem LabelText="December" />
                    </Items>
                </XAxis>
            </PlotArea>
            <ChartTitle Text="Total money spent on online purchases"></ChartTitle>
        </telerik:RadHtmlChart>
    </div>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Configuratorpanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="BoxPlotChart" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk"></telerik:RadAjaxLoadingPanel>
    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium" Title="Outliers Settings">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox runat="server" ID="ComboBoxOutliersType" AutoPostBack="true" Label="Type">
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:NumericTextBox runat="server" ID="NumericTextBoxOutliersBorderWidth" AutoPostBack="true" Value="1" MinValue="1" MaxValue="4" Size="Medium" Label="Border width">
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox runat="server" ID="NumericTextBoxOutliersSize" AutoPostBack="true" Value="8" MinValue="8" MaxValue="14" Size="Medium" Label="Size">
                            </qsf:NumericTextBox>
                        </li>
                        <li><span class="label">Border color</span>
                            <qsf:ColorPicker runat="server" ID="ColorPickerOutliersBorderColor" AutoPostBack="true"
                                SelectedColor="#fa9819">
                            </qsf:ColorPicker>
                        </li>
                        <li></li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium" Title="Extremes Settings">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox runat="server" ID="ComboBoxExtremesType" AutoPostBack="true" Label="Type">
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:NumericTextBox runat="server" ID="NumericTextBoxExtremesBorderWidth" AutoPostBack="true" Value="1" MinValue="1" MaxValue="4" Size="Medium" Label="Border width">
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox runat="server" ID="NumericTextBoxExtremesSize" AutoPostBack="true" Value="8" MinValue="8" MaxValue="14" Size="Medium" Label="Size">
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <label class="label">Border color</label>
                            <qsf:ColorPicker runat="server" ID="ColorPickerExtremesBorderColor" AutoPostBack="true"
                                SelectedColor="#d41414">
                            </qsf:ColorPicker>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance