# Getting Started with WinUI Chart

This guide provides the information you need to start using the Telerik UI for WinUI Chart by adding the component to your project.

At the end, you will be able to achieve the following result.

![WinUI RadChart BarSeries](https://www.telerik.com/winui/documentation/assets/edc46edd48ebfdf97390532ba905a1c8/radchart-getting-started-barseries.png)

## Prerequisites

Before adding the Badge, you need to:

1. [Set up your WinUI project](https://www.telerik.com/winui/documentation/installation-and-deployment/systemrequirements).

2. Create your Telerik UI for WinUI application and install the Telerik UI for WinUI components depending on the required installation approach:

   * [Getting Started with NuGet](https://www.telerik.com/winui/documentation/getting-started/first-steps-nuget#step-2-create-the-winui-application)

   * [Getting Started with the MSI file](https://www.telerik.com/winui/documentation/getting-started/first-steps-msi#step-2-create-the-winui-application)

   * [Getting Started with the ZIP file](https://www.telerik.com/winui/documentation/getting-started/first-steps-zip#step-2-create-the-winui-application)

   * [Getting Started with the Telerik UI Visual Studio Extension](https://www.telerik.com/winui/documentation/getting-started/first-steps-vsextension#step-2-create-the-winui-application)

## Add the Assembly References

To use the Chart components, add references to `Telerik.WinUI.Controls.dll` and `Telerik.Licensing.Runtime.dll`.

## Define the Component

The RadChart suite comes with [several charting components](https://www.telerik.com/winui/documentation/controls/radchart/chart-types) suitable for different visualizations - Cartesian, pie and polar. The following example demonstrates how to define a `RadCartesianChart` component.
You can access the Cartesian chart through the `xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart"` alias that points to the `Telerik.UI.Xaml.Controls.Chart` namespace.

#### **Defining a RadCartesianChart**

```XAML
<Grid xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart">
	<telerikChart:RadCartesianChart />
</Grid>
```

**RadCartesianChart without its axes set**

![WinUI RadChart RadCartesianChart without its axes set](https://www.telerik.com/winui/documentation/assets/6fa57722b6ecdcae94d349ee16a5bc28/radchart-no-axes.png)

The Cartesian coordinate system is constructed using horizontal and vertical axes. The RadChart suite exposes different types of axes that can be combined horizontally and vertically in different ways based on the scenario. You can find more information about them in our [Axis](https://www.telerik.com/winui/documentation/controls/radchart/axes/overview) article.

## Define the Axes

The following example demonstrates a common scenario with a `LinearAxis` as the vertical axis of the chart and a `CategoricalAxis` as horizontal axis of the chart.

#### **Defining the horizontal and vertical axes**

```XAML
<telerikChart:RadCartesianChart>
	<telerikChart:RadCartesianChart.HorizontalAxis>
		<telerikChart:CategoricalAxis/>
	</telerikChart:RadCartesianChart.HorizontalAxis>
	<telerikChart:RadCartesianChart.VerticalAxis>
		<telerikChart:LinearAxis/>
	</telerikChart:RadCartesianChart.VerticalAxis>
</telerikChart:RadCartesianChart>
```

In the cases where no series are defined in the definition of the charting components, a message will be displayed to prompt you to enter a series.

**RadCartesianChart without any series added in its Series collection**

![WinUI RadChart RadCartesianChart without any series added in its Series collection](https://www.telerik.com/winui/documentation/assets/ff679451b78fd797d91311b8803fba95/radchart-no-series.png)

## Define a Series

The Chart exposes a large variety of series that can be used in different scenarios. You can take a look at the [Series Overview](https://www.telerik.com/winui/documentation/controls/radchart/series/overview) article to find out more about the available types.

The following example shows how to to add a [BarSeries]() and populate its `DataPoints` collection with `CategoricalDataPoint` objects. This will generate a set of bars which height is determined by the `Value` property of the data point.

#### **Defining BarSeries**

```XAML
<Grid xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart"
	  xmlns:telerikCharting="using:Telerik.Charting">
	<telerikChart:RadCartesianChart>
		<telerikChart:RadCartesianChart.HorizontalAxis>
			<telerikChart:CategoricalAxis/>
		</telerikChart:RadCartesianChart.HorizontalAxis>
		<telerikChart:RadCartesianChart.VerticalAxis>
			<telerikChart:LinearAxis/>
		</telerikChart:RadCartesianChart.VerticalAxis>

		<telerikChart:BarSeries>
			<telerikChart:BarSeries.DataPoints>
				<telerikCharting:CategoricalDataPoint Category="Apples" Value="20"/>
				<telerikCharting:CategoricalDataPoint Category="Bananas" Value="28"/>
				<telerikCharting:CategoricalDataPoint Category="Oranges" Value="17"/>
				<telerikCharting:CategoricalDataPoint Category="Strawberries" Value="30"/>
			</telerikChart:BarSeries.DataPoints>
		</telerikChart:BarSeries>
	</telerikChart:RadCartesianChart>
</Grid>
```

**BarSeries**\
![WinUI RadChart BarSeries](https://www.telerik.com/winui/documentation/assets/edc46edd48ebfdf97390532ba905a1c8/radchart-getting-started-barseries.png)

## Telerik UI for WinUI Learning Resources

* [Telerik UI for WinUI Chart Component](https://www.telerik.com/winui/chart)
* [Getting Started with Telerik UI for WinUI Components](https://www.telerik.com/winui/documentation/getting-started/first-steps-nuget)
* [Telerik UI for WinUI Installation](https://www.telerik.com/winui/documentation/installation-and-deployment/installing-which-file-do-i-need)
* [Telerik UI for WinUI Examples](https://www.telerik.com/winui/documentation/examples/demos-app)
* [Telerik UI for WinUI Accessibility](https://www.telerik.com/winui/documentation/common/accessibility)
* [Telerik UI for WinUI License Agreement](https://www.telerik.com/purchase/license-agreement/winui)

## See Also

* [Axes](https://www.telerik.com/winui/documentation/controls/radchart/axes/overview)
* [RadLegendControl](https://www.telerik.com/winui/documentation/controls/radchart/legend-control/legendcontrol-overview)
* [Annotations](https://www.telerik.com/winui/documentation/controls/radchart/annotations/chart-overview)