How to Create 80+ WPF Chart Types

If you read our previous blog, The Complete Guide to 80+ C# .NET Chart Types, you discovered the full range of chart types available in C# and FlexChart for .NET.

In this follow-up, we'll take it a step further by showing how to create all of these chart types in C# and XAML using the WPF FlexChart library. The same code and XAML examples can also be applied to the WinUI and MAUI versions of FlexChart. Before we dive into the examples, let's review the components included in the WPF chart library.

Ready to get started? Download ComponentOne Today!

Understanding the WPF Chart Components

In this guide, we'll organize the chart types based on the WPF chart components included in the C1.WPF.Chart library. The ComponentOne FlexChart library provides a variety of specialized UI components to support the full range of chart types. This modular approach prevents the unnecessary complexity of mixing radial and Cartesian chart APIs, which could make large portions of the API irrelevant for certain chart types, ultimately leading to a confusing development experience. We've also separated advanced chart types that serve more niche scenarios. The complete list of WPF chart components is as follows:

• FlexChart
• FlexPie
• FlexRadar
• FinancialChart
• Sunburst
• TreeMap
• Heatmap

All the XAML examples below rely on this namespace, which is automatically generated when you drag and drop FlexChart from the toolbox.

xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"

FlexChart - Cartesian WPF Charts

The FlexChart control itself is used to render basic Cartesian charts. This includes column, bar, line, area, step, and scatter charts. FlexChart is also used for funnel and pyramid charts. Now, we'll look at how to create each chart type.

How to Create a WPF Cartesian Chart

Drop a FlexChart control onto your XAML page or window and define it with any number of chart series, as shown below.

<c1:FlexChart ItemsSource="{Binding Data}" 
              BindingX="Category"
              ChartType="Line">
    <c1:Series Binding="Value1"/>
    <c1:Series Binding="Value2"/>
</c1:FlexChart>

You can switch the ChartType to any of the following values:

• Area
• Bar
• Bubble
• Candlestick
• Column
• Funnel
• HighLowOpenClose
• Histogram
• Line
• LineSymbols
• RangedHistogram
• Scatter
• Spline
• SplineArea
• SplineSymbols
• Step
• StepArea
• StemSymbols

How to Create a WPF Chart in C# Code

Everything that you can do in XAML, you can do in C# code if preferred. Let's take the XAML example above and do the same in C#:

var flexChart = new C1.WPF.Chart.FlexChart();
flexChart.ItemsSource = _data;
flexChart.BindingX = "Category";
flexChart.ChartType = C1.Chart.ChartType.Line;
flexChart.Series.Add(new C1.WPF.Chart.Series { Binding = "Value1"});
flexChart.Series.Add(new C1.WPF.Chart.Series { Binding = "Value2"});
grid.Children.Add(flexChart); //add the chart to the UI

We will only provide the XAML for the remaining examples, though the corresponding C# code should not be difficult to determine.

How to Create a WPF Stacked Chart

FlexChart for WPF supports stacking most Cartesian chart types by simply setting the Stacked property to None, Stacked, or Stacked100pc. You can stack bar, column, area, line, spline, step, and scatter charts.

<c1:FlexChart ItemsSource="{Binding Data}" 
              BindingX="Category"
              ChartType="Area"
              Stacking="Stacked">
    <c1:Series Binding="Value1" SeriesName="Trucks"/>
    <c1:Series Binding="Value2" SeriesName="Ships"/>
    <c1:Series Binding="Value3" SeriesName="Planes"/>
</c1:FlexChart>

How to Create a WPF Combination Chart

FlexChart for WPF supports combination charts by setting the ChartType property on each series to combine any supported chart types. Series without chart types specified will use the control's chart type.

<c1:FlexChart ItemsSource="{Binding Data}" 
              BindingX="Category"
              ChartType="LineSymbols">
    <c1:Series Binding="Value1" ChartType="Column"/>
    <c1:Series Binding="Value2"/>
</c1:FlexChart>

Specialized Cartesian WPF Chart Types

The FlexChart control also supports specialized Cartesian charts, including Error Bar, Box & Whisker, Waterfall, Gantt, and Bubble. These charts are based on common chart types but provide alternate visualizations, such as binding to a range of values, a third dimension, or some additional metric. A quick rundown of each is listed below.

WPF Bubble Chart

Bubble charts can be created by setting the ChartType to Bubble and providing two comma-separated binding values.

<c1:FlexChart ItemsSource="{Binding Data}" 
              BindingX="Category"
              ChartType="Bubble">
    <c1:Series Binding="Value1, Value2"/>
</c1:FlexChart>

WPF Candlestick Chart

Candlestick and HighLowOpenClose charts can be created by setting the chart type and providing up to four binding values representing the high, low, open, and close values.

<c1:FlexChart ItemsSource="{Binding Data}" 
              BindingX="Date"
              ChartType="Candlestick">
    <c1:Series Binding="HighValue, LowValue, OpenValue, CloseValue"/>
</c1:FlexChart>

WPF Box & Whisker Chart

Box & Whisker charts can be created using a special series class. The C1.WPF.Chart.BoxWhisker class replaces the Series and adds some unique API for displaying outliers, mean marks, and inner points.

<c1:FlexChart ItemsSource="{Binding Data}" 
              BindingX="Category">
    <c1:BoxWhisker Binding="Value1" ShowInnerPoints="True" ShowOutliers="True" ShowMeanLine="True" ShowMeanMarks="True"/>
</c1:FlexChart>

WPF Error Bar Chart

Error Bar charts can be created using a special series class. The C1.WPF.Chart.ErrorBar class replaces the Series and adds some unique API for the error value and bar style.

<c1:FlexChart ItemsSource="{Binding Data}" 
              BindingX="Category"
              ChartType="Line">
    <c1:ErrorBar Binding="Value1" ErrorValue="5">
    <c1:ErrorBar.ErrorBarStyle>
        <c1:ChartStyle Stroke="Black"></c1:ChartStyle>
    </c1:ErrorBar.ErrorBarStyle>
    </c1:ErrorBar>
</c1:FlexChart>

WPF Waterfall Chart

Waterfall charts can be created using a special series class. The C1.WPF.Chart.Waterfall class replaces the series and adds some unique API for the error value and bar style.

<c1:FlexChart ItemsSource="{Binding Data}" 
              BindingX="Category"
              Binding="Value">
    <c1:Waterfall RelativeData="True" ConnectorLines="True" ShowTotal="True" Start="100" 
                  ShowIntermediateTotal="True" IntermediateTotalLabels="Q1,Q2,Q3,Q4"/>
</c1:FlexChart>

FlexPie - WPF Donut and Pie Charts

The FlexPie control renders common radial pie charts. This includes donut and exploded pie variations, as well, by modifying the InnerRadius and Offset properties.

<c1:FlexPie ItemsSource="{Binding Data}"
            Binding="Value"
            BindingName="Category"
            InnerRadius="0.0"
            Offset="0.2" />

FlexRadar - WPF Radar and Polar Charts

The FlexRadar control enables visualization of polar data. It supports radar, polar, and radar-filled chart types. These are ideal to display multivariate data in a circular layout.

<c1:FlexRadar ItemsSource="{Binding Data}" 
              BindingX="Category"
              ChartType="Area">
    <c1:Series Binding="Value1" />
    <c1:Series Binding="Value2" />
</c1:FlexRadar>

You can switch the ChartType to Line, Area, or Scatter to change the display mode. You can also combine chart types and stack series, as we demonstrated earlier for FlexChart.

FinancialChart - WPF Stock and Financial Charts

FinancialChart is a specialized version of FlexChart optimized to visualize stock and trading data. While FlexChart includes the common financial chart types, FinancialChart includes advanced types such as line break, point and figure, renko, Heikin-Ashi, Kagi, and volume chart types.

<c1:FinancialChart ItemsSource="{Binding FinancialData}" 
                   BindingX="Date"
                   Binding="High,Low,Open,Close,Volume"
                   ChartType="PointAndFigure">
    <c1:C1FinancialChart.Options>
        <c1:PointAndFigureOptions BoxSize="1" ReversalAmount="3" />
    </c1:C1FinancialChart.Options>
</c1:FinancialChart>

You can also add technical indicators, such as moving averages and Bollinger Bands, using additional components or series.

Sunburst - Hierarchical Ring Chart

The Sunburst control is a radial visualization for hierarchical data. It displays categories as rings with segments representing subcategories.

<c1:Sunburst ItemsSource="{Binding HierarchicalData}" 
             Binding="Value"
             BindingName="Category"
             ChildItemsPath="Children" />

This chart is perfect for visualizing data with multiple levels of categorization, such as organizational charts or file systems.

TreeMap - WPF Nested Rectangle Charts

The TreeMap control provides a compact visualization of hierarchical data using nested rectangles. Each rectangle's size correlates with a data value.

<c1:TreeMap ItemsSource="{Binding TreeData}"
            Binding="Value"
            BindingName="Category"
            ChildItemsPath="Children" />

Treemaps are useful for analyzing part-to-whole relationships across multiple dimensions.

Heatmap - WPF Grid Charts

The Heatmap control displays a two-dimensional matrix of data as colored rectangles. It's typically used to visualize patterns, correlations, or intensity of data over time and category.

This control is ideal for scenarios like performance monitoring, weather data visualization, or comparing metrics over time. For a complete code example, check out the .NET 8 FlexChart Heatmap C# sample on GitHub.

Ready to check it out? Download ComponentOne Today!

Conclusion

Using ComponentOne's WPF chart controls, you can render over 80 chart types with just a small amount of XAML or code. By understanding which chart component is best suited for your data visualization needs—whether categorical, hierarchical, or financial—you can build robust and interactive dashboards in C#, WPF, WinUI, or MAUI. Whether creating a business intelligence dashboard or a scientific data analysis tool, these controls provide the power and flexibility you need.