Funnel and Pyramid in WinUI Chart

14 Apr 20215 minutes to read

Pyramid

PyramidSeries has the form of a triangle with lines dividing it into sections and each section has a different width. Depending on the Y co-ordinates, this width indicates a level of hierarchy among other categories.

<chart:PyramidSeries XBindingPath="Category" ItemsSource="{Binding Data}" YBindingPath="Value"/>
PyramidSeries series = new PyramidSeries()
{

    ItemsSource = new ViewModel().Data,

    XBindingPath = "Category",

    YBindingPath = "Value"

};

chart.Series.Add(series);

Pyramid chart type in WinUI

The PyramidMode is used to define the rendering mode such as Surface or Linear pyramid segments.

PyramidMode as Surface

<chart:PyramidSeries XBindingPath="Category" PyramidMode="Surface" ItemsSource="{Binding Data}" YBindingPath="Value"/>
PyramidSeries series = new PyramidSeries()
{

    ItemsSource = new ViewModel().Data,

    XBindingPath = "Category",

    YBindingPath = "Value",

    PyramidMode = ChartPyramidMode.Surface

};

chart.Series.Add(series);

Pyramid modes in WinUI Chart

PyramidMode as Linear

<chart:PyramidSeries XBindingPath="Category" PyramidMode="Linear" ItemsSource="{Binding Data}" YBindingPath="Value"/>
PyramidSeries series = new PyramidSeries()
{

    ItemsSource = new ViewModel().Data,

    XBindingPath = "Category",

    YBindingPath = "Value",

    PyramidMode = ChartPyramidMode.Linear

};

chart.Series.Add(series);

Pyramid modes in WinUI Chart

Funnel

FunnelSeries is similar to PyramidSeries, displays data in a funnel shape that equals to 100% when totaled. It is a single series, representing data as portions of 100% and does not use any axes.

The following code example shows how to use the funnel series:

<chart:FunnelSeries XBindingPath="Category" ItemsSource="{Binding Data}" YBindingPath="Value"/>
FunnelSeries series = new FunnelSeries()
{

    ItemsSource = new ViewModel().Data,

    XBindingPath = "Category",

    YBindingPath = "Value",

};

chart.Series.Add(series);

Funnel chart type in WinUI

Funnel Mode

The FunnelMode defines a rendering mode for the funnel series which define, where to bind your values (to height or width). The following example demonstrates ValueIsHeight and ValueIsWidth funnel mode:

ValueIsHeight

<chart:FunnelSeries XBindingPath="Category" ItemsSource="{Binding Data}" FunnelMode="ValueIsHeight" YBindingPath="Value"/>
FunnelSeries series = new FunnelSeries()
{

    ItemsSource = new ViewModel().Data,

    XBindingPath = "Category",

    YBindingPath = "Value",

    FunnelMode = ChartFunnelMode.ValueIsHeight

};

chart.Series.Add(series);

Funnel modes in WinUI Chart

ValueIsWidth

<chart:FunnelSeries XBindingPath="Category" ItemsSource="{Binding Data}" FunnelMode="ValueIsWidth" YBindingPath="Value"/>
FunnelSeries series = new FunnelSeries()
{

    ItemsSource = new ViewModel().Data,

    XBindingPath = "Category",

    YBindingPath = "Value",

    FunnelMode = ChartFunnelMode.ValueIsWidth

};

chart.Series.Add(series);

Funnel modes in WinUI Chart

Explode Segments

The following properties are used to explode the individual segments in Funnel and Pyramid.

Explode Offset

<chart:FunnelSeries XBindingPath="Category" ItemsSource="{Binding Data}"   

ExplodeIndex="4"  ExplodeOffset="70" YBindingPath="Value">

</chart:FunnelSeries>
FunnelSeries series = new FunnelSeries()
{

    ItemsSource = new ViewModel().Data,

    XBindingPath = "Category",

    YBindingPath = "Value",

    ExplodeIndex = 4,

    ExplodeOffset = 70

};

chart.Series.Add(series);

Exploding the segments of accumlation series in WinUI Chart

Gap Ratio

The gap between each segment using GapRatio property as in the following code example.

<chart:FunnelSeries XBindingPath="Category" ItemsSource="{Binding Data}"     

GapRatio="0.5" YBindingPath="Value">

</chart:FunnelSeries>
FunnelSeries series = new FunnelSeries()
{

    ItemsSource = new ViewModel().Data,

    XBindingPath = "Category",

    YBindingPath = "Value",

    GapRatio = 0.5

};

chart.Series.Add(series);

Gap ratio between segments in WinUI Chart