How to: Create a 2D Funnel Chart

Jun 07, 2019
3 minutes to read

This example demonstrates how to create a 2D Funnel chart.

Create a ChartControl and set its ChartControl.Diagram property to a SimpleDiagram2D object.
Add a FunnelSeries2D object to the Diagram.Series collection.
Set the Series.LegendTextPattern property to “{}{A}: {V}” to show a point argument with a corresponding value for each point in the legend.
Enable the Series.LabelsVisibility property to display the series labels. Set the SeriesLabel.TextPattern property to “{}{VP:##.##%}” to show a point’s percentage value in each series label.
To change the funnel height’s ratio to its width, disable the FunnelSeries2D.HeightToWidthRatioAuto property and define FunnelSeries2D.HeightToWidthRatio.

You can optionally add a chart title and change the legend‘s position.

MainWindow.xaml
MainWindow.xaml.cs
MainWindow.xaml.vb

xaml

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
        xmlns:local="clr-namespace:FunnelChart"
        x:Class="FunnelChart.MainWindow"
        Title="MainWindow" Height="650" Width="900">
    <Window.DataContext>
        <local:ChartViewModel/>
    </Window.DataContext>
    <Grid>
        <dxc:ChartControl>
            <dxc:SimpleDiagram2D>
                <dxc:FunnelSeries2D DataSource="{Binding Data}"
                                    ArgumentDataMember="Argument"
                                    ValueDataMember="Value"
                                    LegendTextPattern="{}{A}: {V}" 
                                    HeightToWidthRatioAuto="False" 
                                    HeightToWidthRatio="0.9" 
                                    PointDistance="2"
                                    LabelsVisibility="True">
                    <dxc:FunnelSeries2D.Label>
                        <dxc:SeriesLabel TextPattern="{}{VP:##.##%}"                                         
                                         dxc:FunnelSeries2D.LabelPosition="Center"/>
                    </dxc:FunnelSeries2D.Label>
                </dxc:FunnelSeries2D>
            </dxc:SimpleDiagram2D>
            <dxc:ChartControl.Titles>
                <dxc:Title Content="Website Visitor Trend"
                           Dock="Top" 
                           HorizontalAlignment="Center"/>
            </dxc:ChartControl.Titles>
            <dxc:ChartControl.Legends>
                <dxc:Legend HorizontalPosition="RightOutside" 
                            VerticalPosition="Top"/>
            </dxc:ChartControl.Legends>
        </dxc:ChartControl>
    </Grid>
</Window>

using System.Collections.ObjectModel;
using System.Windows;
namespace FunnelChart {
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
    }
    public class ChartViewModel {
        public ObservableCollection<DataPoint> Data { get; private set; }
        public ChartViewModel() {
            Data = new ObservableCollection<DataPoint> {
                        new DataPoint ("Visited a Web Site", 9152),
                        new DataPoint ("Downloaded a Trial", 6870),
                        new DataPoint ("Contacted to Support", 5121),
                        new DataPoint ("Subscribed", 2224),
                        new DataPoint ("Renewed", 1670)
            };
        }
        public class DataPoint {
            public string Argument { get; private set; }
            public double Value { get; private set; }
            public DataPoint(string argument, double value) {
                Argument = argument;
                Value = value;
            }
        }
    }
}

Imports System.Collections.ObjectModel
Imports System.Windows
Namespace FunnelChart
    Public Partial Class MainWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
    Public Class ChartViewModel
        Public Property Data As ObservableCollection(Of DataPoint)
        Public Sub New()
            Data = New ObservableCollection(Of DataPoint) From {
                New DataPoint("Visited a Web Site", 9152),
                New DataPoint("Downloaded a Trial", 6870),
                New DataPoint("Contacted to Support", 5121),
                New DataPoint("Subscribed", 2224),
                New DataPoint("Renewed", 1670)
            }
        End Sub
        Public Class DataPoint
            Public Property Argument As String
            Public Property Value As Double

            Public Sub New(ByVal argument As String, ByVal value As Double)
                Argument = argument
                Value = value
            End Sub
        End Class
    End Class
End Namespace