Lesson 3 - Create a Funnel Chart

• May 26, 2022
• 4 minutes to read

This lesson explains how to create a Funnel chart, bind it to data, add a legend, and customize funnel point labels.

Before you proceed, review the following topics:

• Windows UI Library 3
• Get Started with WinUI 3 for Desktop Apps
• DevExpress WinUI Controls: Get Started

Create a New Project

Create a new Blank App, Packaged with Windows Application Packaging Project (WinUI 3 in Desktop) project and add the DevExpress.WinUI NuGet package.

Refer to the following topic for more information on how to create a new project: DevExpress WinUI Controls: Get Started.

Add a Data Model

In the MainWindow.xaml.cs, add a new DataPoint class that defines a data model:

C#

public class DataPoint {
    public string Argument { get; set; }
    public double Value { get; set; }
}

Add a View Model

In the MainWindow.xaml.cs, add a new ChartViewModel class that specifies a view model:

C#

public class ChartViewModel : ViewModelBase {
    public ChartViewModel() {
        List<DataPoint> dataPoints = new List<DataPoint> {
            new DataPoint() { Argument = "Visited a Website",    Value = 9152 },
            new DataPoint() { Argument = "Downloaded a Trial",   Value = 6870 },
            new DataPoint() { Argument = "Contacted to Support", Value = 5121 },
            new DataPoint() { Argument = "Subscribed",           Value = 2224 },
            new DataPoint() { Argument = "Renewed",              Value = 1670 }
        };
        DataPoints = dataPoints;
    }
    public List<DataPoint> DataPoints { get; }
}

In the MainWindow.xaml, specify the window’s data context as follows:

XAML

<Window>
    <Grid>
        <Grid.DataContext>
            <local:ChartViewModel/>
        </Grid.DataContext>
        <!--...-->
    </Grid>
</Window>

Add the FunnelChart Control to the Window

Add a FunnelChart instance to the window:

XAML

<Window
    xmlns:Charts="using:DevExpress.WinUI.Charts">
    <Grid>
    <!--...-->
        <Charts:FunnelChart>
            <!--...-->
        </Charts:FunnelChart>
    </Grid>
</Window>

Add a Series and Bind it to Data

• Add a FunnelSeries object to the FunnelChart.Series collection.

• To bind the series to data, initialize the FunnelSeries.Data property with a DataSource object and define its settings:

  • Bind DataSource.PointSource to the view model’s DataPoints property.
  • Use the DataSource.ArgumentDataMember and DataSource.ValueDataMember properties to specify the data members for series arguments and values.

• Initialize the FunnelSeries.View property with a FunnelSeriesView object to access view settings:

  • Use the FunnelSeriesView.PointDistance property to specify indents between funnel points.

  • Define the SeriesView.LegendPointPattern property to format text displayed for each series point in the legend.

  • Set the SeriesView.ShowLabels property to True to enable labels for points.

• To customize label settings, specify the SeriesView.LabelPattern and FunnelSeriesView.LabelPosition properties to customize label text and position.

• Specify the FunnelSeriesView.Title property to add an individual title for the funnel series. To customize the title’s appearance, define the FunnelSeriesView.TitleContentTemplate property.

XAML

<Charts:FunnelChart>
    <Charts:FunnelChart.Series>
        <Charts:FunnelSeries>
            <Charts:FunnelSeries.Data>
                <Charts:DataSource PointSource="{Binding DataPoints}"
                                   ArgumentDataMember="Argument"
                                   ValueDataMember="Value"/>
            </Charts:FunnelSeries.Data>
            <Charts:FunnelSeries.View>
                <Charts:FunnelSeriesView PointDistance="10" 
                                         ShowLabels="True"
                                         LabelPattern="{}{A}: {VP:p2}"
                                         LabelPosition="LeftColumn" 
                                         Title="Website Visitors"
                                         LegendPointPattern="{}{A}: {V}">
                    <Charts:FunnelSeriesView.TitleContentTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding}" 
                                       FontSize="18" 
                                       Margin="20"/>
                        </DataTemplate>
                    </Charts:FunnelSeriesView.TitleContentTemplate>
                </Charts:FunnelSeriesView>
            </Charts:FunnelSeries.View>
        </Charts:FunnelSeries>
    </Charts:FunnelChart.Series>
</Charts:FunnelChart>

Add a Legend

• Initialize the ChartBase.Legend property with a Legend object.

• Use the HorizontalPosition and VerticalPosition properties to specify the legend’s position.

• Set Legend.Orientation to Vertical to put legend items in a column.

• Specify the legend margin.

XAML

<Charts:FunnelChart.Legend>
    <Charts:Legend HorizontalPosition="Right"
                   VerticalPosition="Center"
                   Orientation="Vertical"
                   Margin="40,0,0,0"/>
</Charts:FunnelChart.Legend>

Results

The chart is ready. Your code and XAML should look as follows:

XAML

<Window
    x:Class="FunnelChartSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FunnelChartSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Charts="using:DevExpress.WinUI.Charts"
    mc:Ignorable="d">
    <Grid>
        <Grid.DataContext>
            <local:ChartViewModel/>
        </Grid.DataContext>
        <Charts:FunnelChart>
            <Charts:FunnelChart.Series>
                <Charts:FunnelSeries>
                    <Charts:FunnelSeries.Data>
                        <Charts:DataSource PointSource="{Binding DataPoints}"
                                           ArgumentDataMember="Argument"
                                           ValueDataMember="Value"/>
                    </Charts:FunnelSeries.Data>
                    <Charts:FunnelSeries.View>
                        <Charts:FunnelSeriesView PointDistance="10" 
                                                 ShowLabels="True"
                                                 LabelPattern="{}{A}: {VP:p2}"
                                                 LabelPosition="LeftColumn" 
                                                 Title="Website Visitors"
                                                 LegendPointPattern="{}{A}: {V}">
                            <Charts:FunnelSeriesView.TitleContentTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding}" 
                                               FontSize="18" 
                                               Margin="20"/>
                                </DataTemplate>
                            </Charts:FunnelSeriesView.TitleContentTemplate>
                        </Charts:FunnelSeriesView>
                    </Charts:FunnelSeries.View>
                </Charts:FunnelSeries>
            </Charts:FunnelChart.Series>
            <Charts:FunnelChart.Legend>
                <Charts:Legend HorizontalPosition="Right"
                               VerticalPosition="Center"
                               Orientation="Vertical"
                               Margin="40,0,0,0"/>
            </Charts:FunnelChart.Legend>
        </Charts:FunnelChart>
    </Grid>
</Window>

C#

using DevExpress.Mvvm;
using Microsoft.UI.Xaml;
using System.Collections.Generic;

namespace FunnelChartSample {
    public sealed partial class MainWindow : Window {
        public MainWindow() {
            this.InitializeComponent();
        }
    }
    public class DataPoint {
        public string Argument { get; set; }
        public double Value { get; set; }
    }
    public class ChartViewModel : ViewModelBase {
        public ChartViewModel() {
            List<DataPoint> dataPoints = new List<DataPoint> {
                new DataPoint() { Argument = "Visited a Website",    Value = 9152 },
                new DataPoint() { Argument = "Downloaded a Trial",   Value = 6870 },
                new DataPoint() { Argument = "Contacted to Support", Value = 5121 },
                new DataPoint() { Argument = "Subscribed",           Value = 2224 },
                new DataPoint() { Argument = "Renewed",              Value = 1670 }
            };
            DataPoints = dataPoints;
        }
        public List<DataPoint> DataPoints { get; }
    }
}

Run the project. The following image illustrates the resulting chart: