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)
Output
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 forums, Direct-Trac, or feedback portal. We are always happy to assist you!
