Chart of the Week: Creating a .NET MAUI Range Column Chart to Compare Average Temperature Variations in Rome
Tags: dotnetmaui, chart, mobile, datavisualization
Published: 2023-10-03 15:44:41

---
title: Chart of the Week: Creating a .NET MAUI Range Column Chart to Compare Average Temperature Variations in Rome
published: true
date: 2023-09-29 11:58:16 UTC
tags: dotnetmaui, chart, mobile, datavisualization
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-range-column-chart-compare-temperature-variations.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdtov6cllahp7tvkck1z.png
---
Welcome to our  **Chart of the Week**  blog series!

Today, we’ll analyze and compare average monthly temperature variations in Rome for 2021 and 2022 using the Syncfusion [.NET MAUI Range Column Chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts/chart-types/maui-range-column-chart ".NET MAUI Range Column Chart").

The .NET MAUI Range Column Chart is a powerful tool for visualizing data ranges. It plots two y-values per data point, representing a column’s upper and lower bounds. This allows for a dynamic and comprehensive view of your data. With features like real-time updates, high performance, and interactive elements such as zooming, panning, trackball, tooltip, and selection, your data analysis becomes an engaging experience.

This versatile control is aesthetically pleasing and compatible with desktop (Windows and Mac Catalyst) and mobile platforms (Android and iOS), making it a go-to choice for cross-platform data visualization needs.

The following image shows the chart we’re going to build. ![.NET MAUI Range Column Chart Comparing Average Temperatures in Rome](https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/NET-MAUI-Range-Column-Chart-Comparing-Average-Temperatures-in-Rome-2.png)

Let’s begin creating a range graph that illustrates temperature variations using the Syncfusion .NET MAUI Range Column Chart.

## Step 1: Gathering the average temperature data

