---
title: "Build a Stunning and Interactive Real-Time Weather Dashboard with .NET MAUI Toolkit"
published_at: "2025-05-28T14:51:48+00:00"
modified_at: "2025-05-28T14:51:54+00:00"
url: "https://www.syncfusion.com/blogs/post/weather-dashboard-dotnet-maui-toolkit"
excerpt: "Learn how to build a real-time weather dashboard with .NET MAUI Toolkit charts and gauges for dynamic data visualization."
taxonomy_category:
  - ".NET MAUI"
  - "Chart"
  - "Chart of the week"
  - "Cross-Platform Development"
  - "Dashboard"
  - "Data Visualization"
  - "Radial Gauge"
taxonomy_post_tag:
  - ".NET MAUI"
  - ".NET MAUI Toolkit"
  - "Charts"
  - "Cross-Platform"
  - "dashboard"
  - "Data Visualization"
  - "Radial Gauge"
  - "segmented control"
  - "Temperature monitor"
---

[Chart of the week](https://www.syncfusion.com/blogs/category/chart-of-the-week)
# Build a Stunning and Interactive Real-Time Weather Dashboard with .NET MAUI Toolkit

[Subash Sorimuthupattaraja](https://www.syncfusion.com/blogs/author/subash-sorimuthupattaraja)

![Build a Stunning and Interactive Real-Time Weather Dashboard with .NET MAUI Toolkit](https://www.syncfusion.com/blogs/wp-content/uploads/2025/05/596_x_334@2x1-2.png)


**TL;DR:** Build a dynamic weather monitoring dashboard with the Syncfusion® .NET MAUI Toolkit. Discover how to set up your project, model weather data, and create interactive visualizations using temperature charts, radial gauges for wind and UV indices, and Segmented Controls for seamless view switching. This guide demonstrates how to deliver real-time, mobile-friendly dashboards using Syncfusion’s powerful UI components.

Welcome to the **Chart of the Week** blog series!

In this blog post, we’ll show you how to build a weather dashboard using the [Syncfusion®.NET MAUI Toolkit](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.html)
. You’ll learn how to visualize real-time weather data and extract meaningful insights using rich charting controls. We’ll also explore how these tools help us better understand weather patterns and trends through interactive, smooth, and responsive visualizations.

## Syncfusion®.NET MAUI Toolkit

The [Syncfusion®.NET MAUI Toolkit](https://www.nuget.org/packages/Syncfusion.Maui.Toolkit/)
 offers a comprehensive suite of tools for building feature-rich applications with interactive data visualizations. It includes a wide variety of UI components, such as charts, segmented control, and other customizable elements. The toolkit also features open-source contributions, providing developers greater flexibility and fostering strong community support.

### Benefits of weather tracking

Weather significantly influences our daily activities, from planning outdoor events to ensuring safety during severe conditions. Visualizing weather data effectively empowers users to make informed decisions with confidence. For instance, temperature changes throughout the day can be visualized using the [SplineSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineSeries.html)
 and [SplineAreaSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineAreaSeries.html)
 available in the [MAUI Toolkit’s SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html)
.

The [SplineSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineSeries.html)
 presents data as smooth curves, while the [SplineAreaSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineAreaSeries.html)
 fills the area beneath the curve, ensuring clarity in the data representation.

The final weather monitoring dashboard below illustrates dynamic, real-time weather tracking using these charts.

![.NET MAUI Weather Dashboard with temperature, wind, UV index, and climate metrics](https://www.syncfusion.com/blogs/wp-content/uploads/2025/05/NET-MAUI-Weather-Dashboard-with-temperature-wind-UV-index-and-climate-metrics-5.png)

Now, let’s explore the steps to build this dashboard!

## Step 1: Configure the .NET MAUI Toolkit

Before creating the weather monitoring dashboard, install the [Syncfusion® .NET MAUI Toolkit](https://www.nuget.org/packages/Syncfusion.Maui.Toolkit/)
 by following the [documentation](https://help.syncfusion.com/maui-toolkit/installation)
.

## Step 2: Prepare the WeatherDataModel

To organize the weather data, define a **WeatherDataModel** class. This model includes properties to track key weather metrics as follows:

- **Temperature:** Captures temperature variations throughout the day.
- **Wind speed and direction:** Helps assess outdoor activities and travel conditions.
- **Feels like temperature:** Reflects the perceived temperature based on humidity and wind.
- **Humidity and dew point:** Indicates the moisture content in the air.
- **UV Index:** Highlights sun exposure risks for better skin protection.

Using this data model, you can visualize weather metrics with chart types like [SplineSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.Spl%0AineSeries.html)
**,**[SplineAreaSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SplineAreaSeries.html)
**,** and [ColumnCharts](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ColumnSeries.html)
**,** provided in the [.NET MAUI Toolkit](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.html)
**.**

Refer to the following code example.

```
public class WeatherDataModel
{
    private float temperature;

    public float Temperature
    {
        get => temperature;
        set
        {
            temperature = Celsius = value;
            Fahrenheit = MathF.Round((value * 9 / 5) + 32, 1);
        }
    }

    public DateTime Time { get; set; }

    public float Celsius { get; set; }

    public float Fahrenheit { get; set; }

    public float FeelsLike { get; set; }

    public float FeelsLikeF => MathF.Round(Fahrenheit + random.Next(5, 11) + random.NextSingle(), 1);

    public float WindSpeed { get; set; }

    public float WindDirection { get; set; }

    public float Feelslike { get; set; }

    public float Humidity { get; set; }

    public float UVIndex { get; set; }

    public float MaxTemperature { get; set; }

    public float MinTemperature { get; set; }

    public float Dew { get; set; }

    public string? WeatherDescription { get; set; }

    public string? Category { get; set; }

    public double ChancePercentage { get; set; }

    public Enums.TempScale Scale { get; set; }
}
```

## Step 3: Initialize weather data in the WeatherViewModel

The **WeatherViewModel** defines an **ObservableCollection<WeatherDataModel>** to store and manage dynamic weather data. This collection supports real-time UI updates through data binding.

Sample weather data is generated and assigned to this collection, demonstrating how to populate charts and gauges with dynamic, interactive weather information.

Refer to the following code example.

```
public WeatherViewModel()
{
    GenerateWeatherData();
}

void GenerateWeatherData()
{
    City = "Los Santos";
    DateTime time = DateTime.Today;
    Date = time.ToString("MMMM dd, yyyy");

    WeatherData = new ObservableCollection<WeatherDataModel>();
    Random random = new();

    for (int i = 1; i <= 24; i++)
    {
        float temp = MathF.Round(random.Next(24, 28) + random.NextSingle(), 1);

        WeatherData.Add(new WeatherDataModel
        {
            Time = time,
            Temperature = temp,
            WindSpeed = MathF.Round(random.Next(1, 15) + random.NextSingle(), 1),
            WindDirection = random.Next(0, 360),
            Humidity = random.Next(40, 90),
            UVIndex = MathF.Round(random.Next(0, 12) + random.NextSingle(), 1),
            Dew = MathF.Round(random.Next(5, 20) + random.NextSingle(), 1),
            FeelsLike = MathF.Round(temp + random.Next(5, 11) + random.NextSingle(), 1)
        });

        time = time.AddHours(1);
    }

    MinTemperature = WeatherData.Min(min => min.Temperature);
    MaxTemperature = WeatherData.Max(max => max.Temperature);
}
```

## Step 4: Visualize temperature trends with charts

In this step, we’ll use the [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html)
 to visualize temperature trends throughout the day. The actual temperature is plotted using a [SplineAreaSeries](https://help.syncfusion.com/maui/cartesian-charts/area#spline-area-chart)
**,** while the **feels-like** temperature is displayed using a [SplineSeries](https://help.syncfusion.com/maui/cartesian-charts/line#spline-chart)
. These smooth and responsive chart types provide a clear, intuitive representation of temperature fluctuations.

The chart configurations are:

- **X-Axis:** Displays time intervals.
- **Y-Axis:** Displays temperature values.
- **Spline Area Chart:** Represents actual temperature using smooth, shaded curves.

Refer to the following code example.

```
<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:DateTimeAxis Interval="2" ShowMajorGridLines="False">
            <chart:DateTimeAxis.LabelStyle>
                <chart:ChartAxisLabelStyle 
                    TextColor="SlateGray" 
                    FontFamily="Sen" 
                    LabelFormat="h tt" />
            </chart:DateTimeAxis.LabelStyle>
        </chart:DateTimeAxis>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis Interval="{Binding Interval}" Maximum="{Binding YAxisMax}">
            <chart:NumericalAxis.LabelStyle>
                <chart:ChartAxisLabelStyle 
                    LabelFormat="0°" 
                    TextColor="SlateGray" 
                    FontFamily="Sen" />
            </chart:NumericalAxis.LabelStyle>
        </chart:NumericalAxis>
    </chart:SfCartesianChart.YAxes>

    <chart:SfCartesianChart.Legend>
        <chart:ChartLegend Placement="Bottom">
            <chart:ChartLegend.LabelStyle>
                <chart:ChartLegendLabelStyle 
                    FontFamily="Sen" 
                    TextColor="DarkSlateGrey" />
            </chart:ChartLegend.LabelStyle>
        </chart:ChartLegend>
    </chart:SfCartesianChart.Legend>

    <chart:SfCartesianChart.TrackballBehavior>
        <chart:ChartTrackballBehavior DisplayMode="NearestPoint">
            <chart:ChartTrackballBehavior.LineStyle>
                <chart:ChartLineStyle 
                    Stroke="#4facfe" 
                    StrokeWidth="2" />
            </chart:ChartTrackballBehavior.LineStyle>
            <chart:ChartTrackballBehavior.LabelStyle>
                <chart:ChartLabelStyle 
                    TextColor="White" 
                    LabelFormat="{}0.00°" 
                    Background="SlateGray" 
                    FontAttributes="Bold" 
                    FontSize="14" />
            </chart:ChartTrackballBehavior.LabelStyle>
            <chart:ChartTrackballBehavior.MarkerSettings>
                <chart:ChartMarkerSettings 
                    Height="10" 
                    Width="10" 
                    Stroke="#4facfe" 
                    StrokeWidth="2" 
                    Fill="white" />
            </chart:ChartTrackballBehavior.MarkerSettings>
        </chart:ChartTrackballBehavior>
    </chart:SfCartesianChart.TrackballBehavior>

    <chart:SfCartesianChart.Series>

        <chart:SplineAreaSeries 
            ItemsSource="{Binding WeatherData}"
            XBindingPath="Time"
            YBindingPath="{Binding TemperatureYPath}"
            Opacity=".6"
            Label="Temperature"
            EnableAnimation="True" 
            Fill="{StaticResource gradientFill}" />

        <chart:SplineSeries 
            ItemsSource="{Binding WeatherData}"
            XBindingPath="Time"
            YBindingPath="{Binding FeelsYPath}"
            IsVisible="{Binding SeriesIsVisible}"
            StrokeWidth="1.5"
            Label="Feels like"
            Fill="#FF6F00"
            LegendIcon="SeriesType"
            StrokeDashArray="{StaticResource strokeDash}">
        </chart:SplineSeries>

    </chart:SfCartesianChart.Series>

</chart:SfCartesianChart>
```

Refer to the following image.

![.NET MAUI Cartesian Chart with SplineAreaSeries for temperature and SplineSeries for feels like](https://www.syncfusion.com/blogs/wp-content/uploads/2025/05/NET-MAUI-Cartesian-Chart-with-SplineAreaSeries-for-temperature-and-SplineSeries-for-feels-lik.png)

## Step 5: Implement the wind direction compass

Wind direction is visualized using the [SfRadialGauge](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.SfRadialGauge.html)
 control, which offers an interactive, compass-like display of wind movement. This type of visualization is especially useful in weather dashboards, aviation apps, and outdoor planning tools.

The following code example demonstrates how to customize the [SfRadialGauge](https://help.syncfusion.com/maui/radial-gauge/getting-started)
 to resemble a compass, complete with cardinal direction labels and a two-headed needle for indicating wind directions accurately.

```
<gauge:SfRadialGauge Background="Transparent" Grid.Column="1">

    <gauge:RadialAxis Minimum="0" 
                      Maximum="360"  
                      Interval="45"
                      ShowTicks="False" 
                      LabelPosition="Inside"
                      StartAngle="270" 
                      EndAngle="270" 
                      LabelCreated="RadialAxis_LabelCreated">

        <gauge:RadialAxis.AxisLabelStyle>
            <gauge:GaugeLabelStyle 
                TextColor="#8fd3ff" 
                FontSize="10" 
                FontFamily="Sen" />
        </gauge:RadialAxis.AxisLabelStyle>

        <gauge:RadialAxis.AxisLineStyle>
            <gauge:RadialLineStyle 
                Fill="#8fd3ff" />
        </gauge:RadialAxis.AxisLineStyle>

        <gauge:RadialAxis.Pointers>
            <gauge:NeedlePointer 
                Value="300" 
                NeedleFill="#4facfe" 
                KnobFill="White" 
                NeedleLengthUnit="Factor"
                NeedleLength=".6"
                KnobRadius="0.1"
                NeedleEndWidth="13" />

            <gauge:NeedlePointer 
                Value="120"
                EnableAnimation="True" 
                NeedleFill="#8fd3ff" 
                KnobFill="White" 
                NeedleLengthUnit="Factor"
                NeedleEndWidth="13"
                NeedleLength=".6" />
        </gauge:RadialAxis.Pointers>

    </gauge:RadialAxis>

</gauge:SfRadialGauge>
```

Refer to the following image.

![.NET MAUI Radial Gauge as a compass showing wind direction with cardinal labels](https://www.syncfusion.com/blogs/wp-content/uploads/2025/05/NET-MAUI-SfRadialGauge-as-a-compass-showing-wind-direction-with-cardinal-labels.png)

## Step 6: Visualize climate factors with RadialBarSeries

We use the [RadialBarSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html)
 in the [.NET MAUI Toolkit SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html)
 to present key weather metrics such as rain percentage, humidity level, and dew point probability in a clean, modern circular format.

Refer to the following code example.

```
<chart:SfCircularChart Margin="0,0,20,0">

    <chart:SfCircularChart.Legend>
        <chart:ChartLegend Placement="Right">
            <chart:ChartLegend.LabelStyle>
                <chart:ChartLegendLabelStyle 
                    TextColor="SlateGray" 
                    FontFamily="Sen" 
                    FontSize="13" />
            </chart:ChartLegend.LabelStyle>
        </chart:ChartLegend>
    </chart:SfCircularChart.Legend>

    <chart:RadialBarSeries 
        ItemsSource="{Binding WeatherMetrics}"
        XBindingPath="Category"
        YBindingPath="ChancePercentage"
        GapRatio=".4"
        MaximumValue="100"
        CapStyle="BothCurve"
        EnableAnimation="True"
        PaletteBrushes="{StaticResource RadialBarGradients}" />

</chart:SfCircularChart>
```

Refer to the following image.

![.NET MAUI Circular Chart with RadialBarSeries for rain, humidity, and dew point](https://www.syncfusion.com/blogs/wp-content/uploads/2025/05/NET-MAUI-SfCircularChart-with-RadialBarSeries-for-rain-humidity-and-dew-point.png)

## Step 7: Add a Segmented Control to switch between charts

To enhance the user experience, we use the [MAUI Toolkit SfSegmentedControl](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.SegmentedControl.html)
 to toggle between the **temperature** and the ** overview charts**within the same display area. This control provides a smooth and intuitive way to switch between visualizations, enhancing the dashboard’s interactivity.

The Segmented Control supports modern styling and includes labeled options such as**temperature** and ** overview**.

To configure the [SfSegmentedControl](https://help.syncfusion.com/maui-toolkit/segmented-control/getting-started)
, refer to the following code example.

```
<segments:SfSegmentedControl ItemsSource="{Binding SegmentItems}"
                              SelectedIndex="0"
                              Stroke="#778899"
                              StrokeThickness="1.5"
                              SegmentHeight="30"
                              SegmentWidth="100"
                              WidthRequest="210"
                              CornerRadius="5"
                              SelectionChanged="SfSegmentedControl_SelectionChanged">

    <segments:SfSegmentedControl.TextStyle>
        <segments:SegmentTextStyle 
            TextColor="#778899" 
            FontAttributes="Bold" 
            FontFamily="Sen" 
            FontSize="14" />
    </segments:SfSegmentedControl.TextStyle>

    <segments:SfSegmentedControl.SelectionIndicatorSettings>
        <segments:SelectionIndicatorSettings 
            Background="#85D3FD" 
            TextColor="White" />
    </segments:SfSegmentedControl.SelectionIndicatorSettings>

</segments:SfSegmentedControl>
```

Refer to the following image.

![.NET MAUI Segmented Control to toggle temperature and overview charts](https://www.syncfusion.com/blogs/wp-content/uploads/2025/05/NET-MAUI-Segmented-Control-to-toggle-temperature-and-overview-chart.gif)

## Step 8: Create an overview chart

Now, visualize the day’s overall weather summary using multiple **ColumnSeries** within the [.NET MAUI Toolkit ColumnCharts.](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ColumnSeries.html)
 This approach enables users to interpret weather insights such as temperature, humidity, wind speed, and more by comparing their daily variations in a single [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html)
.

Refer to the following code example.

```
<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:DateTimeAxis Interval="2" ShowMajorGridLines="False">
            <chart:DateTimeAxis.LabelStyle>
                <chart:ChartAxisLabelStyle TextColor="SlateGray" FontFamily="Sen" LabelFormat="h tt" />
            </chart:DateTimeAxis.LabelStyle>
        </chart:DateTimeAxis>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis IsVisible="False" />
    </chart:SfCartesianChart.YAxes>

    <chart:SfCartesianChart.Legend>
        <chart:ChartLegend Placement="Bottom" ToggleSeriesVisibility="True">
            <chart:ChartLegend.LabelStyle>
                <chart:ChartLegendLabelStyle FontFamily="Sen" TextColor="DarkSlateGrey" />
            </chart:ChartLegend.LabelStyle>
        </chart:ChartLegend>
    </chart:SfCartesianChart.Legend>

    <chart:SfCartesianChart.Series>

        <chart:ColumnSeries ItemsSource="{Binding WeatherData}"
                            XBindingPath="Time"
                            YBindingPath="Temperature"
                            Fill="#F7DC6F"
                            Width=".4"
                            CornerRadius="2"
                            EnableAnimation="True"
                            Label="Temperature" />

        <chart:ColumnSeries ItemsSource="{Binding WeatherData}"
                            XBindingPath="Time"
                            YBindingPath="FeelsLike"
                            Fill="#FFA560"
                            Width=".4"
                            CornerRadius="2"
                            EnableAnimation="True"
                            Label="Feels Like" />

        <chart:ColumnSeries ItemsSource="{Binding WeatherData}"
                            XBindingPath="Time"
                            YBindingPath="UVIndex"
                            Fill="#AF7AC5"
                            Width=".4"
                            CornerRadius="2"
                            EnableAnimation="True"
                            Label="UV Index" />

        <chart:ColumnSeries ItemsSource="{Binding WeatherData}"
                            XBindingPath="Time"
                            YBindingPath="WindSpeed"
                            Fill="#85D3FD"
                            Width=".4"
                            CornerRadius="2"
                            EnableAnimation="True"
                            Label="Wind Speed" />

    </chart:SfCartesianChart.Series>

</chart:SfCartesianChart>
```

Refer to the following image.

![A ColumnSeries chart summarizing daily weather metrics](https://www.syncfusion.com/blogs/wp-content/uploads/2025/05/NET-MAUI-SfCartesianChart-with-ColumnSeries-for-temperature-UV-index-and-wind-speed.png)

Integrating the temperature chart, overview chart, and wind direction compass creates a comprehensive dashboard for analyzing weather patterns. These visualizations provide users with valuable and intuitive insights into daily weather conditions.

## Step 9: Create an overview panel

Create an overview panel as the central display for key weather metrics. It offers a structured and visually appealing view of real-time weather data.

The **UVIndex** is visualized using the [.NET MAUI SfRadialGauge Control](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.SfRadialGauge.html)
, offering an intuitive and dynamic way to represent varying UV exposure levels. This example illustrates how such visualizations apply to real-world scenarios, helping users to understand daily sun intensity.

Refer to the following image.

![.NET MAUI Radial Gauge showing UV index with gradient scale in Weather Dashboard](https://www.syncfusion.com/blogs/wp-content/uploads/2025/05/NET-MAUI-Radial-Gauge-showing-UV-index-with-gradient-scale-in-Weather-Dashboar.png)

Refer to the following code example to learn how to customize the [SfRadialGauge](https://help.syncfusion.com/maui/radial-gauge/getting-started)
 to represent the UV index. This implementation includes a **gradient color scale** to indicate varying UV intensity levels and an animated pointer to display the current UV index value.

```
<gauge:SfRadialGauge Grid.Column="3" BackgroundColor="Transparent" Margin="0,20">

    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis Minimum="0"
                          Maximum="12"
                          ShowTicks="False" 
                          ShowLabels="False">
                          
            <gauge:RadialAxis.AxisLineStyle>
                <gauge:RadialLineStyle ThicknessUnit="Factor" 
                                       Thickness="0.1">
                    <gauge:RadialLineStyle.GradientStops>
                        <gauge:GaugeGradientStop Value="2"
                                                 Color="#88D8B0" />
                        <gauge:GaugeGradientStop Value="5"
                                                 Color="#FFD700" />
                        <gauge:GaugeGradientStop Value="7"
                                                 Color="#FFA500" />
                        <gauge:GaugeGradientStop Value="9"
                                                 Color="OrangeRed" />
                        <gauge:GaugeGradientStop Value="12"
                                                 Color="#8A2BE2" />
                    </gauge:RadialLineStyle.GradientStops>
                </gauge:RadialLineStyle>
            </gauge:RadialAxis.AxisLineStyle>
                          
            <gauge:RadialAxis.Pointers>
                <gauge:ShapePointer Value="{Binding WeatherData[0].UVIndex}"
                                    x:DataType="local:WeatherViewModel"
                                    Offset="-11"
                                    EnableAnimation="True"
                                    Fill="SlateGray" />
            </gauge:RadialAxis.Pointers>
                          
            <gauge:RadialAxis.Annotations>
                <gauge:GaugeAnnotation>
                    <gauge:GaugeAnnotation.Content>
                        <Label VerticalTextAlignment="Center"
                               HorizontalTextAlignment="Center"
                               x:DataType="local:WeatherViewModel">
                            <Label.FormattedText>
                                <FormattedString>
                                    <Span Text="{Binding WeatherData[0].UVIndex}"
                                          FontSize="20"
                                          FontFamily="Sen"
                                          TextColor="SlateGray" />
                                    <Span Text="10"/>
                                    <Span Text="UV Index"
                                          FontFamily="Sen"
                                          FontSize="14"
                                          TextColor="LightSlateGray" />
                                </FormattedString>
                            </Label.FormattedText>
                        </Label>
                    </gauge:GaugeAnnotation.Content>
                </gauge:GaugeAnnotation>
            </gauge:RadialAxis.Annotations>
                          
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>

</gauge:SfRadialGauge>
```

This sample highlights how Syncfusion’s .NET MAUI Toolkit can help developers build feature-rich, interactive applications with user-friendly designs.

After executing these code examples, we will get the output that resembles the following image.

![.NET MAUI Weather Dashboard with temperature, wind, UV index, and climate metrics](https://www.syncfusion.com/blogs/wp-content/uploads/2025/05/NET-MAUI-Weather-Dashboard-with-temperature-wind-UV-index-and-climate-metrics.gif)

.NET MAUI Weather Dashboard with temperature, wind, UV index, and climate metrics

## GitHub reference

For more details, refer to the [GitHub demo](https://github.com/SyncfusionExamples/Weather-Monitor-Dashboard-using-Syncfusion-MAUI-Toolkit)
.


## Conclusion

Thanks for reading! In this blog, we’ve explored how to build a weather monitoring dashboard using Syncfusion® .NET MAUI Toolkit. We encourage you to follow the steps outlined in this guide and share your feedback in the comments section below.

Existing customers can download the new version of Essential Studio® on the [license and downloads page](https://www.syncfusion.com/account/downloads)
. If you are not a Syncfusion® customer, try our 30-day [free trial](https://www.syncfusion.com/downloads)
 to check our incredible features.

If you require assistance, please don’t 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!

Stay tuned for next week’s featured **Chart of the Week**.

## Related Blogs



[Easily Build an SIP Calculator Using the Syncfusion® .NET MAUI Toolkit Charts](https://www.syncfusion.com/blogs/post/investment-calculator-in-maui-toolkit)



[Analyze and Track Investment Portfolios with .NET MAUI Toolkit Charts](https://www.syncfusion.com/blogs/post/portfolio-charts-maui-toolkit)



[Stock Market Trends Analysis Using .NET MAUI Toolkit Candle Chart](https://www.syncfusion.com/blogs/post/analyze-stocks-in-maui-toolkit-chart)



[Unlock Insights on Export Trends with a .NET MAUI Toolkit Stacked Area Chart](https://www.syncfusion.com/blogs/post/visualize-export-trends-maui-toolkit)