Step 1: Adding FlexChart to the Project
In This Topic
This step enables you to create a simple chart application using FlexChart for WPF. When you add the FlexChart control to your Visual Studio project, you would have a functional column chart with dummy data.
Perform the following steps:
- Create a new WPF Application (.NET Framework/.NET Core) for .NET Framework version and NET versions respectively in Visual Studio.
- Select File | New | Project. The New Project dialog box appears.
- In the New Project dialog box, select a language in the left-hand pane, and then select WPF Application (.NET Framework/.NET Core) from the list of applications in the center pane.
- Give your application a Name, and then select OK.
- Open the MainWindow.xaml file.
- Place your cursor between the <Grid> </Grid> tags within either your Window or your UserControl, depending on the type of application you've created.
- Locate the FlexChart control in Visual Studio's ToolBox. Double-click the control to add it to your application. The following reference dll or Nuget Package is added to the project:
C1.WPF.FlexChart for .NET Framework version or C1.WPF.Chart for .NET version.
If the reference is not added, you need to add the same manually - right-click the References folder in the Solution Explorer and select Add | New Reference.
The XAML markup resembles the following:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
x:Class="QuickStart.MainWindow"
Title="MainWindow" Height="886.465" Width="1182.397">
<Grid Margin="46,0,0,12">
<c1:C1FlexChart x:Name="flexChart"
HorizontalAlignment="Left"
Height="377"
VerticalAlignment="Top"
Width="702"
Margin="130,179,0,0">
<c1:Series AxisX="{x:Null}"
AxisY="{x:Null}"
Binding="Y"
BindingX="X"
Chart="{x:Null}"
SeriesName="Series 1">
<c1:Series.ItemsSource>
<PointCollection>1,8 2,12 3,10 4,12 5,15</PointCollection>
</c1:Series.ItemsSource>
</c1:Series>
<c1:Series AxisX="{x:Null}"
AxisY="{x:Null}"
Binding="Y"
BindingX="X"
Chart="{x:Null}"
SeriesName="Series 2">
<c1:Series.ItemsSource>
<PointCollection>1,10 2,16 3,17 4,15 5,23</PointCollection>
</c1:Series.ItemsSource>
</c1:Series>
<c1:Series AxisX="{x:Null}"
AxisY="{x:Null}"
Binding="Y"
BindingX="X"
Chart="{x:Null}"
SeriesName="Series 3">
<c1:Series.ItemsSource>
<PointCollection>1,16 2,19 3,15 4,22 5,18</PointCollection>
</c1:Series.ItemsSource>
</c1:Series>
</c1:C1FlexChart>
</Grid>
</Window>
- Run the application.
The output appears as shown in figure below.
You have successfully created a WPF Application containing the FlexChart control.