First, we need to gather data from the [Weather Underground website](https://www.wunderground.com/dashboard/pws/IROME167/table/2021-01-3/2021-01-3/monthly "Weather Underground website"). We’ll focus on obtaining the monthly temperature range in degrees Celsius for Rome (Sallustiano), Italy, for 2021 and 2022. Once we have this data, we will save it as a CSV file. After that, we can create the chart.

## Step 2: Preparing the data for the chart

Create the  **Model**  class to hold the temperature data with the help of the **Month**, **High2021**, **Low2021**, **High2022**, and **Low2022** properties.

Refer to the following code example.

```csharp
Public class Model
{
    public Model(string month, double high2021, double low2021, double high2022, double low2022)
    {
        Month = month;
        High2021 = high2021;
        Low2021 = low2021;
        High2022 = high2022;
        Low2022 = low2022;
    }

    public string Month { get; set; }
    public double High2021 { get; set; }
    public double Low2021 { get; set; }
    public double High2022 { get; set; }
    public double Low2022 { get; set; }
}
```

Then, we generate the average temperature collection using the  **ViewModel**  class and its  **TemperatureCollection** property. Assign the CSV data to the temperature range data collection using the  **ReadCSV**  method and store it in the  **TemperatureCollection** property.

Refer to the following code example.

```csharp
public class ViewModel 
{
    List<Model> temperatureCollection;
    public List<Model> TemperatureCollection
    {
        get
        {
            return temperatureCollection;
        }
        set
        {
            temperatureCollection = value;
        }
    }

    public ViewModel()
    {
        TemperatureCollection = new List<Model>(ReadCSV());
    }

    public IEnumerable<Model> ReadCSV()
    {
        Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly;
        Stream inputStream = executingAssembly.GetManifestResourceStream("RangeColumnSample.Resources.Raw.Rome monthly data.csv");

        string? line;
        List<string> lines = new List<string>();

        using StreamReader reader = new StreamReader(inputStream);
        while ((line = reader.ReadLine()) != null)
        {
            lines.Add(line);
        }

        return lines.Select(line =>
        {
            string[] data = line.Split(',');
            return new Model(data[0], Convert.ToDouble(data[1]), Convert.ToDouble(data[2]), Convert.ToDouble(data[4]), Convert.ToDouble(data[5]));
        });
    }
}
```

## Step 3: Configuring the Syncfusion .NET MAUI Cartesian Charts

Now, configure the Syncfusion .NET MAUI Cartesian Charts control using this [documentation](https://help.syncfusion.com/maui/cartesian-charts/getting-started "Getting started with .NET MAUI Cartesian Charts").

Refer to the following code example.

```xml
<chart:SfCartesianChart>  

 <chart:SfCartesianChart.XAxes>
  <chart:CategoryAxis>
  </chart:CategoryAxis>
 </chart:SfCartesianChart.XAxes>

 <chart:SfCartesianChart.YAxes>
  <chart:NumericalAxis>
  </chart:NumericalAxis>
 </chart:SfCartesianChart.YAxes>

</chart:SfCartesianChart>
```

## Step 4: Bind the monthly temperature data to the range column chart

To compare the monthly average temperature variations for 2021 and 2022, we’ll use the Syncfusion [RangeColumnSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.RangeColumnSeries.html "RangeColumnSeries class of .NET MAUI Charts") instance.

Refer to the following code example.

```xml
<chart:RangeColumnSeries ItemsSource="{Binding TemperatureCollection}" 
                          XBindingPath="Month" High="High2021" Low="Low2021">
</chart:RangeColumnSeries>

<chart:RangeColumnSeries ItemsSource="{Binding TemperatureCollection}" 
                          XBindingPath="Month" High="High2022" Low="Low2022">
</chart:RangeColumnSeries>
```

In the above code example, we’ve bound the [ItemSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ItemsSource "ItemSource property of .NET MAUI Charts") with the **TemperatureCollection** property. We have specified the [XBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_XBindingPath "XBindingPath property of .NET MAUI Charts") with the **Month** property for 2021 and 2022. The **High** and **Low** properties are bound with the respective high and low values for 2021 and 2022, respectively.

## Step 5: Customizing the chart appearance

Let’s enhance the look of the range column chart. To do this, we will create a layout with a bordered container specifically for the range graph. We will use a Label to display the necessary content.

Refer to the following code example.

```xml
<Border BackgroundColor="White" Stroke="#BEB1AE" Margin="10,20,10,10" Padding="10">
    
 <Border.StrokeShape>
  <RoundRectangle CornerRadius="30"/>
 </Border.StrokeShape>
    
 <Grid>
  <Grid.RowDefinitions>
   <RowDefinition Height="8*"/>
   <RowDefinition Height="20"/>
  </Grid.RowDefinitions>

  <chart:SfCartesianChart>
  </chart:SfCartesianChart>
        
  <Label Grid.Row="1" FontSize="Caption" FontAttributes="Italic" 
         Text="Monthly temperature range at a weather station in Rome (Sallustiano), Italy, in 2021 and 2022, in °C.">
  </Label>
        
 </Grid>
    
</Border>
```

### Customizing range column series placement

We can place the range column series side by side or overlap them using the [EnableSideBySideSeriesPlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_EnableSideBySideSeriesPlacement "EnableSideBySideSeriesPlacement property of .NET MAUI Charts") property. Additionally, we can personalize the chart by setting a background color and margins.

Refer to the following code example.

```xml
<chart:SfCartesianChart Margin="10" BackgroundColor="White" EnableSideBySideSeriesPlacement="True">
</chart:SfCartesianChart>
```

### Adding a title to the chart

We can easily enhance the readability of the plotted data by adding a [Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Title "Title property of .NET MAUI Charts") to the chart, as shown in the following code example.

```xml
<chart:SfCartesianChart.Title>
 <Grid>
  <Grid.RowDefinitions>
   <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>
  <HorizontalStackLayout Grid.Column="0">
   <Image Source="cloud.jpg" WidthRequest="40" HeightRequest="40"/>
   <Label VerticalOptions="Center"  
          Text="Average Temperature Variations in Rome: 2021 vs. 2022" FontSize="18"/>
  </HorizontalStackLayout>
 </Grid>
</chart:SfCartesianChart.Title>
```

### Customizing the chart legend

Refer to the following code to enable and customize the [Legend](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Legend "Legend property of .NET MAUI Charts") to represent the years for which the range column series is plotted.

```xml
<chart:SfCartesianChart.Legend>
 <chart:ChartLegend ItemTemplate="{StaticResource LegendTemplate}">
 </chart:ChartLegend>
</chart:SfCartesianChart.Legend>

<chart:SfCartesianChart.Resources>
 <ResourceDictionary>
  <DataTemplate x:Key="LegendTemplate">
   <Grid ColumnDefinitions="Auto,Auto" ColumnSpacing="5">
    <HorizontalStackLayout>
     <Ellipse HorizontalOptions="Center" VerticalOptions="Center" 
              HeightRequest="13" WidthRequest="13" Margin="0,3,3,0"
              Fill="{Binding IconBrush}"/>
     <Label Grid.Column="1" FontSize="16" VerticalTextAlignment="Center" Text="{Binding Item.Label}" TextColor="Black" HorizontalOptions="Center" HorizontalTextAlignment="Start"/>
    </HorizontalStackLayout>
   </Grid>
  </DataTemplate>
 </ResourceDictionary>
</chart:SfCartesianChart.Resources>

<chart:RangeColumnSeries Label="2021">                     
</chart:RangeColumnSeries>

<chart:RangeColumnSeries Label="2022">
</chart:RangeColumnSeries>
```

### Customizing the axes and gridlines

Let’s customize the x- and y-axes using properties such as [LabelPlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CategoryAxis.html#Syncfusion_Maui_Charts_CategoryAxis_LabelPlacement "LabelPlacement property of .NET MAUI Charts"), [LabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_LabelStyle "LabelStyle property of .NET MAUI Charts"), and [ShowMajorGridLines](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_ShowMajorGridLines "ShowMajorGridLines property of .NET MAUI Charts"), and adjust the y-axis range using the [Minimum](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.NumericalAxis.html#Syncfusion_Maui_Charts_NumericalAxis_Minimum "Minimum property of .NET MAUI Charts") and [Maximum](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.NumericalAxis.html#Syncfusion_Maui_Charts_NumericalAxis_Maximum "Maximum property of .NET MAUI Charts") properties.

```xml
<chart:SfCartesianChart.XAxes>
 <chart:CategoryAxis LabelPlacement="BetweenTicks">
  <chart:CategoryAxis.LabelStyle>
   <chart:ChartAxisLabelStyle TextColor="Black" FontSize="Caption"/>
  </chart:CategoryAxis.LabelStyle>
 </chart:CategoryAxis>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
 <chart:NumericalAxis Minimum="-5" Maximum="40" ShowMajorGridLines="False">
  <chart:NumericalAxis.LabelStyle>
   <chart:ChartAxisLabelStyle TextColor="Black" FontSize="Caption"/>
  </chart:NumericalAxis.LabelStyle>
 </chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>
```

### Customizing the chart series

We can also customize the chart series by adjusting the chart segment [Width](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ColumnSeries.html#Syncfusion_Maui_Charts_ColumnSeries_Width "Width property of .NET MAUI Charts") and applying colors using the [Fill](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_FillProperty "Fill property of .NET MAUI Charts") property. Refer to the following code example.

```xml
<chart:RangeColumnSeries Width="{x:OnPlatform Android='0.9', iOS='0.9', Default='0.8'}" Fill="#98fb98>
</chart:RangeColumnSeries>

<chart:RangeColumnSeries Width="{x:OnPlatform Android='0.9', iOS='0.9', Default='0.8'}" Fill="#ff1493">
</chart:RangeColumnSeries>
```

### Adding data labels

Finally, enable and customize the [data labels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ShowDataLabelsProperty "ShowDataLabelsProperty property of .NET MAUI Charts") for each series in the chart as shown in the following code example.

```xml
<chart:RangeColumnSeries ShowDataLabels="True" >
 <chart:RangeColumnSeries.DataLabelSettings>
  <chart:CartesianDataLabelSettings UseSeriesPalette="False">
   <chart:CartesianDataLabelSettings.LabelStyle>
    <chart:ChartDataLabelStyle TextColor="Black"/>
   </chart:CartesianDataLabelSettings.LabelStyle>
  </chart:CartesianDataLabelSettings>
 </chart:RangeColumnSeries.DataLabelSettings>
</chart:RangeColumnSeries>

<chart:RangeColumnSeries ShowDataLabels="True" >
 <chart:RangeColumnSeries.DataLabelSettings>
  <chart:CartesianDataLabelSettings UseSeriesPalette="False">
   <chart:CartesianDataLabelSettings.LabelStyle>
    <chart:ChartDataLabelStyle TextColor="White" FontAttributes="Bold"/>
   </chart:CartesianDataLabelSettings.LabelStyle>
  </chart:CartesianDataLabelSettings>
 </chart:RangeColumnSeries.DataLabelSettings>
</chart:RangeColumnSeries>
```

After executing all these code examples, we will get output like the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Comparing-the-Monthly-Average-Temperature-Variations-in-Rome-Using-a-.NET-MAUI-Range-Column-Chart-1.png" alt="Comparing the Monthly Average Temperature Variations in Rome Using a .NET MAUI Range Column Chart" style="width:100%">

  <figcaption>Comparing the Monthly Average Temperature Variations in Rome Using a .NET MAUI Range Column Chart</figcaption>

</figure>

## GitHub reference

For more details, refer to the demo on [GitHub](https://github.com/SyncfusionExamples/Creating-a-.NET-MAUI-Range-Column-Chart-to-Compare-Average-Temperatures-in-Rome "Creating .NET MAUI Range Column Chart to compare average temperature variations in Rome GitHub demo").

## Conclusion

Thanks for reading! In this blog, we’ve compared the average monthly temperature variations in Rome using the Syncfusion [.NET MAUI Range Column Chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts/chart-types/maui-range-column-chart ".NET MAUI Range Column Chart"). We encourage you to follow the steps and share your experience in the comments section below.

You can also contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2023 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2023-volume-3.aspx "Blog: Syncfusion Essential Studio 2023 Volume 3 Is Here!")
- [Chart of the Week: Creating a Pareto Chart Using .NET MAUI Charts to identify Key Customer Complaints](https://www.syncfusion.com/blogs/post/dotnet-maui-pareto-chart-for-customer-complaints.aspx "Blog: Chart of the Week: Creating a Pareto Chart Using .NET MAUI Charts to identify Key Customer Complaints")
- [Creating a .NET MAUI Smart PDF Viewer App with Auto-Summary Generation Using OpenAI’s ChatGPT](https://www.syncfusion.com/blogs/post/dotnet-maui-smart-pdf-viewer-using-openai.aspx "Blog: Creating a .NET MAUI Smart PDF Viewer App with Auto-Summary Generation Using OpenAI’s ChatGPT")
- [Advanced Date Customization in .NET MAUI Calendar Control](https://www.syncfusion.com/blogs/post/advanced-date-customization-dotnet-maui-calendar.aspx "Blog: Advanced Date Customization in .NET MAUI Calendar Control")