Articles in this section
Category / Section

How to create Chart control example in VB .NET WPF?

2 mins read

This article explains how to create a simple chart with header, legendaxis, 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     


Conclusion

I hope you enjoyed learning about how to create Chart control example in VB .NET WPF.

You can refer to our WPF Chart feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Chart documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied