FunnelSeries2D.HeightToWidthRatio Property

Gets or sets a value that specifies the height-to-width ratio of a Funnel Series series.

Assembly : DevExpress.Xpf.Charts.v25.2.dll

NuGet Package : DevExpress.Wpf.Charts

Declaration

C#
VB.NET

csharp

public double HeightToWidthRatio { get; set; }

Public Property HeightToWidthRatio As Double

Property Value

Type	Description
Double

A double value that specifies the height-to-width ratio of a funnel.

Remarks

Use the HeightToWidthRatio property to manually set the height-to-width ratio of a Funnel series. To enable auto-calculation of this ratio, use the FunnelSeries2D.HeightToWidthRatioAuto property.

The following images demonstrate the HeightToWidthRatio property in action.

HeightToWidthRatioAuto = true

HeightToWidthRatioAuto = false

HeightToWidthRatio = 2

| | --- | --- | |

Example

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