--- title: "Creating a .NET MAUI Radar Chart to Visualize Wind Directions" published_at: "2024-08-14T13:03:30+00:00" modified_at: "2026-01-12T12:55:46+00:00" url: "https://www.syncfusion.com/blogs/post/maui-radar-chart-visualize-wind-direction" excerpt: "This blog explains how to visualize the wind directions in major cities by creating a .NET MAUI Radar Chart." taxonomy_category: - ".NET MAUI" - "Chart" - "Chart of the week" - "Data Visualization" - "Desktop" - "Syncfusion" - "UI" taxonomy_post_tag: - ".NET MAUI" - "Chart" - "Data Visualization" - "desktop" - "MAUI" - "Mobile" - "UI" --- [Chart of the week](https://www.syncfusion.com/blogs/category/chart-of-the-week) # Creating a .NET MAUI Radar Chart to Visualize Wind Directions [Saravanan Madheswaran](https://www.syncfusion.com/blogs/author/saravanan-madheswaran) ![Chart of the Week: Creating a .NET MAUI Radar Chart to Visualize Wind Directions](https://www.syncfusion.com/blogs/wp-content/uploads/2024/08/Chart-of-the-Week-Creating-a-.NET-MAUI-Radar-Chart-to-Visualize-Wind-Directions.jpeg) **TL;DR:** Explore how to create a .NET MAUI Radar Chart to visualize wind directions in major cities! Get insights on data preparation, chart configuration, and customization for a powerful data visualization tool. Check out the full guide on our GitHub! Welcome to the **Chart of the Week** blog series! Today, we’ll use a radar chart to visualize wind direction patterns in major cities worldwide. To design the radar chart, we’ll use the [Syncfusion .NET MAUI Polar Charts](https://www.syncfusion.com/maui-controls/maui-polar-charts) , which allows us to create both polar and radar charts. A radar chart is also known as a spider chart, web chart, or star chart. It is a powerful visualization tool for multi-dimensional data and is commonly used to showcase complex relationships between multiple variables. It plots data points on a polar coordinate system, with each point representing a single data set. This type of chart is beneficial for comparing multiple categories or dimensions, making it an excellent choice for analyzing wind direction patterns. When visualizing data with many categories, the legend can become crowded and difficult to read. Wrapping the legend items ensures that all categories are clearly displayed, making the chart easier to understand and interpret. Hence, we can use the radar chart wrapped with legend support to visualize the wind direction in cities around the world, comparing the patterns and strengths of different wind directions in each location. With this, we can better understand the complex relationships between wind patterns. This will also help us in urban planning and make better decisions that benefit the environment and the public. The following image demonstrates the chart that we intend to construct.![Visualizing wind directions in major cities using .NET MAUI Radar Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/08/Visualizing-wind-directions-in-major-cities-using-.NET-MAUI-Radar-Chart.png) Visualizing wind directions in major cities using .NET MAUI Radar Chart ## Step 1: Collecting the wind direction data For this chart, we’ll use wind direction data from four cities: [Brasilia](https://www.weatheronline.in/weather/maps/city?FMM=1&FYY=2024&LMM=6&LYY=2024&WMO=86715&CONT=samk®ION=0021&LAND=BZ&ART=WDR&R=0&NOREGION=1&LEVEL=162&LANG=in&MOD=tab) , [Tokyo](https://www.weatheronline.in/weather/maps/city?FMM=1&FYY=2024&LMM=6&LYY=2024&WMO=47662&CONT=asie®ION=0026&LAND=JP&ART=WDR&R=0&NOREGION=1&LEVEL=162&LANG=in&MOD=tab) , [London](https://www.weatheronline.in/UK/London.htm) , and [Nairobi](https://www.weatheronline.in/weather/maps/city?FMM=1&FYY=2024&LMM=6&LYY=2024&WMO=63740&CONT=afri®ION=0009&LAND=KN&ART=WDR&R=0&NOREGION=1&LEVEL=162&LANG=in&MOD=tab) . We’ll collect the data for each city and store them in a list of **ClimateData** objects.## Step 2: Preparing data for the chart Let’s define the **ClimateData** class with the following properties:- ** Direction:** Stores the wind direction (e.g., North, South, East, West). - **DirectionShortForm:** Stores the abbreviated form of the wind direction (e.g., ** N**, ** NE**, ** E**, ** SE**). - **Brasilia, Tokyo, London, Nairobi:** The wind speed values for each city. - **SolidColorBrush:** Sets chart series color to the tooltip. ``` public class ClimateData { public string? Direction { get; set; } public string? DirectionShortForm { get; set; } public double Brasilia { get; set; } public double Tokyo { get; set; } public double London { get; set; } public double Nairobi { get; set; } public Brush? SolidColorBrush { get; set; } } ``` Then, define a **ViewModel** class that encapsulates the climate data and provides a convenient way to access it in the view. This class is used to hold the climate data for four cities: Brasilia, Tokyo, London, and Nairobi, using the following properties:1. ** BrasiliaData**: A list of ** ClimateData** objects containing the wind direction data for Brasilia (Capital of Brazil). 2. **TokyoData**: A list of ** ClimateData** objects containing the wind direction data for Tokyo (Capital of Japan). 3. **LondonData**: A list of ** ClimateData** objects containing the wind direction data for London (Capital of the United Kingdom). 4. **NairobiData**: A list of ** ClimateData** objects containing the wind direction data for Nairobi (Capital of Kenya). Refer to the following code example.``` public class ViewModel { public List BrasiliaData { get; set; } public List TokyoData { get; set; } public List LondonData { get; set; } public List NairobiData { get; set; } public ViewModel() { BrasiliaData = new List { new() { Direction = "North", DirectionShortForm = "N", Brasilia = 11 }, new() { Direction = "NorthEast", DirectionShortForm = "NE", Brasilia = 9 }, new() { Direction = "East", DirectionShortForm = "E", Brasilia = 36 }, new() { Direction = "SouthEast", DirectionShortForm = "SE", Brasilia = 15 }, new() { Direction = "South", DirectionShortForm = "S", Brasilia = 7 }, new() { Direction = "SouthWest", DirectionShortForm = "SW", Brasilia = 3 }, new() { Direction = "West", DirectionShortForm = "W", Brasilia = 6 }, new() { Direction = "NorthWest", DirectionShortForm = "NW", Brasilia = 12 } }; var brasiliaBrush = new SolidColorBrush(Color.FromArgb("#A32FFF")); BrasiliaData.ForEach(data => data.SolidColorBrush = brasiliaBrush); TokyoData = new List { new() { Direction = "North", DirectionShortForm = "N", Tokyo = 17 }, new() { Direction = "NorthEast", DirectionShortForm = "NE", Tokyo = 10 }, new() { Direction = "East", DirectionShortForm = "E", Tokyo = 5 }, new() { Direction = "SouthEast", DirectionShortForm = "SE", Tokyo = 9 }, new() { Direction = "South", DirectionShortForm = "S", Tokyo = 23 }, new() { Direction = "SouthWest", DirectionShortForm = "SW", Tokyo = 3 }, new() { Direction = "West", DirectionShortForm = "W", Tokyo = 4 }, new() { Direction = "NorthWest", DirectionShortForm = "NW", Tokyo = 28 } }; var tokyoBrush = new SolidColorBrush(Color.FromArgb("#A4B500")); TokyoData.ForEach(data => data.SolidColorBrush = tokyoBrush); LondonData = new List { new() { Direction = "North", DirectionShortForm = "N", London = 11 }, new() { Direction = "NorthEast", DirectionShortForm = "NE", London = 8 }, new() { Direction = "East", DirectionShortForm = "E", London = 6 }, new() { Direction = "SouthEast", DirectionShortForm = "SE", London = 8 }, new() { Direction = "South", DirectionShortForm = "S", London = 20 }, new() { Direction = "SouthWest", DirectionShortForm = "SW", London = 19 }, new() { Direction = "West", DirectionShortForm = "W", London = 21 }, new() { Direction = "NorthWest", DirectionShortForm = "NW", London = 7 } }; var londonBrush = new SolidColorBrush(Color.FromArgb("#D82591")); LondonData.ForEach(data => data.SolidColorBrush = londonBrush); NairobiData = new List { new() { Direction = "North", DirectionShortForm = "N", Nairobi = 11 }, new() { Direction = "NorthEast", DirectionShortForm = "NE", Nairobi = 32 }, new() { Direction = "East", DirectionShortForm = "E", Nairobi = 19 }, new() { Direction = "SouthEast", DirectionShortForm = "SE", Nairobi = 7 }, new() { Direction = "South", DirectionShortForm = "S", Nairobi = 14 }, new() { Direction = "SouthWest", DirectionShortForm = "SW", Nairobi = 10 }, new() { Direction = "West", DirectionShortForm = "W", Nairobi = 5 }, new() { Direction = "NorthWest", DirectionShortForm = "NW", Nairobi = 3 } }; var nairobiBrush = new SolidColorBrush(Color.FromArgb("#FFCA61")); NairobiData.ForEach(data => data.SolidColorBrush = nairobiBrush); } } ``` ## Step 3: Configure the Syncfusion .NET MAUI Polar Charts As we said in the beginning, to display the radar chart, we are going to use the Syncfusion [.NET MAUI Polar Charts (SfPolarChart)](https://help.syncfusion.com/maui/polar-charts/getting-started) control. This control is a powerful charting component that allows us to create both polar and radar charts. Set the primary axis of the polar chart to be a [CategoryAxis](https://help.syncfusion.com/maui/polar-charts/axis/types#category-axis) . This means that the x-axis values will be categorical labels rather than numerical values. In our case, the category labels will be the wind directions (North, South, East, West). The secondary axis of the polar chart is set to be a [NumericalAxis](https://help.syncfusion.com/maui/polar-charts/axis/types#numerical-axis) . This means that the y-axis values will be numerical values representing the wind speed. We can replicate the **radar**** chart** design by setting the [GridLineType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfPolarChart.html#Syncfusion_Maui_Charts_SfPolarChart_GridLineType) property to **Polygon** on the SfPolarChart. Refer to the following code example.``` ``` ## Step 4: Binding data to the chart Now that we have set up our radar chart, it’s time to add the series to bind the wind direction data for each city. Here, we’ll create four [PolarAreaSeries](https://help.syncfusion.com/maui/polar-charts/polararea) objects, each representing a different city: Brasilia, Tokyo, London, and Nairobi. We’ll use the **ItemsSource** property to bind the series to our ** ClimateData** objects and the ** XBindingPath** property to specify the category axis (in this case, the wind direction). We’ll bind each PolarAreaSeries to a different set of data: ** BrasiliaData, TokyoData, LondonData,** and ** NairobiData.** The ** XBindingPath** property is set to ** DirectionShortForm** for Android and iOS devices and ** Direction** for default devices (Windows and macOS). This ensures that the x-axis labels are displayed correctly across different platforms. The ** YBindingPath** property is set to the corresponding city name (** Brasilia**, ** Tokyo**, ** London**, or ** Nairobi**) to display the y-axis values (Wind speed). Refer to the following code example.``` ……. …….. ``` ## Step 5: Customizing the chart appearance The appearance of a chart can greatly impact its usability and aesthetic appeal. Let’s see how to customize the title, legend, and series appearance in our radar chart.### Customizing the chart title The chart’s title plays a crucial role in providing context to the data being displayed. We can use the **Title** property of the ** SfPolarChart** to set the title for our chart. In this example, we’ll use a ** Grid** layout to place the custom title with an image and description. We’ll also use the ** FontSize** property to set the font size of the labels based on the platform. Refer to the following code example.``` ``` ### Customizing the chart axis Axis customization is a crucial aspect of data visualization, especially when working with radar charts. We can use the primary and secondary axes in the radar chart to display the labels and data points, respectively. Customizing these axes can significantly impact the readability, clarity, and overall effectiveness of the chart. We’ll customize the secondary axis using the following properties:- **Interval:** To set the interval between tick marks on the axis. In this case, it’s set to 10 for Windows and macOS and 15 for Android and iOS devices. - **LabelStyle:** To set the axis labels to display percentage values with no decimal places. - **FontSize:** To set the font size for the axis label as 10 for both Android and iOS devices. Refer to the following code example.``` ........ ........ ``` ### Customizing the chart legend The legend is essential to any chart, as it helps users understand what each series represents. We can customize the legend by setting its [Placement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html#Syncfusion_Maui_Charts_ChartLegend_Placement) , [ItemsLayout](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html#Syncfusion_Maui_Charts_ChartLegend_ItemsLayout) , and [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html#Syncfusion_Maui_Charts_ChartLegend_ItemTemplate) properties. The [ItemsLayout](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html#Syncfusion_Maui_Charts_ChartLegend_ItemsLayout) property allows you to define how individual legend items need to be arranged within the legend. Refer to the following code example.``` ``` In the above code example, we’ve used the **LegendExt** control to customize the legend’s placement and ** ItemsLayout**. We’ve also used a custom [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html#Syncfusion_Maui_Charts_ChartLegend_ItemTemplate) to define how each series should be represented in the legend.**Note:** For more details about the legend wrapping and its customization, refer to the knowledge base article: [How to align the chart legend items in .NET MAUI Circular Charts?](https://support.syncfusion.com/kb/article/16201/how-to-align-the-chart-legend-items-in-net-maui-circular-chart) . ### Customizing the series appearance In the previous section, we’ve customized the chart title and legend. Now, let’s focus on customizing the series in our radar chart. Here, we’ll customize the chart series using the **Opacity**, ** Fill**, and ** Stroke** properties.``` ``` By customizing these properties, we can create a visually appealing and meaningful representation of our data in the radar chart.### Enabling tooltip with ItemTemplate Tooltips provide additional information about a specific data point when the user hovers over it. Here, we’ll create a custom tooltip template that includes an icon, a label with the city name, a separator, and another label for wind direction with the percentage value. To do so, create a custom **DataTemplate** called [TooltipTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_TooltipTemplate) to display tooltips. Then, set the [EnableTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_EnableTooltip) property to **True** on the PolarAreaSeries element to enable tooltips for this series.``` ``` By following these steps, we can create a stunning radar chart with rich visualizations and engaging interactions, making it an effective tool for data analysis and visualization.![Visualizing wind directions in major cities using .NET MAUI Radar Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/08/Visualizing-wind-directions-in-major-cities-using-.NET-MAUI-Radar-Chart.gif) Visualizing wind directions in major cities using .NET MAUI Radar Chart ## GitHub reference For more details, refer to [creating a .NET MAUI Radar Chart to visualize wind directions of major cities GitHub demo](https://github.com/SyncfusionExamples/Creating-a-.NET-MAUI-Radar-Chart-to-Visualize-Wind-Directional-Directions-of--Major-Cities) . [https://www.syncfusion.com/downloads/maui](https://www.syncfusion.com/downloads/maui) ## Conclusion Thanks for reading! In this blog, we’ve seen how to visualize the wind direction pattern of major cities worldwide by creating a [.NET MAUI Radar Chart with interactive features](https://www.syncfusion.com/maui-controls/maui-polar-charts/chart-types/maui-radar-area-chart) . We highly recommend following the steps given in this blog and sharing your feedback in the comments section below. If you need assistance, please do not hesitate to contact us via our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback) . We are always eager to help you!## Related blogs - [Easily Create a Movie Ticket Booking App Using .NET MAUI Popup Control](https://www.syncfusion.com/blogs/post/movie-booking-app-using-maui-popup) - [Chart of the Week: Visualizing Top 25 Largest Countries Using .NET MAUI Column Chart](https://www.syncfusion.com/blogs/post/25-large-countries-maui-column-chart) - [5 Simple Steps to Design a News Feed App with .NET MAUI ListView](https://www.syncfusion.com/blogs/post/news-feed-app-with-maui-listview) - [Easily Bind DataTable and Perform CRUD Actions with .NET MAUI DataGrid](https://www.syncfusion.com/blogs/post/bind-datatable-crud-maui-datagrid)