How to Create a C# .NET Pyramid Chart with FlexChart

What You Will Need
• ComponentOne FlexChart
• Visual Studio 2022

Controls Referenced
• FlexChart

Tutorial Concept
How to create a pyramid chart in a .NET application. FlexChart can be used in WinForms, WPF, ASP.NET Core, UWP, WinUI and Blazor.

Visual data is often more engaging and memorable than raw figures. Charts help us understand complex information by showing trends, patterns, and relationships that numbers alone might not show. Among the different types of charts, pyramid charts are useful for showing hierarchical relationships between different levels of data. Each level in a pyramid chart represents a band whose height shows the relative value associated with a specific level.

Mescius offers a ComponentOne charting component named FlexChart that provides enough flexibility to transform data into charts. FlexChart is known for its high performance and can be used in WinForms, WPF, ASP.NET Core, WinUI, UWP, or .NET MAUI applications. Although FlexChart does not include a standalone Pyramid chart type to showcase hierarchical data, we can adjust its Funnel Chart type to create visuals that resemble a pyramid.

In this blog, we will analyze the number of candidates at each stage of the recruitment process in a company using pyramid-style visualization. We will implement this process in the steps below:

1. Setup WinForms Application with FlexChart Control
2. Create a Funnel Chart with the Required Bindings
3. Transform the Funnel Chart into a Pyramid Chart

Setup WinForms Application with FlexChart Control

Let’s begin by setting up a new .NET 8 WinForms application that includes the ComponentOne FlexChart dependency by following the steps below:

1. Open Visual Studio and select File | New | Project to create a new Windows Form App.

2. Right-click on the project in Solution Explorer and click on Manage NuGet Packages… from the context menu.

3. Search for the C1.Win.FlexChart package in the NuGet Package Manager and click on Install. It will add the FlexChart control to the toolbox.

4. Drop the FlexChart control from the toolbox onto the form designer. The design of the form will appear as the image below:

In this article, we are using a data table that contains the recruitment data of a company, as shown in the following code:

/// <summary>
/// Gets dummy recruitment data
/// </summary>
/// <returns>a DataTable containing recruitment data</returns>
public static DataTable GetRecruitmentData()
{
    return new DataTable()
    {
        Columns =
        {
            "Name",
            new DataColumn("TotalCandidates", typeof(int))
        },
        Rows =
        {
            {"Application Received", 250 },
            {"Application Review", 245 },
            {"Initial Screening", 118 },
            {"Telephonic Interview", 100 },
            {"On-site Interview", 95 },
            {"Hired", 50 }
        }
    };
}

Create a Funnel Chart with the Required Bindings

The funnel chart helps visualize the sequential stages of a linear process. Because its features closely resemble a pyramid chart, we are modifying the funnel chart to create a pyramid chart.

Let us change the FlexChart type to “Funnel” and perform the required bindings:

//setting ChartType
flexChart1.ChartType = ChartType.Funnel;
//setting data-source
flexChart1.DataSource = GetRecruitmentData();
flexChart1.Binding = "TotalCandidates";
flexChart1.BindingX = "Name";

Now, we are going to set the required elements like Data Labels, Series, and Header to make the chart more informative:

//setting data-labels
flexChart1.DataLabel.Content = "{Name}: {TotalCandidates}";
flexChart1.DataLabel.Position = LabelPosition.Center;
flexChart1.Legend.Position = Position.None;
//clearing default series and adding a new series
flexChart1.Series.Clear();
flexChart1.Series.Add(new Series());
//setting header of FlexChart
flexChart1.Header.Content = "Recruitment Analysis of the Candidates";

After executing the above-given code, the chart appears like below:

Note: In this demo project, we are using a custom palette for the chart, following the official documentation for appearance and styling in FlexChart.

Transform the Funnel Chart into a Pyramid Chart

As discussed, a pyramid chart is best for showing hierarchical data, population breakdowns, proportional categories, and cumulative data. Since this representation fits best with our use case, let’s convert the funnel chart we just created into a pyramid chart. To proceed further, we need to understand the differences between these two chart types:

• The pyramid chart is triangular, whereas the funnel chart has a neck attached.
• The pyramid chart becomes broader at the bottom, whereas funnel charts are wide at the top and narrow toward the bottom.

To make the funnel chart triangular, we will set the funnel neck’s width and height to zero. Further, we will invert this funnel chart so that it is broader at the bottom, like a pyramid. Below is the code snippet demonstrating this transformation:

// setting the funnel neck dimensions to zero
flexChart1.Options.FunnelNeckHeight = 0;
flexChart1.Options.FunnelNeckWidth = 0;
// inverting the chart
flexChart1.AxisY.Reversed = true;

After performing all the above steps, the final chart looks as follows:

Success! The hierarchical hiring process has been effectively visualized. You can download the sample to try it out.

Conclusion

In this blog, we explored how to create a pyramid chart using the ComponentOne FlexChart API through a few simple steps. FlexChart offers a wide range of features, like multiple axes, multiple plot areas, legend grouping, etc. It is flexible enough to be customized based on your data visualization needs.

You can experiment more with the FlexChart control by referring to its official documentation.

If you have any inquiries, please leave them in the comments section below. Happy Coding!

Originally published at https://developer.mescius.com on July 31, 2024.