What You Will Need
- ComponentOne Studio Enterprise
- Visual Studio 2022
Controls Referenced
Tutorial Concept
Discover and learn how to configure all 80+ chart types in ComponentOne FlexChart
.NET chart controls are UI libraries for creating and displaying graphs and dashboards in .NET applications. ComponentOne FlexChart provides over 80 different chart types and configurations to help developers visualize data in meaningful ways.
In this blog, we break down and list all 80+ chart types, including:
- .NET Column Charts
- .NET Bar Charts
- .NET Line Charts
- .NET Area Charts
- .NET XY Scatter Charts
- .NET Pie Charts
- .NET Radar and Polar Charts
- .NET Stock Charts
- .NET Statistical Charts
- .NET Triangle Charts
- .NET Map Charts
Understanding Chart Types
How we define chart types can be a bit subjective. There are basic chart types like Bar, Column, Line, Area, and Pie that are pretty clear. However, there are also a variety of features that can create new chart types when combined, such as stacking, symbols, error bars, rotating the axes, etc. For ComponentOne, we use the number of chart types to advertise the breadth of capabilities within the charting tool. We follow Microsoft Office and how they define different chart types.
When you create a chart in Microsoft Excel, you are presented with a screen where each tile represents a separate chart type. Some may consider the list on the left as the chart types, but to switch between options on the right, you have to click “Change Chart Type” from the toolbar. Whichever way you want to define a chart type, this blog provides full clarity on what ComponentOne FlexChart supports and how to implement different types.
How to Get Started with FlexChart—The details below focus only on configuring each chart type. Before configuration, you may want to explore how to initialize and populate the FlexChart control by following these instructions.
.NET Column Charts
Column charts allow you to compare multiple data series over a set number of groups or categories. A column chart displays vertical bars along the X axis, where the height represents the value along the Y axis.
Column Chart Types:
1.Column
2.Column Stacked - Multiple series are stacked rather than displayed side-by-side. This is useful when their values contribute to a grand total.
3.Column Stacked 100% - Stacking by percentage shows how much of the whole is represented by each series.
4.Column Range (Floating Bar) - You can create range bars that have two values (minimum and maximum) to create range columns or floating bars.
How to Configure C# Column Charts with FlexChart
Just set the ChartType and Stacking properties. For floating bars, check out the full sample.
// Set FlexChart to Column chart type
flexChart1.ChartType = C1.Chart.ChartType.Column;
// Set stacking
flexChart1.Stacking = C1.Chart.Stacking.Stacked;
Extra #5 Grouped Column Chart
Grouping allows you to organize the chart series prior to stacking, giving you an additional angle to analyze the data. How: set the StackingGroup and LegendGroup properties on the Chart Series object.
.NET Bar Charts
A bar chart typically refers to a horizontal bar as opposed to a vertical bar. Bar charts offer the same data visualization as column charts but with the axes flipped.
Bar Chart Types:
6.Bar - By default, multiple series' bars will be clustered, so this is sometimes referred to as a “clustered bar.”
7.Bar Stacked
8.Bar Stacked 100%
9.Bar Range (Gantt) - A horizontal floating bar is often referred to as a Gantt chart.
How to Configure C# Bar Charts with FlexChart
Just set the ChartType and Stacking properties. Example:
// Set FlexChart to Bar chart type
flexChart1.ChartType = C1.Chart.ChartType.Bar;
// Set stacking 100%
flexChart1.Stacking = C1.Chart.Stacking.Stacked100;
Extra #10: Tornado Chart
Tornado charts, also known as wing bar or butterfly charts, are a variation of bar charts for comparing two sets of data values in a stack of horizontal bars. You can achieve this chart type by setting the Y-axis origin and using negative values for one series.
.NET Line Charts
Line charts visualize trends in data over time. Line charts are also effective at comparing different series. There are a lot of different line chart variations that we can create by mixing different features, including:
- Symbols - Symbols can be added to line charts to emphasize the actual data values since most of the actual line is extrapolation between data points.
- Spline - Line smoothing, or splines, uses graphic algorithms to smooth and round out the lines. While there are some technical reasons for line smoothing, it’s often chosen simply for its aesthetics.
- Stacked - Similar to bar charts, line chart series can be stacked. This is useful when all series contribute to a grand total (e.g., stack direct and indirect sales series to show the total sales).
- Step - Step line charts help visualize changes at a specific point. Data points are connected through 90-degree vertical and horizontal lines.
Line Chart Types:
How to Configure C# Line Charts with FlexChart
Just set the ChartType and Stacking properties. Example:
// Set FlexChart to Spline with Symbols chart type
flexChart1.ChartType = C1.Chart.ChartType.SplineSymbols;
// Enable stacking
flexChart1.Stacking = C1.Chart.Stacking.Stacked;
Extra #29 Rotated Line Charts
Bar charts are just flipped column charts and are considered to be a different chart type. Well, you can also flip the axes to display a vertical or rotated line chart. Vertical line charts have a surprising number of use cases!
Extra #30 Line Segment Chart
Typically, line charts are continuous even when there is no complete data between points. A segment line chart is one that displays gaps where data is missing, thus making it a unique and often useful line chart type. FlexChart supports line segment charts by setting the InterpolateNulls property to false.
.NET Area Charts
Area charts are similar to line charts but fill in the area below the line to demonstrate trends across time or categories. Area chart features include both bar and line chart features, like Line Smoothing (Spline), Step, Stacking, Vertical (Rotate), and Range.
Area Chart Types:
How to Configure C# Area Charts with FlexChart
Just set the ChartType and Stacking properties. To rotate, set the Rotated property. Example:
// Set FlexChart to Area chart type
flexChart1.ChartType = C1.Chart.ChartType.Area;
// Rotate the chart
flexChart1.Rotated = true;
Extra #46 Streamgraph Chart
A streamgraph chart is basically a stacked area range chart centered on a horizontal axis. You can create this specific visualization with FlexChart by adding a transparent placeholder series in the chart. To learn more, check out How to Create a C# .NET Streamgraph with FlexChart.
.NET XY Scatter Charts
XY Scatter plot charts visualize the correlation between data points and a set of numerical data along the X and Y axes. Scatter point charts allow you to plot irregular data as well as three dimensions with bubble charts. These charts are commonly used in mathematical and scientific applications.
XY Scatter Chart Types:
47.XY Scatter Point
48.XY Scatter/Point Stacked
49.XY Scatter Line with Symbols - Connecting the points in a scatter chart does not show trends but helps visualize the order in which the data points are plotted.
50.Bubble - You can swap out standard symbols for “bubbles,” which can vary in size to visualize a third (Z) value.
How to Configure C# XY Scatter Charts
XY Scatter charts need two data-bound values to be plotted: X and Y. A third bound value is required for bubble charts. The data source should support this model.
// configure XY scatter plot
flexChart1.ChartType = ChartType.Scatter;
flexChart1.BindingX = "Age";
Series ySeries = new Series { Binding = "Amount" };
flexChart1.Series.Add(ySeries);
// configure Bubble chart
flexChart1.BindingX = "Age";
flexChart1.Options.BubbleMaxSize = 60;
flexChart1.Options.BubbleMinSize = 10;
Series yzSeries = new Series { Binding = "Amount,Return" };
flexChart1.Series.Add(yzSeries);
Extra #51 Quadrant Chart
A quadrant chart is a very specific XY Scatter Plot in which there are four zones or “quadrants.” These types of charts are useful for statistics. You can configure this type of chart in FlexChart by moving the axis Origins based on the data set.
flexChart1.AxisY.Origin = 5;
flexChart1.AxisX.Origin = 135;
.NET Pie Charts
C# .NET pie charts show how parts of a whole add up to 100%. A hierarchical pie chart is known as a “sunburst” chart. You can also offset slices to create an exploded pie chart.
Pie Chart Types:
52.Pie
53.Donut
54.Sunburst
55.Sunburst Donut
How to Configure C# .NET Pie Charts
For a C# .NET Pie chart, you should use the FlexPie control. Instead of a BindingX property, there is a BindingName property, which is used to bind the legend/categories. The InnerRadius property allows you to create a donut chart that is technically no different from a regular pie chart.
C1.Win.Chart.FlexPie flexPie1 = new C1.Win.Chart.FlexPie();
flexPie1.Binding = "Value";
flexPie1.BindingName = "Quarter";
For a C# .NET Sunburst chart, you should use the Sunburst control. It also uses a BindingName property, like FlexPie, but supports multiple categories to create the hierarchical binding.
C1.Win.Chart.Sunburst sunburst1 = new C1.Win.Chart.Sunburst();
sunburst1.Binding = "Value";
sunburst1.BindingName = "Year, Quarter, Month";
Extra #56 Multiple Pie Chart
A pie chart typically displays one series, but you can visualize multiple series as a multiple pie chart. A multiple pie chart basically repeats a single pie for each series while sharing a common data source and legend. This is supported through FlexPie by providing multiple bound series to the Binding property.
C1.Win.Chart.FlexPie flexPie1 = new C1.Win.Chart.FlexPie();
flexPie1.Binding = "Q1, Q2, Q3";
flexPie1.BindingName = "Company";
.NET Radar and Polar Charts
Display multivariate observations with an arbitrary number of variables using radial radar and polar charts. The difference is that radar charts use axes that represent groups or categories, whereas polar charts display values on the basis of angles (0-360 degrees). Polar area charts are also known as Coxcomb or Rose charts.
Radial Chart Types:
How to Configure C# .NET Radar Charts
For a C# .NET Radar or Polar chart, you should use the FlexRadar control. Instead of a BindingX property, there is a BindingName property, which is used to bind the legend/categories.
var flexRadar1 = new C1.Win.Chart.FlexRadar;
flexRadar1.BindingX = "Name";
Series budget = new Series() { Binding = "Sales", Name = "Revenue" };
Series expenditure = new Series() { Binding = "Expenses", Name = "Expenses" };
flexRadar1.Series.Add(budget);
flexRadar1.Series.Add(expenditure);
Extra #69 Windrose Chart
A windrose chart is a fancy name for a column radar or polar chart. FlexRadar for ASP.NET MVC supports the column chart type. Check out a web demo.
.NET Stock Charts
Stock charts provide additional financial-specific chart types in addition to standard line and bar charts. The candlestick and high-low-open-close charts display the stock prices for each day in the series. These charts illustrate movements in the price of a financial instrument over time.
Stock Chart Types:
70.Candlestick
71.High-Low-Open-Close
How to Configure C# Stock Charts with FlexChart
You can use the FlexChart control for these charts and just set the ChartType property. Note: The Series binding should include up to four values representing h,l,o, and c.
// Set FlexChart to Candlestick chart type
flexChart1.ChartType = C1.Chart.ChartType.Candlestick;
var s = new Series{ Binding = "High,Low,Open,Close" };
flexChart1.Series.Add(s);
Extra #72 High-Low Chart
The “HighLowOpenClose” chart type also supports a subset of High-Low or even High-Low-Open. If you set the series Binding to just two values, you will get a High-Low chart. This displays a vertical bar visualizing the two values.
.NET Statistical Charts
A statistical chart type builds upon a common chart type but adds some additional embellishment for specific use cases.
Statistical Chart Types:
73.Box & Whisker - Graphically depict groups of numerical data through their quartile, mean, median, and outliers.
74.Error Bar - Identify margins of error and standard deviations at a glance. They can be shown as a standard error amount, a percentage, or a standard deviation.
75.Waterfall - Better understand the cumulative effect of sequentially introduced positive or negative values. Optionally, display auto-calculated intermediate totals in the waterfall chart.
76.BreakEven - Shows the sales volume level at which total costs equal sales. The chart plots revenue, fixed costs, and variable costs on the vertical axis and plots volume on the horizontal axis.
77.Histogram - Consists of rectangles whose area is proportional to the frequency of a variable and whose width is equal to the class interval.
78.Ranged Histogram - A binned histogram where you define how each bucket range is measured.
How to Configure C# Stat Charts with FlexChart
Box & Whisker, Error Bar, Waterfall, and BreakEven are specialized series classes in FlexChart. You create them just as you would any series and add them to the chart’s Series collection. Each class has its own unique properties to set, such as IntermediateTotalPositions for the Waterfall class.
// Add Waterfall series
var waterfall = new C1.Win.Chart.Waterfall() {Binding="PChange", Name = "Increment,Decrement,Total"};
waterfall.IntermediateTotalLabels = new string[] { "Q1", "Q2", "Q3", "Q4" };
waterfall.IntermediateTotalPositions = new int[] { 3, 6, 9, 12 };
flexChart1.Series.Add(waterfall);
Histogram and Ranged Histogram are built-in chart types plus a specialized Histogram series class.
// Set FlexChart to Histogram chart type
flexChart1.ChartType = ChartType.Histogram;
var histogramSeries = new C1.Win.Chart.Histogram(){ Binding = "X", Name = "Frequency", BinWidth = 0.2 };
flexChart1.Series.Add(histogramSeries);
For the other stat charts, see the documentation.
Extra #79 Pareto Chart
Pareto charts summarize the data in ranking order from the most frequent to the least. These charts consist of a histogram bar and a line chart that plots the cumulative total percentage of frequencies. This is also an example of a Combination chart.
.NET Triangle Charts
A triangle chart is similar to a pie chart, but it also visualizes a specific order in which the categories take place. For example, a customer acquisition chart would be nicely displayed in a funnel or pyramid chart.
Triangle Chart Types:
80.Funnel
81.Funnel Rectangle - Also known as a stacked bar chart.
How to Configure C# Triangle Charts with FlexChart
Just set the ChartType property on the FlexChart control.
// Set chart to Funnel Rectangle
flexChart1.ChartType = ChartType.Funnel;
flexChart1.Options.FunnelType = C1.Win.Chart.FunnelChartType.Rectangle;
Extra #82 Pyramid Chart
While the pyramid chart is not a built-in chart type of FlexChart, it can be achieved by customizing the Funnel neck width and reversing the axes. Learn more here: How to Create a C# .NET Pyramid Chart with FlexChart.
.NET Map Charts
Common map charts include TreeMaps and Heatmaps. Treemaps display hierarchical (tree-structured) data as a set of nested rectangles. A heatmap is a colorful, 2-D data visualization technique that represents the magnitude of individual values within a dataset by using colors.
Map Chart Types:
83.TreeMap (Squarified) - A charting algorithm configures the rectangles into a “squarified” view.
84.Vertical TreeMap
85.Horizontal TreeMap
86.Heatmap (Discrete)
87.Heatmap (Gradient)
88.Heatmap (Color Axis)
How to Configure C# Map Charts with FlexChart
To create a TreeMap chart, you should use the separate TreeMap control.
// Set chart to Horizontal TreeMap Rectangle
var treeMap = new C1.Win.Chart.TreeMap;
treeMap.ChartType = TreeMapType.Horizontal;
treeMap.Binding = "CurrentSales";
treeMap.BindingName = "Type";
treeMap.ChildItemsPath = "Items";
treeMap.DataSource = GetTreeMapData();
treeMap.MaxDepth = 2;
To create a Heatmap, use the FlexChart control by adding a Heatmap series. Learn more here.
Additional Charts (100+) with ComponentOne
With multiple Y axes and multiple stacked plot areas, the possibilities are endless! Combination charts allow you to combine multiple, and sometimes different, chart types into the same plot. With FlexChart, you can set the Chart Type at the control level or the series level. This allows you to combine different Cartesian chart types into a single FlexChart plot.
More Data Visualization UI Controls
ComponentOne offers several other data visualization controls related to charts.
- Financial Chart - The ComponentOne FinancialChart includes nine additional chart types: Heiken-Ashi, Renko, Kagi, Line Break, Point and Figure, Column Volume, Equi Volume, Candle Volume, and Arms Candle Volume.
- Sparkline - The lighter and simpler Sparkline control can display line, column, and win-loss charts in a smaller space.
- Gauges - Help visualize numeric values in eye-catching ways with a flexible gauge control. Create radial, linear, and bulletgraph gauges.
- Maps - Visualize data geographically on a map with Choropleth and point maps.
- GanttView - Provide users with a Microsoft project-like experience for project schedule management with ComponentOne GanttView.
- PivotChart - Visualize pivot table data in a grouped chart with FlexPivot.
Top comments (0)