---
title: "Chart of the Week: Create a .NET MAUI Stacked Area Chart to Visualize US School Revenue as a Share of GDP by Funding Sources"
published_at: "2023-12-29T07:14:02+00:00"
modified_at: "2026-01-09T08:01:31+00:00"
url: "https://www.syncfusion.com/blogs/post/dotnet-maui-stacked-area-chart-gdp"
excerpt: "This blog explains how to visualize US school revenue data as a share of GDP by funding sources, using Syncfusion .NET MAUI Stacked Area Chart."
taxonomy_category:
  - ".NET MAUI"
  - "Chart"
  - "Chart of the week"
  - "Desktop"
  - "Mobile"
  - "Syncfusion"
  - "UI"
taxonomy_post_tag:
  - ".NET MAUI"
  - "Charts"
  - "desktop"
  - "MAUI"
  - "Mobile"
---

[Chart of the week](https://www.syncfusion.com/blogs/category/chart-of-the-week)
# Chart of the Week: Create a .NET MAUI Stacked Area Chart to Visualize US School Revenue as a Share of GDP by Funding Sources

[Arul Jenith Berkmans](https://www.syncfusion.com/blogs/author/arul-jenith-berkmans)

![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/wp-content/uploads/2023/12/Chart-of-the-Week-Create-a-.NET-MAUI-Stacked-Area-Chart-to-Visualize-US-School-Revenue-as-a-Share-of-GDP-by-Funding-Sources-1.png)


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

Today, we’ll visualize data on US school revenue as a share of GDP by funding source using the Syncfusion [.NET MAUI Stacked Area Chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts/chart-types/maui-stacked-area-chart)
.

Before we dive in, it’s important to understand the significance of visualizing data. Imagine you are on a sales or marketing team, and you need to analyze product sales revenue reports over a period. The dataset is very large, making it difficult to fully understand the information from raw numbers alone. Visualizations like stacked area charts offer a clear and straightforward way to analyze such data, making the information more accessible and easier to understand.

A stacked area chart allows users to observe changes in values over time while highlighting the contributions of each component. This chart type is particularly effective in displaying the proportional distribution of revenue sources, giving us a comprehensive view of finances.

The following GIF image shows the stacked area chart we’re going to create.![Visualizing US Schools Revenue as a share of GDP by Funding Sources using .NET MAUI Stacked Area Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/US-Schools-Revenue-as-a-share-of-GDP-by-Funding-Source.gif)

Let’s get started with this Syncfusion .NET MAUI Stacked Area Chart!

## Step 1: Gather the data

Before building the chart, we need to gather the [US school revenue as a share of GDP by funding sources](https://ourworldindata.org/grapher/revenues-for-public-schools-by-source-gdp-us)
 data. We can download the data in CSV format.

## Step 2: Prepare the data for the chart

Let’s create the **FundingSourceModel** class that includes the properties to store the details about the data.

Refer to the following code example.

```
public class FundingSourceModel
{
    public string Year {get; set;}
    public double LocalFund {get; set;}
    public double StateFund {get; set;}
    public double FederalFund {get; set;}
    
    public FundingSourceModel(string year, double localFund, double stateFund, double federalFund)
    {
        Year = year;
        LocalFund = localFund;
        StateFund = stateFund;
        FederalFund = federalFund;
    }
}
```

Next, create the **FundingSourceViewModel** class to configure the data over the years. Then, store it in an observable collection using the ** FundingSourceCollection** property.

```
public class FundingSourceViewModel
{
    private ObservableCollection<FundingSourceModel> fundingSourceCollection;
    public ObservableCollection<FundingSourceModel> FundingSourceCollection
    {
        get
        {
            return fundingSourceCollection;
        }
        set
        {
            fundingSourceCollection = value;
        }
    }
    public FundingSourceViewModel()
    {
        FundingSourceCollection = new ObservableCollection<FundingSourceModel>();
        ReadCSV();
    }
}
```

Then, convert the CSV data to a collection of funding data using the **ReadCSV** method.

```
public void ReadCSV()
{
    Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly;
    Stream? inputStream = executingAssembly.GetManifestResourceStream("PublicSchoolsFunding.Resources.raw.data.csv");
    
    string? line;
    List<string> lines = new List<string>();
    
    if (inputStream != null)
    {
        using StreamReader reader = new StreamReader(inputStream);
        while ((line = reader.ReadLine()) != null)
        {
            lines.Add(line);
        }
        lines.RemoveAt(0);
        
        foreach (var dataPoint in lines)
        {
            string[] data = dataPoint.Split(',');
            
            string year = data[0];
            var localFund = Convert.ToDouble(data[1]);
            var stateFund = Convert.ToDouble(data[2]);
            var federalFund = Convert.ToDouble(data[3]);
            FundingSourceCollection.Add(new FundingSourceModel(year, localFund, stateFund, federalFund));
        }
    }
}
```

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

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

Refer to the following code example.

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

</chart:SfCartesianChart>
```

## Step 4: Bind data to the Stacked Area Chart

To visualize the funding data, we‘ll use the Syncfusion [stacked area series](https://help.syncfusion.com/maui/cartesian-charts/stackedarea)
.

Make sure to configure the **FundingSourceViewModel** class to bind its properties to the chart’s ** BindingContext**.

Refer to the following code example.

```
<ContentPage.BindingContext>
 <viewModel:FundingSourceViewModel x:Name="viewModel"/>
</ContentPage.BindingContext>

<chart:SfCartesianChart>
 . . .  
 <chart:StackingAreaSeries x:Name="Series1" 
                           ItemsSource="{Binding FundingSourceCollection}"
                           XBindingPath="Year"
                           YBindingPath="FederalFund"/>
                                                 
 <chart:StackingAreaSeries x:Name="Series2" 
                           ItemsSource="{Binding FundingSourceCollection}"
                           XBindingPath="Year"
                           YBindingPath="StateFund"/>
 
 <chart:StackingAreaSeries x:Name="Series3" 
                           ItemsSource="{Binding FundingSourceCollection}"
                           XBindingPath="Year"
                           YBindingPath="LocalFund"/>

</chart:SfCartesianChart>
```

In the previous code example, we’ve bound the **ItemSource** property with the ** FundingSourceCollection**. The ** XBindingPath** and ** YBindingPath** properties are bound with the year and type of fund data, respectively.

## Step 5: Customize the chart appearance

Let’s customize the Syncfusion .NET MAUI Stacked Area Chart appearance to enhance its readability.

### Customize the chart title

Refer to the following example to customize the chart title.

```
<chart:SfCartesianChart>
 
 <chart:SfCartesianChart.Title>
  <HorizontalStackLayout Padding="0,0,0,20">
   
   <BoxView BackgroundColor="#FF855FF2" 
            Margin="5,0,5,0" 
            HeightRequest="40"  
            WidthRequest="10"/>
   
   <VerticalStackLayout>
    <Label Text="Funding sources for public schools, United States, 1890 to 2010"
           TextColor="Black"
           FontSize="18"
           FontFamily="TimeSpan"
           FontAttributes="Bold"
           Margin="0,0,0,0" />
    
    <Label Text="Revenues for public elementary and secondary schools in the US, as share of GDP, by source of funds"
           TextColor="Black"
           FontSize="12"
           FontFamily="TimeSpan"
           Margin="0,5,0,0"/>
   
    </VerticalStackLayout>
  
  </HorizontalStackLayout>
 </chart:SfCartesianChart.Title>

</chart:SfCartesianChart>
```

### Customize the chart legend

Refer to the following code example to initialize the chart legend.

```
. . . 
<chart:SfCartesianChart.Legend>
 <chart:ChartLegend Placement="Bottom"/>
</chart:SfCartesianChart.Legend>

. . . 

<chart:StackingAreaSeries Label="Federal/Unassigned" 
                          LegendIcon="SeriesType"/>

<chart:StackingAreaSeries Label="State" 
                          LegendIcon="SeriesType"/>
    
<chart:StackingAreaSeries Label="Local"
                             LegendIcon="SeriesType"/>
```

### Customize the chart axes

Now, customize the chart’s x- and y-axes using the [LabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_LabelStyle)
, [Interval](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CategoryAxis.html#Syncfusion_Maui_Charts_CategoryAxis_Interval)
, [ShowMajorGridLines](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_ShowMajorGridLines)
, [EdgeLabelsDrawingMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_EdgeLabelsDrawingMode)
, [AxisLineStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_AxisLineStyle)
, and [MajorTickStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_MajorTickStyle)
 properties.

Refer to the following code example.

```
<chart:SfCartesianChart.XAxes>
 <chart:CategoryAxis ShowMajorGridLines="False" EdgeLabelsDrawingMode="Center" Interval="10"/>
</chart:SfCartesianChart.XAxes>
            
<chart:SfCartesianChart.YAxes>
 
 <chart:NumericalAxis>
  <chart:NumericalAxis.MajorTickStyle>
   <chart:ChartAxisTickStyle StrokeWidth="0" />
  </chart:NumericalAxis.MajorTickStyle>
                    
  <chart:NumericalAxis.AxisLineStyle>
   <chart:ChartLineStyle StrokeWidth="0" />
  </chart:NumericalAxis.AxisLineStyle>
                    
  <chart:NumericalAxis.LabelStyle>
   <chart:ChartAxisLabelStyle LabelFormat="0'%"/>
  </chart:NumericalAxis.LabelStyle>
                    
  <chart:NumericalAxis.Title>
   <chart:ChartAxisTitle Text="Share of GDP"/>
  </chart:NumericalAxis.Title>
 </chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>>
```

### Customize the chart series

Then, customize the chart series using the [Fill](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_Fill)
, [Stroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.StackingSeriesBase.html#Syncfusion_Maui_Charts_StackingSeriesBase_Stroke)
, [StrokeWidth](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.XYDataSeries.html#Syncfusion_Maui_Charts_XYDataSeries_StrokeWidth)
, and [Opacity](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_Opacity)
 properties.

```
<chart:SfCartesianChart.Series>
 
 <chart:StackingAreaSeries Fill="#E1AA74"
                           Opacity="0.8"
                           Stroke="#E1AA74"
                           StrokeWidth="1.5"/>
 <chart:StackingAreaSeries Fill="#3876BF"
                           Opacity="0.9"
                           Stroke="#3876BF"
                           StrokeWidth="1.5"/>
 <chart:StackingAreaSeries Fill="#2b408c"
                           Opacity="0.9"
                           Stroke="#3a4e99"
                           StrokeWidth="1.5"/>
</chart:SfCartesianChart.Series>
```

## Adding interactivity to the chart

To enhance our chart’s readability with additional information, let’s add and customize the tooltip using the [Tooltip template](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_TooltipTemplate)
 property.

```
<chart:SfCartesianChart.Resources>
 
 <DataTemplate x:Key="FederalTooltipTemplate">
  
  <HorizontalStackLayout>
   <BoxView BackgroundColor="#E1AA74" Margin="5,0,5,0" WidthRequest="5"/>
   
   <VerticalStackLayout>
    <Label Text="{Binding Item.Year, StringFormat='Year  : {0}'}" TextColor="White"/>
    <Label Text="{Binding Item.FederalFund,StringFormat='{0}%'}" TextColor="White"/>
   </VerticalStackLayout>
  </HorizontalStackLayout>
 
 </DataTemplate>
 
 <DataTemplate x:Key="StateTooltipTemplate">
  
  <HorizontalStackLayout>
   <BoxView BackgroundColor="#3876BF" Margin="5,0,5,0" WidthRequest="5"/>
   
   <VerticalStackLayout>
    <Label Text="{Binding Item.Year, StringFormat='Year  : {0}'}" TextColor="White"/>
    <Label Text="{Binding Item.StateFund, StringFormat='{0}%'}" TextColor="White"/>
   </VerticalStackLayout>
  </HorizontalStackLayout>
 
 </DataTemplate>
 
 <DataTemplate x:Key="LocalTooltipTemplate">
  
  <HorizontalStackLayout>
   <BoxView BackgroundColor="#2b408c" Margin="5,0,5,0" WidthRequest="5"/>
   
   <VerticalStackLayout>
    <Label Text="{Binding Item.Year,StringFormat='Year  : {0}'}" TextColor="White"/>
    <Label Text="{Binding Item.LocalFund, StringFormat='{0}%'}" TextColor="White"/>
   </VerticalStackLayout>
  </HorizontalStackLayout>
 
 </DataTemplate>
</chart:SfCartesianChart.Resources>
<chart:StackingAreaSeries EnableTooltip="True" 
                          TooltipTemplate="{StaticResource FederalTooltipTemplate}"/>
<chart:StackingAreaSeries EnableTooltip="True"
                          TooltipTemplate="{StaticResource StateTooltipTemplate}"/>
<chart:StackingAreaSeries EnableTooltip="True"
                          TooltipTemplate="{StaticResource LocalTooltipTemplate}"/>
```

After running the previous code examples, the output will look like the following GIF image.

![Visualizing US Schools Revenue as a share of GDP by Funding Source Using .NET MAUI Stacked Area Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Visualizing-US-Schools-Revenue-as-a-share-of-GDP-by-Funding-Source-Using-.NET-MAUI-Stacked-Area-Chart.gif)

Visualizing US Schools Revenue as a share of GDP by Funding Sources Using .NET MAUI Stacked Area Chart

## GitHub reference

For more details, refer to the complete project on [GitHub](https://github.com/SyncfusionExamples/Creating-a-Stacked-Area-Chart-to-visualize-US-schools-Revenue-as-a-share-of-GDP-by-funding-source/tree/master)
.

## Conclusion

Thanks for reading! In this blog, we’ve seen how to visualize the revenue of US schools as a share of GDP by funding sources using the Syncfusion [.NET MAUI stacked area chart](https://help.syncfusion.com/maui/cartesian-charts/stackedarea)
. We strongly encourage you to follow the steps outlined in this blog and share your thoughts in the comments below.

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

## Related blogs

- [Syncfusion Essential Studio® 2023 Volume 4 Is Here!](https://www.syncfusion.com/blogs/post/essential-studio-2023-volume-4.aspx)
- [Introducing the .NET MAUI Navigation Drawer Control](https://www.syncfusion.com/blogs/post/dotnet-maui-navigation-drawer.aspx)
- [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)
- [Easily Integrate the Syncfusion Blazor PDF Viewer in Your .NET MAUI Apps](https://www.syncfusion.com/blogs/post/blazor-pdf-viewer-in-dotnet-maui.aspx)