FunnelChart Class

The Funnel Chart control is used to plot series of data points on a funnel chart area.

Namespace: DevExpress.UI.Xaml.Charts

Assembly: DevExpress.UI.Xaml.Charts.v21.2.dll

NuGet Package: DevExpress.Uwp.Controls

Declaration

C#

[ToolboxTabName("DX.21.2: Visualization")]
public class FunnelChart :
    ChartBase,
    IChartViewHolder

VB.NET

<ToolboxTabName("DX.21.2: Visualization")>
Public Class FunnelChart
    Inherits ChartBase
    Implements IChartViewHolder

Remarks

The FunnelChart class represents a visual control intended for graphical data representation. It is comprised of separate elements, (e.g., legend). To learn more about other visual elements, refer to Visual Elements.

The Funnel chart is shown in the image below.

To display a Series on a chart, it’s necessary to add this series to the collection returned by the ChartBase.Series property. Note that the FunnelChart control can display only series for which the Series.View is the FunnelSeriesView object.

Example

This example demonstrates how to create a Funnel Chart and customize its common settings.

XAML

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FunnelChart"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Charts="using:DevExpress.UI.Xaml.Charts"
    x:Class="FunnelChart.MainPage"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Charts:FunnelChart ToolTipEnabled="True" Margin="50,50,50,50">
            <Charts:FunnelChart.Legend>
                <Charts:Legend Orientation="Vertical" HorizontalPosition="Right" VerticalPosition="Bottom"/>
            </Charts:FunnelChart.Legend>
            <Charts:Series>
                <Charts:Series.View>
                    <Charts:FunnelSeriesView PointDistance="5" ShowLabels="True">
                        <Charts:FunnelSeriesView.LabelOptions>
                            <Charts:SeriesLabelOptions Pattern="{}{A}: {VP:p0}" Charts:FunnelSeriesView.LabelPosition="Right"/>
                        </Charts:FunnelSeriesView.LabelOptions>
                    </Charts:FunnelSeriesView>
                </Charts:Series.View>
                <Charts:DataPointCollection>
                    <Charts:DataPoint Argument="Visited a Web Site" Value="9152" />
                    <Charts:DataPoint Argument="Downloaded a Trial" Value="6870" />
                    <Charts:DataPoint Argument="Contacted to Support" Value="5121" />
                    <Charts:DataPoint Argument="Subscribed" Value="2224" />
                    <Charts:DataPoint Argument="Renewed" Value="1670" />
                </Charts:DataPointCollection>
            </Charts:Series>
        </Charts:FunnelChart>
    </Grid>
</Page>

Inheritance

Object

DependencyObject

Windows.UI.Xaml.UIElement

FrameworkElement

Control

ChartBase

FunnelChart