How to: Use the FunnelChart

• Jul 26, 2018

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>