Get Started with FlexChart, a .NET Chart Control for WinForms and UWP

ComponentOne Studio's new extensible .NET chart control, available in beta for both WinForms and UWP, blends a rare flavor of usability, flexibility and great performance with a rich out-of-the-box feature set that will speed up your development.

Download the sample: WinForms | Download C1Studio

Features include powerful, flexible data binding; dozens of chart types, series toggling; custom palettes; auxiliary axes; tooltip customization. DirectX rendering makes jitter and pixelated edges a thing of the past, and the easy-to-use API means you'll be able to extend and customize the control with a small learning curve. If C1Chart was all about performance, FlexChart is all about usability and performance! In this blog you'll learn how to:

Add a FlexChart to your App
Set up chart types
Set up multiple axes
Customize your chart with headers footers, dynamic binding, and more

Let's look at how to set up a simple chart with FlexChart.

Four Steps to .NET Chart Setup

Place the FlexChart control on your form.

Set the chart's DataSource property:

flexChart.DataSource = CategoricalPoint.GetCategoricalData();

Set the chart's binding to name of the property:
```
flexChart.BindingX = "Name";
```
Add one or more series to chart's Series array, setting their binding property:
```
flexChart.Series.Add(new Series { Binding = "Sales", Name = "Sales" });
```

That's it! Preview your chart: Add simple chart to application

Set up chart types

FlexChart supports different chart types on the chart and series levels. Apart from basic charts, FlexChart support complex charts like Scatter, Area, Spline, Bubble, Candlestick, HighLowOpenClose. There are three properties which helps you customize chart type on chart level: ChartType, Stacking, and Rotated:


flexChart.ChartType = C1.Chart.ChartType.Bar;  
flexChart.Stacking = C1.Chart.Stacking.Stacked;  
flexChart.Rotated = false;

Series level setup could be done via the following lines of code:

flexChart.Series.Add(new Series { Name = "Expenses", Binding ="Expense",ChartType = ChartType.LineSymbols });

Set up Chart types in FlexChart By combining unlimited number of series you can accomplish any of your business use cases.

Set multiple axes

There may be times when you need to chart complex data that requires multiple axes. Multiple axes let you plot multidimensional values on a two-dimensional chart. With FlexChart, all you need is to bind the series with an axis:

 flexChart.Series[1].AxisY = new Axis { Position = Position. Right };

Add multiple axes to FlexChart

Customizing your chart

There are various features which make FlexChart richer. Here's how we use some of them :

LegendToggle

flexChart.LegendToggle = true;

Selection mode

flexChart.SelectionMode = ChartSelectionMode.Point;  
flexChart.SelectionStyle.StrokeColor = Color.Red;  
flexChart.SelectionStyle.StrokeWidth = 3;

Toggle selection mode in FlexChart

Header/Footer texts

flexChart.Header.Content = "Getting Started With FlexChart";  
flexChart.Footer.Content = "copyright © GrapeCity, inc.";

Axis titles

flexChart.Series[1].AxisY.Title = "Expenses";  
flexChart.AxisY.Title = "Sales";

Legend positioning

flexChart.Legend.Position = Position.Bottom;

Customize header, footer, and more

Dynamic Binding :

With the introduction of DirectX rendering, you can expect smooth rendering capabilities of FlexChart. This rendering capability is instrumental in dynamic binding where data change in real-time. So if you've ever struggled with desktop apps which take real-time data like Stock dashboards, that problem has been resolved with FlexChart.