We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to create Chart control example in VB .NET WPF


This article explains how to create a simple chart with header, legend, axis, and series in VB.Net WPF with the following steps.

 

Step 1:

 

Create a DataModel class for the chart.

 

Public Class Person
 
    Public Property Name As String
    Public Property Height As Double
 
End Class

 

Step 2:

 

Create a ViewModel class with the DataModel collection to initialize datapoints for series.

 

Public Class ViewModel
 
    Public Property Data As List(Of Person)
 
    Public Sub New()
        Data = New List(Of Person)() From
        {
            New Person With {.Name = "David", .Height = 180},
            New Person With {.Name = "Michael", .Height = 170},
            New Person With {.Name = "Steve", .Height = 160},
            New Person With {.Name = "Joel", .Height = 182}
        }
    End Sub
End Class

 

Step 3:

 

Initialize the chart with title by using the Header property of the chart and set the DataContext for the chart as ViewModel.

 

Dim chart As New SfChart()
chart.Header = "Chart"
chart.DataContext = New ViewModel()

 

Step 4:

 

Initialize the required axes by using PrimaryAxis and SecondaryAxis properties.

 

Dim primaryAxis As New CategoryAxis()
primaryAxis.Header = "Name"
primaryAxis.FontSize = 14
chart.PrimaryAxis = primaryAxis
 
Dim secondaryAxis As New NumericalAxis()
secondaryAxis.Header = "Height(in cm)"
secondaryAxis.FontSize = 14
chart.SecondaryAxis = secondaryAxis

 

Step 5:

 

Add the legend by using the Legend property of the chart. In addition, you need to set the label for each series using the ChartSeries Label property, which will be displayed in the corresponding legend item.

 

chart.Legend = New ChartLegend()
 
Dim series As New ColumnSeries()
series.Label = "Heights"

 

Step 6:

 

Add the required type of series to the chart and set the populated data collection to the series using the ItemsSource property of the chart series. Then, map the XBindingPath and YBindingPath properties of chart series to the required properties in the model to retrieve the data from the model and render the chart.

 

Dim series As New ColumnSeries()
series.ItemsSource = CType(chart.DataContext, ViewModel).Data
series.XBindingPath = "Name"
series.YBindingPath = "Height"
series.Label = "Heights"
chart.Series.Add(series)

 

The following code snippet gives you the consolidated configuration of all of the above codes to create a simple chart.

 

Code snippet

'Defining the chart.
Dim chart As New SfChart()
 
'Setting DataContext for the chart.
chart.DataContext = New ViewModel()
 
'Adding Title to the chart.
chart.Header = "Chart"
 
'Adding Legend to the chart.
chart.Legend = New ChartLegend()
 
'Adding horizontal axis to the chart.
Dim primaryAxis As New CategoryAxis()
primaryAxis.Header = "Name"
primaryAxis.FontSize = 14
chart.PrimaryAxis = primaryAxis
 
'Adding vertical axis to the chart.
Dim secondaryAxis As New NumericalAxis()
secondaryAxis.Header = "Height(in cm)"
secondaryAxis.FontSize = 14
chart.SecondaryAxis = secondaryAxis
 
'Adding Series to the Chart Series Collection.
Dim series As New ColumnSeries()
series.ItemsSource = CType(chart.DataContext, ViewModel).Data
series.XBindingPath = "Name"
series.YBindingPath = "Height"
series.Label = "Heights"
chart.Series.Add(series)

 

View the sample in GitHub.

 

Output

Create Simple Chart in WPF VB.Net

Take a moment to peruse the documentation, where you can find the brief description about creation of chart.

See also

How to create chart in WPF application using XAML

How to create chart in C# WPF

How to create pie chart in C# WPF

How to create chart in VB .NET Windows Forms

How to create chart in Xamarin.Forms

 

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile