Chart of the week: Creating a line chart with plot bands to explore global GNI per capita with income thresholds
Tags: dotnetmaui, dotnet, chart, chartoftheweek
Published: 2024-05-20 15:26:44

---
title: Chart of the week: Creating a line chart with plot bands to explore global GNI per capita with income thresholds
published: true
date: 2024-05-15 14:36:29 UTC
tags: dotnetmaui, dotnet, chart, chartoftheweek
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-line-chart-gni-per-capita-plot-bands
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4vzkp8t4s0trw94md6c.png
---
**TL;DR:** Explore global Gross National Income (GNI) per capita and income thresholds through a line chart created with Syncfusion’s .NET MAUI Cartesian Chart control. Discover how to gather and link data to the chart while enhancing visualization by customizing elements such as title, axis, and tooltip.

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

Today, we’ll use [Syncfusion’s .NET MAUI Cartesian Chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts "Feature Tour: Syncfusion's .NET MAUI Cartesian Chart") control to create a line chart with plot bands. This chart will help us explore global Gross National Income (GNI) per capita alongside income thresholds.

[GNI](https://en.wikipedia.org/wiki/Gross_national_income "Wikipedia: GNI") represents the total income earned by people and businesses in a country. We will analyze GNI values from 2000 to 2018, categorized by country. This control is compatible with desktop platforms such as Windows and Mac, as well as mobile platforms like Android and iOS.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Syncfusion-.NET-MAUI-Cartesian-Chart-Control-1024x497.png" alt="Line chart with plot bands to explore global GNI per capita with income thresholds" style="width:100%">

  <figcaption>Line chart with plot bands to explore global GNI per capita with income thresholds</figcaption>

</figure>

Let’s get started!

## Step 1: Gathering GNI data by country

First, gather data on [the GNI per capita](https://datatopics.worldbank.org/world-development-indicators/stories/the-classification-of-countries-by-income.html "The World Bank"). Choose the countries in which you need data and the format for downloading it. For example, obtain GNI data for Brazil, China, the UK, and the US, and download it in CSV format. After downloading, use the data from 2000 to 2018.

## Step 2: Preparing data for the chart

Create a **model** class that includes properties for storing information about GNI (Gross National Income) country-by-country, along with the corresponding year.

Refer to the following code example.

```csharp
public class Model
{
    public DateTime Year { get; set; }
    public double BrazilGNI { get; set; }
    public double ChinaGNI { get; set; }
    public double UKGNI { get; set; }
    public double USGNI { get; set; }
    public Model(DateTime year, double brazilGNI, double chinaGNI, double ukGNI, double usGNI)
    {
        Year = year;
        BrazilGNI = brazilGNI;
        ChinaGNI = chinaGNI;
        UKGNI = ukGNI;
        USGNI = usGNI;
    }
}

```

Next, read the CSV file and store the GNI values country-wise with the corresponding year in the observable collection of the **EconomicRate** property. Refer to the following code example.

```csharp
public class ViewModel
{
    private DateTime year;
    public ViewModel()
    {
        EconomicRate = new ObservableCollection();
        ReadCSVFile();
    }
    private void ReadCSVFile()
    {
        Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly;
        Stream inputStream = executingAssembly.GetManifestResourceStream("EconomicRatesDemo.Resources.dataset.csv");
        string line;
        ObservableCollection lines = new ObservableCollection();
        if (inputStream != null)
        {
            using (StreamReader reader = new StreamReader(inputStream))
            {
                while ((line = reader.ReadLine()) != null)
                {
                    lines.Add(line);
                }
            }
            lines.RemoveAt(0);
            foreach (var items in lines)
            {
                string[] data = items.Split(',');
                if (int.TryParse(data[0], out int yearValue))
                {
                    year = new DateTime(yearValue, 1, 1);
                }
                double brazilGNI = Convert.ToDouble(data[1]);
                double chinaGNI = Convert.ToDouble(data[2]);
                double ukGNI = Convert.ToDouble(data[3]);
                double usGNI = Convert.ToDouble(data[4]);
                EconomicRate.Add(new Model(year, brazilGNI, chinaGNI, ukGNI, usGNI));
            }
        }
    }
}

```

## Step 3: Layout definition

Define the layout using a  **Border**  element. Inside the border, we’ll utilize a  **Grid**  to place our elements.

Refer to the following code example.

```xml
<Border Background="#e8ebe0" 
                 StrokeThickness="4"
                StrokeShape="{OnPlatform Default= RoundRectangle 40, Android= RoundRectangle 35}"
                Margin="{OnPlatform Default=30, Android= 10}">
 <Grid RowDefinitions="80,*" ColumnDefinitions="*,*" BackgroundColor="Black">
     <VerticalStackLayout Grid.Row="0" Grid.Column="0">
         …
    </VerticalStackLayout>
    <HorizontalStackLayout Grid.Row="0" Grid.Column="1">
       …
    </HorizontalStackLayout>
  </Grid>
</Border>

```

## Step 4: 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 "UG: Getting started with the Syncfusion .NET MAUI Cartesian Charts").

Refer to the following code example.

```xml
 <chart:SfCartesianChart Grid.Row="1" Grid.ColumnSpan="2">
 <chart:SfCartesianChart.XAxes>
     <chart:DateTimeAxis >
           …	
     </chart:DateTimeAxis>
 </chart:SfCartesianChart.XAxes>
 <chart:SfCartesianChart.YAxes>
     <chart:NumericalAxis >
           …
     </chart:NumericalAxis>
 </chart:SfCartesianChart.YAxes>
</chart:SfCartesianChart>

```

## Step 5: Binding data to the chart

We’ll utilize the Syncfusion [Line series](https://help.syncfusion.com/maui/cartesian-charts/line "UG: Line series") instances to visualize the GNI per country yearly. Bind the ViewModel to the page’s binding context to enable access to **ViewModel** properties. Then, bind the **Year** and **GNI properties** to the **X** and **Y** axes using the **[XBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_XBindingPath "API Reference: XBindingPath")** and **[YBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.XYDataSeries.html#Syncfusion_Maui_Charts_XYDataSeries_YBindingPath "API Reference: YBindingPath")** respectively. Additionally, bind the collection to **[ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ItemsSource "API Reference: ItemsSource")** to the EconomicRate.

Refer to this code example.

```xml
<ContentPage.BindingContext>
     <local:ViewModel/>
</ContentPage.BindingContext>
<chart:SfCartesianChart Grid.Row="1" Grid.ColumnSpan="2">
    <chart:LineSeries ItemsSource="{Binding EconomicRate}"
                                    XBindingPath="Year" 
                                   YBindingPath="BrazilGNI" />
    <chart:LineSeries ItemsSource="{Binding EconomicRate}"
                                    XBindingPath="Year" 
                                    YBindingPath="ChinaGNI" />
    <chart:LineSeries ItemsSource="{Binding EconomicRate}"
                                    XBindingPath="Year" 
                                    YBindingPath="UKGNI" />
    <chart:LineSeries ItemsSource="{Binding EconomicRate}"
                                    XBindingPath="Year" 
                                    YBindingPath="USGNI" />
</chart:SfCartesianChart>

```

## Step 6: Setting plot bands to the Y-axis.

We use [NumericalPlotBand](https://help.syncfusion.com/maui/cartesian-charts/plotband#numerical-plotband "UG: NumericalPlotBand") to shade three regions: **lower GNI, middle GNI, and upper GNI** regions and also add corresponding text. These plot bands are created and added to the [NumericalPlotBandCollection](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.NumericalPlotBandCollection.html "API Reference: NumericalPlotBandCollection"). The [Start](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.NumericalPlotBand.html#Syncfusion_Maui_Charts_NumericalPlotBand_Start "API Reference: Start") and [End](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.NumericalPlotBand.html#Syncfusion_Maui_Charts_NumericalPlotBand_End "API Reference: End") APIs determine each shading region’s beginning and end positions. We can customize the text for the plot bands using [ChartPlotBandLabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartPlotBandLabelStyle.html#properties "API Reference: ChartPlotBandLabelStyle").       

Refer to the following code example.

```xml
<chart:SfCartesianChart.YAxes>
     <chart:NumericalAxis >
    <!—Lower GNI plot band-->
         <chart:NumericalAxis.PlotBands>
             <chart:NumericalPlotBandCollection>
                 <chart:NumericalPlotBand Start="0" End="5000" 
                                                                  Fill="#3d5c5c"
                                                                  Text="Lower">
                     <chart:NumericalPlotBand.LabelStyle>
                         <chart:ChartPlotBandLabelStyle TextColor="White"/>
                     </chart:NumericalPlotBand.LabelStyle>
                 </chart:NumericalPlotBand>
                   <!--Middle GNI plot band-->
                 <chart:NumericalPlotBand Start="30000" End="35000" 
                                                                   Fill="#3d5c5c"
                                                                   Text="Middle">
                     <chart:NumericalPlotBand.LabelStyle>
                         <chart:ChartPlotBandLabelStyle TextColor="White"/>
                     </chart:NumericalPlotBand.LabelStyle>
                 </chart:NumericalPlotBand>
                  <!--Higher GNI plot band-->
                 <chart:NumericalPlotBand Start="58500" End="63500" 
                                                                  Fill="#3d5c5c"
                                                                  Text="Higher">
                     <chart:NumericalPlotBand.LabelStyle>
                         <chart:ChartPlotBandLabelStyle TextColor="White"/>
                     </chart:NumericalPlotBand.LabelStyle>
                 </chart:NumericalPlotBand>
             </chart:NumericalPlotBandCollection>
         </chart:NumericalAxis.PlotBands>
     </chart:NumericalAxis>
 </chart:SfCartesianChart.YAxes>

```

## Step 7: Customizing the chart appearance

Let’s enhance the visual appeal of the line series along with plot bands and their elements. We’ll customize the look of the line graph by adjusting various properties and styles.

### Adding chart title

In the **VerticalStackLayout** , a Label element is used to place the chart title and description vertically. In the **HorizontalStackLayout** , BoxView elements and labels are added to indicate which countries have which line series, using color in the BoxView. Customize the chart title like in the following code example.

```xml
<VerticalStackLayout Grid.Row="0" Grid.Column="0">
     <Label Text="Exploring Global GNI per Capita with Income Thresholds" 
                  TextColor="#e6e600"
                  FontAttributes="Bold"
                  FontSize="{OnPlatform Android=15, iOS= 15, Default= 20 }"
                  Margin="{OnPlatform Default='35,10,0,0'}"/>
     <Label Text="Gross National Income (GNI) is the total income earned by a country's people and businesses. Here, GNI values from 2000 to 2018 shared country-wise." 
                  TextColor="White"
                   FontSize="12"
                   Margin="{OnPlatform Default='35,0,0,0'}"/>
 </VerticalStackLayout>
 <HorizontalStackLayout Grid.Row="0" Grid.Column="1" HeightRequest="40" WidthRequest="350">
     <BoxView HeightRequest="1" WidthRequest="20"
                        BackgroundColor="#b1f48a"/>
     <Label Text="Brazil" TextColor="White" Margin="{OnPlatform Default='2,9,0,0'}" />
     <BoxView HeightRequest="1" WidthRequest="20"
                       BackgroundColor="#f7a7a1" Margin="{OnPlatform Default='20,0,0,0'}"/>
     <Label Text="China" TextColor="White" Margin="{OnPlatform Default='2,9,0,0'}"/>
     <BoxView HeightRequest="1" WidthRequest="20"
                        BackgroundColor="#ffe799" Margin="{OnPlatform Default='20,0,0,0'}"/>
     <Label Text="UK" TextColor="White" Margin="{OnPlatform Default='2,9,0,0'}"/>
     <BoxView HeightRequest="1" WidthRequest="20"
                        BackgroundColor="#e6e6ff" Margin="{OnPlatform Default='20,0,0,0'}"/>
     <Label Text="US" TextColor="White" Margin="{OnPlatform Default='2,9,0,0'}"/>
 </HorizontalStackLayout>

```

### Customizing the axes

Let’s customize the primary and secondary axes using the following properties:

[ShowMajorGridLines](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html?tabs=tabid-7%2Ctabid-5%2Ctabid-11%2Ctabid-15%2Ctabid-13%2Ctabid-21%2Ctabid-33%2Ctabid-19%2Ctabid-1%2Ctabid-9%2Ctabid-23%2Ctabid-25%2Ctabid-3%2Ctabid-31%2Ctabid-17%2Ctabid-29%2Ctabid-27%2Ctabid-37%2Ctabid-35#Syncfusion_Maui_Charts_ChartAxis_ShowMajorGridLines "API Reference : ShowMajorGridLines") – Control the visibility of grid lines.

[PlotOffsetStart](https://help.syncfusion.com/maui/cartesian-charts/axis/padding#plotoffsetstart "API Reference: PlotOffsetStart") – Used to provide padding to the axis at the start position.

[PlotOffserEnd](https://help.syncfusion.com/maui/cartesian-charts/axis/padding#plotoffsetend "API Reference: PlotOffserEnd") – Used to provide padding to the axis at the end position. 

[Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_Title "API Reference: Title") – Used to set titles for chart axes.

[ChartAxisLabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxisLabelStyle.html?tabs=tabid-1 "API Reference: ChartAxisLabelStyle") – Used to customize axis labels.

Refer to the following code example.

```xml
<chart:SfCartesianChart.XAxes>
      <chart:DateTimeAxis ShowMajorGridLines="False" PlotOffsetStart="7" PlotOffsetEnd="20">
          <chart:DateTimeAxis.Title>
              <chart:ChartAxisTitle Text="Years" TextColor="White"/>
          </chart:DateTimeAxis.Title>
          <chart:DateTimeAxis.LabelStyle>
              <chart:ChartAxisLabelStyle TextColor="White"/>
          </chart:DateTimeAxis.LabelStyle>
      </chart:DateTimeAxis>
  </chart:SfCartesianChart.XAxes>
  <chart:SfCartesianChart.YAxes>
      <chart:NumericalAxis ShowMajorGridLines="False" PlotOffsetStart="{OnPlatform Android=5}" >
          <chart:NumericalAxis.Title>
              <chart:ChartAxisTitle Text="GNI per capita, Atlas (in dollar)" TextColor="White"/>
          </chart:NumericalAxis.Title>
          <chart:NumericalAxis.LabelStyle>
              <chart:ChartAxisLabelStyle TextColor="White"/>
          </chart:NumericalAxis.LabelStyle>
    </chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>

```

### Customizing the line series marker

Let’s customize the line series marker using the following properties:

[ShowMarker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.LineSeries.html?tabs=tabid-1%2Ctabid-28%2Ctabid-6#Syncfusion_Maui_Charts_LineSeries_ShowMarkers "API Reference: ShowMarker"): Used to highlight the position of the data point.

[MarkerSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.LineSeries.html#Syncfusion_Maui_Charts_LineSeries_MarkerSettings "API Reference: MarkerSettings"): To change the series markers’ appearance, create an instance of the **MarkerSettings** property. The following properties are used to customize marker appearance.

- [Type](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartMarkerSettings.html?tabs=tabid-1#Syncfusion_Maui_Charts_ChartMarkerSettings_Type "API Reference: Type"): Used to describe the marker shape.
- [Height](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Charts_ChartMarkerSettings_Height "API Reference: Height"): Indicates the height of the marker.
- [Width](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Charts_ChartMarkerSettings_Width "API Reference: Width"): Indicates the width of the marker.

Refer to the following code example.

```xml
 
<chart:SfCartesianChart>
 <chart:LineSeries ItemsSource="{Binding EconomicRate}"
                                XBindingPath="Year" 
                                YBindingPath="BrazilGNI"
                                ShowMarkers="True">
     <chart:LineSeries.MarkerSettings>
         <chart:ChartMarkerSettings Type="Circle" Height="8" Width="8" />
     </chart:LineSeries.MarkerSettings>
 </chart:LineSeries>

 <chart:LineSeries ItemsSource="{Binding EconomicRate}"
                                 XBindingPath="Year" 
                                 YBindingPath="ChinaGNI"
                                 ShowMarkers="True">
     <chart:LineSeries.MarkerSettings>
         <chart:ChartMarkerSettings Type="Triangle" Height="8" Width="8"/>
     </chart:LineSeries.MarkerSettings>
 </chart:LineSeries>

 <chart:LineSeries ItemsSource="{Binding EconomicRate}"
                                 XBindingPath="Year" 
                                 YBindingPath="UKGNI"
                                 ShowMarkers="True">
     <chart:LineSeries.MarkerSettings>
         <chart:ChartMarkerSettings Type="Hexagon" Height="8" Width="8"/>
     </chart:LineSeries.MarkerSettings>
 </chart:LineSeries>

 <chart:LineSeries ItemsSource="{Binding EconomicRate}"
                                 XBindingPath="Year" 
                                 YBindingPath="USGNI"
                                 ShowMarkers="True">
     <chart:LineSeries.MarkerSettings>
         <chart:ChartMarkerSettings Type="Plus"/>
     </chart:LineSeries.MarkerSettings>
 </chart:LineSeries>
</chart:SfCartesianChart>

```

### Customizing the line series appearance

Using the [PaletteBrushes](https://help.syncfusion.com/maui/cartesian-charts/appearance#custom-palettebrushes "UG: PaletteBrushes") property, we can apply custom brushes to line series. This property is bound to a collection of brushes named CustomBrushes.

```xml
<chart:SfCartesianChart PaletteBrushes="{Binding CustomBrushes}">
      …
</chart:SfCartesianChart>

```
```csharp
public List<Brush> CustomBrushes { get; set; }
  CustomBrushes = new List<Brush>()
  {
      new SolidColorBrush(Color.FromArgb("#b1f48a")),
      new SolidColorBrush(Color.FromArgb("#f7a7a1")),
      new SolidColorBrush(Color.FromArgb("#ffe799")),
      new SolidColorBrush(Color.FromArgb("#e6e6ff")),
  };

```

### Customizing the tooltip using a template

Using the [TooltipTemplate](https://help.syncfusion.com/maui/cartesian-charts/tooltip#template "UG: TooltipTemplate") property in the series allows customization of the tooltip’s appearance. A data template with the data points’ year, country name, and GNI values is created and bound to the **TooltipTemplate** property, with the tooltip enabled. Each line series data point displays its information in the tooltip template.

```xml
<chart:SfCartesianChart>
  <chart:SfCartesianChart.Resources>
     <!--BrazilGNI line series tooltip template-->
     <DataTemplate x:Key="tooltipTemplate1">
         <Grid RowDefinitions="*,*,*" ColumnDefinitions="Auto,*">
             <Label Grid.Row="0" Grid.Column="0"
                           Text="Year : "
	             TextColor="Black"
	             FontSize="12"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
             <Label Grid.Row="0" Grid.Column="1"
                           Text="{Binding Item.Year,StringFormat='{0:yyyy}'}"
                           TextColor="Black"
                           FontSize="12"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
             <Label Grid.Row="1" Grid.Column="0" 
                          Text="Country : "
                          TextColor="Black"
	           FontSize="12"
                         VerticalTextAlignment="Center"
                         HorizontalTextAlignment="Center"/>
             <Label Grid.Row="1" Grid.Column="1"
                          Text="Brazil"
                          TextColor="Black"
                          FontSize="12"
                          VerticalTextAlignment="Center"
                          HorizontalTextAlignment="Center" />
             <Label Grid.Row="2" Grid.Column="0" 
                          Text="GNI : "
                          TextColor="Black"
                          FontSize="12"
                         VerticalTextAlignment="Center"
                         HorizontalTextAlignment="Center"/>
             <Label Grid.Row="2" Grid.Column="1" 
                          Text="{Binding Item.BrazilGNI,StringFormat='${0}'}"
                           TextColor="Black"
                           FontSize="12"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
         </Grid>
     </DataTemplate>
     <!--ChinaGNI line series tooltip template-->
     <DataTemplate x:Key="tooltipTemplate2">
         <Grid RowDefinitions="*,*,*" ColumnDefinitions="Auto,*" >
             <Label Grid.Row="0" Grid.Column="0"
                           Text="Year :"
                           TextColor="Black"
                           FontSize="12"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
             <Label Grid.Row="0" Grid.Column="1"
                           Text="{Binding Item.Year,StringFormat='{0:yyyy}'}"
                           TextColor="Black"
                           FontSize="12"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
             <Label Grid.Row="1" Grid.Column="0" 
                          Text="Country : "
                          TextColor="Black"
                          FontSize="12"
                          VerticalTextAlignment="Center"
                          HorizontalTextAlignment="Center"/>
             <Label Grid.Row="1" Grid.Column="1"
                           Text="China"
                            TextColor="Black"
                            FontSize="12"
                            VerticalTextAlignment="Center"
                            HorizontalTextAlignment="Center"/>
             <Label Grid.Row="2" Grid.Column="0" 
                          Text="GNI : "
                          TextColor="Black"
                           FontSize="12"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
             <Label Grid.Row="2" Grid.Column="1" 
                          Text="{Binding Item.ChinaGNI,StringFormat='${0}'}"
                          TextColor="Black"
                          FontSize="12"
                         VerticalTextAlignment="Center"
                         HorizontalTextAlignment="Center"/>
         </Grid>
     </DataTemplate>
     <!--UKGNI line series tooltip template-->
     <DataTemplate x:Key="tooltipTemplate3">
         <Grid RowDefinitions="*,*,*" ColumnDefinitions="Auto,*" >
             <Label Grid.Row="0" Grid.Column="0"
                           Text="Year :"
                           TextColor="Black"
                           FontSize="12"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
             <Label Grid.Row="0" Grid.Column="1"
                          Text="{Binding Item.Year,StringFormat='{0:yyyy}'}"
                          TextColor="Black"
                          FontSize="12"
                          VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
             <Label Grid.Row="1" Grid.Column="0" 
                          Text="Country : "
                          TextColor="Black"
                           FontSize="12"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
             <Label Grid.Row="1" Grid.Column="1"
                          Text="UK"
                          TextColor="Black"
                          FontSize="12"
                          VerticalTextAlignment="Center"
                          HorizontalTextAlignment="Start"/>
             <Label Grid.Row="2" Grid.Column="0" 
                          Text="GNI : "
                           TextColor="Black"
                           FontSize="12"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
             <Label Grid.Row="2" Grid.Column="1" 
                          Text="{Binding Item.UKGNI,StringFormat='${0}'}"
                          TextColor="Black"
                          FontSize="12"
                          VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
         </Grid>
     </DataTemplate>
     <!--USGNI line series tooltip template-->
     <DataTemplate x:Key="tooltipTemplate4">
         <Grid RowDefinitions="*,*,*" ColumnDefinitions="Auto,*" >
             <Label Grid.Row="0" Grid.Column="0"
                          Text="Year :"
                          TextColor="Black"
                          FontSize="12"
                          VerticalTextAlignment="Center"
                          HorizontalTextAlignment="Center"/>
             <Label Grid.Row="0" Grid.Column="1"
                          Text="{Binding Item.Year,StringFormat='{0:yyyy}'}"
                          TextColor="Black"
                          FontSize="12"/>
             <Label Grid.Row="1" Grid.Column="0" 
                          Text="Country : "
                          TextColor="Black"
                           FontSize="12"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
             <Label Grid.Row="1" Grid.Column="1"
                          Text="US"
                          TextColor="Black"
                          FontSize="12"
                          VerticalTextAlignment="Center"
                          HorizontalTextAlignment="Start"/>
             <Label Grid.Row="2" Grid.Column="0" 
                          Text="GNI :"
                          TextColor="Black"
                          FontSize="12"
                         VerticalTextAlignment="Center"
                         HorizontalTextAlignment="Center"/>
             <Label Grid.Row="2" Grid.Column="1" 
                          Text="{Binding Item.USGNI,StringFormat='${0}'}"
                          TextColor="Black"
                           FontSize="12"
                           VerticalTextAlignment="Center"
                         HorizontalTextAlignment="Center"/>
         </Grid>
     </DataTemplate>
  </chart:SfCartesianChart.Resources>
  <chart:SfCartesianChart.TooltipBehavior>
      <chart:ChartTooltipBehavior Background="White"/>
  </chart:SfCartesianChart.TooltipBehavior>
  <chart:LineSeries EnableTooltip="True"
                   TooltipTemplate="{StaticResource tooltipTemplate1}"/>
  <chart:LineSeries EnableTooltip="True"
                   TooltipTemplate="{StaticResource tooltipTemplate2}"/>
  <chart:LineSeries EnableTooltip="True"
                   TooltipTemplate="{StaticResource tooltipTemplate3}"/>
  <chart:LineSeries EnableTooltip="True"
                   TooltipTemplate="{StaticResource tooltipTemplate4}"/>
</chart:SfCartesianChart>

```

After executing the above code examples, we will get the output that resembles the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Syncfusion-.NET-MAUI-Cartesian-Chart-Control-1024x497.png" alt="Line chart with plot bands to explore global GNI per capita with income thresholds" style="width:100%">

  <figcaption>Line chart with plot bands to explore global GNI per capita with income thresholds</figcaption>

</figure>

## GitHub reference

For more details, refer to the [Line chart with plot bands to explore global GNI per capita with income thresholds demo.](https://github.com/SyncfusionExamples/Creating--a-line-chart-with-plot-bands-to-explore-global-GNI-per-capita-with-income-thresholds "GitHub: Line chart with plot bands to explore global GNI per capita with income thresholds demo.")

## Conclusion

Thank you for reading! We have demonstrated how to explore global GNI per capita with an income thresholds line chart using the [Syncfusion .NET MAUI Cartesian Charts](https://help.syncfusion.com/maui/cartesian-charts/getting-started "UG: Syncfusion .NET MAUI Cartesian Charts") control. We encourage you to follow these steps and share your thoughts on the experience in the comment section below.

The existing customers can download the latest version of Essential Studio from the [License and Downloads](https://www.syncfusion.com/account "License and Downloads") page. If you are new, try our 30-day [free trial](https://www.syncfusion.com/downloads "Free Trial") to explore our incredible features. 

If you require assistance, please don’t hesitate to contact us via our [support forums](https://www.syncfusion.com/forums "Support Forums"), [support portal](https://support.syncfusion.com/ "Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Feedback Portal"). We are always eager to help you!

## Related blogs

- [Exporting DataGrid to Excel Made Easy in .NET MAUI](https://www.syncfusion.com/blogs/post/export-dotnet-maui-datagrid-to-excel "Blog: Exporting DataGrid to Excel Made Easy in .NET MAUI")
- [Easily Create a Directional Compass Using .NET MAUI Radial Gauge](https://www.syncfusion.com/blogs/post/directional-compass-maui-radial-gauge "Blog: Easily Create a Directional Compass Using .NET MAUI Radial Gauge")
- [Creating a .NET MAUI Sunburst Chart to Visualize the Most Popular Wikipedia Articles](https://www.syncfusion.com/blogs/post/dotnet-maui-sunburst-chart-wikipedia "Blog: Chart of the Week: Creating a .NET MAUI Sunburst Chart to Visualize the Most Popular Wikipedia Articles")
- [Create a Modern Conversational UI with the .NET MAUI Chat Control](https://www.syncfusion.com/blogs/post/conversational-ui-dotnet-maui-chat "Blog: Create a Modern Conversational UI with the .NET MAUI Chat Control")