Chart of the Week: Creating a .NET MAUI Scatter Chart to Visualize CO2 Emissions vs. Fossil Fuel Consumption
Tags: dotnetmaui, charts, mobile, desktop
Published: 2024-01-19 13:01:30

---
title: Chart of the Week: Creating a .NET MAUI Scatter Chart to Visualize CO2 Emissions vs. Fossil Fuel Consumption
published: true
date: 2024-01-05 13:23:39 UTC
tags: dotnetmaui, charts, mobile, desktop
canonical_url: https://www.syncfusion.com/blogs/post/maui-scatter-chart-co2-vs-fuel.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eoqch9o0u5w5hzr96hpg.png
---
Welcome to our **Chart of the Week** blog series!

Today, we’ll visualize the relationship between CO<sub>2 </sub>emissions and fossil fuel consumption per capita in 2022 using the [Syncfusion .NET MAUI Scatter Chart](https://help.syncfusion.com/maui/cartesian-charts/scatter ".NET MAUI Scatter Chart").

In many developing countries, most of the population relies on coal, oil, and gas for their daily energy needs. Numerous industries also contribute to global carbon dioxide emissions through the consumption of these fossil fuels.

The combustion of fossil fuels causes an increase in greenhouse gas concentrations in the atmosphere. The accumulation of these gases leads to the retention of heat in the Earth’s atmosphere, resulting in a gradual escalation in global temperatures.

Let’s examine the quantity of carbon dioxide emitted in tons versus fossil fuel burned in thousands of kilowatt-hours for coal, oil, and gas in 2022.

The following image shows the chart we’re going to build. ![Visualizing CO2 Emissions vs. Fossil Fuel Consumption using .NET MAUI Scatter Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Visualizing-CO2-Emissions-vs.-Fossil-Fuel-Consumption-in-a-Scatter-Chart-1.gif)

## Step 1: Gathering CO<sub>2 </sub>emission and fossil fuel consumption data

First, let’s gather the data on CO<sub>2 </sub>emissions and fossil fuel consumption from [Our World in Data](https://ourworldindata.org/grapher/co-emissions-per-capita-vs-fossil-fuel-consumption-per-capita?country=ISR~VEN "Article: CO₂ emissions per capita vs. fossil fuel consumption per capita, 2022") in 2022.

## Step 2: Preparing the data for the chart

Create the **Model** class with the help of the **Fossil\_fuel, CO2\_Emissions,** and **Countries** properties.

```csharp
public class Model
{
    public double CO2_Emissions { get; set; }
    public double Fossil_fuel { get; set; }
    public string Countries { get; set; }

    public Model(string countries, double CO2_emission, double fuel)
    {
        Countries = countries;
        CO2_Emissions = CO2_emission;
        Fossil_fuel = fuel;
    }
}
```

Then, generate the CO<sub>2 </sub>emissions and average fossil fuel consumption data collection using the  **ViewModel**  class and its  **CO2\_Emission\_Fuel\_Consumption** property. Assign the CSV data to the Co2 emissions and fuel consumption data collection using the  **ReadCSV**  method and store it in the  **CO<sub>2</sub>\_Emission\_Fuel\_Consumption** property.

Refer to the following code example.

```csharp
public class ViewModel
{
    private List<Model>? co2_Emission_Fuel_Consumption;
    public List<Model>? CO2_Emission_Fuel_Consumption
    {
        get { return co2_Emission_Fuel_Consumption; }
        set
        {
            co2_Emission_Fuel_Consumption = value;
        }
    }

    /// <summary>
    /// 
    /// </summary>
    public ViewModel()
    {
        CO2_Emission_Fuel_Consumption = new List<Model>(ReadCSV());
    }

    public IEnumerable<Model> ReadCSV()
    {
        Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly;
        Stream? inputStream = executingAssembly.GetManifestResourceStream("ScatterChartMAUI.Resources.Raw.fuel_co2_emission.csv");

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

        using StreamReader reader = new StreamReader(inputStream);
        while ((line = reader.ReadLine()) != null)
        {
            lines.Add(line);
        }
        lines.RemoveAt(0);
        return lines.Select(line =>
        {
            string[] data = line.Split(',');
               
            return new Model(data[0].ToString(), Convert.ToDouble(data[1]), Convert.ToDouble(data[2]));
        });
    }
}
```

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

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 Charts").

Refer to the following code example.

```xml
<chart:SfCartesianChart>

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

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

## Step 4: Initialize the BindingContext for the chart

Configure the **Model** class on the **ViewModel** class of your XAML page to bind its properties to the **BindingContext** of the [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html?tabs=tabid-1 "SfCartesianChart class for .NET MAUI Charts").

Refer to the following code example.

```xml
<chart:SfCartesianChart.BindingContext>
 <model:ViewModel/>
</chart:SfCartesianChart.BindingContext>
```

## Step 5: Bind the CO<sub>2</sub> emission data to the Scatter Chart

To visualize the relationship between CO<sub>2</sub> emissions and fossil fuel consumption in 2022, we’ll use the Syncfusion [ScatterSeries](https://help.syncfusion.com/maui/cartesian-charts/scatter "Scatter Chart in .NET MAUI") instance.

Refer to the following code example.

```xml
<chart:ScatterSeries ItemsSource="{Binding CO2_Emission_Fuel_Consumption}" XBindingPath="Fossil_fuel" YBindingPath="CO2_Emissions">
</chart:ScatterSeries>
```

In the previous code example, we bound the [ItemSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ItemsSource "ItemsSource property of .NET MAUI Charts") with the  **CO2\_Emission\_Fuel\_Consumption** property. We 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  **Fossil\_fuel** property and the [YBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.XYDataSeries.html#Syncfusion_Maui_Charts_XYDataSeries_YBindingPath "YBindingPath property of .NET MAUI Charts") with the **CO2\_Emissions** property.

## Step 6: Customizing the chart appearance

We can customize the Scatter Chart’s appearance by changing the axis elements’ appearance, customizing the scatter points, setting a chart background, and adding a title, among other customizations.

### Customizing the chart title

Refer to the following code example to customize the Scatter Chart title using the [Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Title "Title property of .NET MAUI Charts") property.

```xml
<chart:SfCartesianChart.Title>
 <Grid HorizontalOptions="Start" Margin="5" VerticalOptions="Center">
  <Grid.ColumnDefinitions>
   <ColumnDefinition Width="13"/>
   <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <StackLayout Orientation="Vertical" Background="#fc3a75" Margin="0,10,0,0" Grid.RowSpan="2"/>
  <VerticalStackLayout Margin="5,0,0,0" HorizontalOptions="Start" Grid.Column="1">
   <Label Margin="3" Text="CO₂ Emissions vs. Fossil Fuel Consumption per Capita" 
           LineBreakMode="WordWrap" HorizontalOptions="StartAndExpand"
           VerticalOptions="CenterAndExpand" FontAttributes="Bold" 
           TextColor="Black" FontSize="25" />
   <Label HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" 
          LineBreakMode="WordWrap" TextColor="Black" FontSize="17"
          Text=" In 2022, fossil fuel consumption was measured as the average amount of energy from coal, oil, and gas used per person, including industry emissions." />
  </VerticalStackLayout>
 </Grid>
</chart:SfCartesianChart.Title>
```

### Customize the chart axes

Let’s customize the axes titles, text color, font size, and axis line styles using the [ChartAxisTitle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_Title "ChartAxisTitle property of .NET MAUI Charts") property.

```xml
<chart:SfCartesianChart.XAxes>
 <chart:NumericalAxis>
  <chart:NumericalAxis.Title>
   <chart:ChartAxisTitle Text="Fossil fuels (kilowatt-hours)" 
                         FontSize="14" TextColor="#020308" />
  </chart:NumericalAxis.Title>
 </chart:NumericalAxis>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
 <chart:NumericalAxis>
  <chart:NumericalAxis.Title>
   <chart:ChartAxisTitle Text="CO₂ Emissions (tonnes)"  
                         FontSize="14" TextColor="#020308" />
  </chart:NumericalAxis.Title>
 </chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>
```

Next, we customize the axis label color using the [TextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLabelStyle.html#Syncfusion_Maui_Charts_ChartLabelStyle_TextColor "TextColor property of .NET MAUI Charts") property in the [LabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_LabelStyle "LabelStyle property of .NET MAUI Charts") and customize the axis line using the [StrokeWidth](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLineStyle.html#Syncfusion_Maui_Charts_ChartLineStyle_StrokeWidth "StrokeWidth property of .NET MAUI Charts") and [Stroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLineStyle.html#Syncfusion_Maui_Charts_ChartLineStyle_Stroke "Stroke property of .NET MAUI Charts") properties in the [AxisLineStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_AxisLineStyle "AxisLineStyle property of .NET MAUI Charts") of the axis.

```xml
<chart:SfCartesianChart.XAxes>
 <chart:NumericalAxis>
  <chart:NumericalAxis.LabelStyle>
   <chart:ChartAxisLabelStyle TextColor="#C4020308" />
  </chart:NumericalAxis.LabelStyle>
          
  <chart:NumericalAxis.AxisLineStyle>
   <chart:ChartLineStyle StrokeWidth ="1" Stroke="White"/>
  </chart:NumericalAxis.AxisLineStyle>

 </chart:NumericalAxis>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
 <chart:NumericalAxis>
  <chart:NumericalAxis.LabelStyle>
   <chart:ChartAxisLabelStyle TextColor="#C4020308" />
  </chart:NumericalAxis.LabelStyle>
          
  <chart:NumericalAxis.AxisLineStyle>
   <chart:ChartLineStyle StrokeWidth ="1" Stroke="White"/>
  </chart:NumericalAxis.AxisLineStyle>

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

### Customize the scatter plot appearance

We can customize the scatter point height and width using the [PointHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ScatterSeries.html#Syncfusion_Maui_Charts_ScatterSeries_PointHeight "PointHeight property of .NET MAUI Charts") and [PointWidth](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ScatterSeries.html#Syncfusion_Maui_Charts_ScatterSeries_PointWidth "PointWidth property of .NET MAUI Charts") properties. Then, we customize the scatter color and border using the [Fill](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_Fill "Fill property of .NET MAUI Charts") and [Stroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ScatterSeries.html#Syncfusion_Maui_Charts_ScatterSeries_Stroke "Stroke property of .NET MAUI Charts") properties, respectively.

### Enabling tooltips

We can display additional information about CO<sub>2 </sub>emissions and fossil fuel consumption per capita by enabling the tooltip using the [EnableTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_EnableTooltip "EnableTooltip property of .NET MAUI Charts") property. We will customize its appearance using the [TooltipTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_TooltipTemplate "TooltipTemplate property for MAUI Charts") property.

```xml
<chart:ScatterSeries EnableTooltip="True" ItemsSource="{Binding CO2_Emission_Fuel_Consumption}" Fill="#C2fc3a75" Label="United States" Stroke="#fc3a75" PointHeight="12" PointWidth="12" TooltipTemplate="{StaticResource toolTip1}" StrokeWidth="2" XbindingPath="Fossil_fuel" YbindingPath="CO2_Emissions">
</chart:ScatterSeries>
```

## Step 7: Enabling zooming

Using the [selection zooming](https://help.syncfusion.com/maui/cartesian-charts/zooming-and-panning#selection-zooming "Selection zooming feature in .NET MAUI Scatter Chart") feature, we can focus on a specific area of the chart and zoom in based on our viewing perspective. This can be done by enabling the [EnableSelectionZooming](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Charts_ChartZoomPanBehavior_EnableSelectionZooming "EnableSelectionZooming property of .NET MAUI Charts") property in the [ZoomPanBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_ZoomPanBehavior "ZoomPanBehavior property of .NET MAUI Charts") using the [ChartZoomPanBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartZoomPanBehavior.html?tabs=tabid-1 "ChartZoomPanBehavior class of .NET MAUI Charts") instance.

```xml
<chart:SfCartesianChart.ZoomPanBehavior>
 <chart:ChartZoomPanBehavior EnableSelectionZooming="True"/>
</chart:SfCartesianChart.ZoomPanBehavior>
```

To perform selection zooming on a desktop, hold the left mouse button, double-click, and drag. On a mobile device, hold your finger, double-tap, and drag to create a selection rectangle.

After executing the previous code example, we’ll get output like in the following GIF image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Comparing-CO2-emissions-and-fossil-fuel-consumption-using-the-Syncfusion-.NET-MAUI-Scatter-Chart.gif" alt="Comparing CO2 emissions and fossil fuel consumption using the Syncfusion .NET MAUI Scatter Chart" style="width:100%">

  <figcaption>Comparing CO2 emissions and fossil fuel consumption using the Syncfusion .NET MAUI Scatter Chart</figcaption>

</figure>

## GitHub reference

For more details, refer to the [GitHub demo](https://github.com/SyncfusionExamples/Creating-a-Scatter-Chart-Using-CO2-Emission-for-fossil-fuels-in-2022 "Comparing CO2 emissions and fossil fuel consumption using the Syncfusion .NET MAUI Scatter Chart GitHub demo").

## Conclusion

Thanks for reading! In this blog, we’ve seen how to visualize the relationship between CO<sub>2 </sub>emissions and fossil fuel consumption per capita using the Syncfusion [.NET MAUI Scatter Chart](https://help.syncfusion.com/maui/cartesian-charts/scatter "Scatter Chart in .NET MAUI"). We encourage you to try the steps discussed and share your thoughts in the comments below.

If you require assistance, please don’t hesitate to contact us via 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 eager to help you!

## Related blogs

- [Introducing the New .NET MAUI PullToRefresh Control](https://www.syncfusion.com/blogs/post/dotnet-maui-pull-to-refresh.aspx "Blog: Introducing the New .NET MAUI PullToRefresh Control")
- [Chart of the Week: Create a .NET MAUI Stacked Area Chart to Visualize US School Revenue as a Share of GDP by Funding Sources](https://www.syncfusion.com/blogs/post/dotnet-maui-stacked-area-chart-gdp.aspx "Blog: Chart of the Week: Create a .NET MAUI Stacked Area Chart to Visualize US School Revenue as a Share of GDP by Funding Sources")
- [Introducing the .NET MAUI Navigation Drawer Control](https://www.syncfusion.com/blogs/post/dotnet-maui-navigation-drawer.aspx "Blog: Introducing the .NET MAUI Navigation Drawer Control")
- [Chart of the Week: Creating a .NET MAUI Dynamic Bar Race Chart for the Top 10 Populations in the World](https://www.syncfusion.com/blogs/post/dotnet-maui-bar-race-chart.aspx "Blog: Chart of the Week: Creating a .NET MAUI Dynamic Bar Race Chart for the Top 10 Populations in the World")