FunnelSeries2D.HeightToWidthRatioAuto Property

Gets or sets a value which indicates whether the height-to-width ratio of a Funnel Series series should be auto-calculated.

Namespace : DevExpress.Xpf.Charts

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

NuGet Package : DevExpress.Wpf.Charts

Declaration

C#
VB.NET

csharp

public bool HeightToWidthRatioAuto { get; set; }

Public Property HeightToWidthRatioAuto As Boolean

Property Value

Type	Description
Boolean

true, if the height-to-width ratio should be auto-calculated; otherwise, false.

Remarks

Use the HeightToWidthRatioAuto property, to toggle between automatic and manual height-to-width ratio definition for Funnel Series series.

If the HeightToWidthRatioAuto property is set to false , the FunnelSeries2D.HeightToWidthRatio property becomes available, which allows you to manually define the desired ratio.

The following images demonstrate the HeightToWidthRatioAuto 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