Chart of the Week: Create a Line Chart to Visualize the Surge in U.S. Egg Prices
Tags: dotnetmaui, charts, mobile, datavisualization
Published: 2023-05-18 12:30:53

---
title: Chart of the Week: Create a Line Chart to Visualize the Surge in U.S. Egg Prices
published: true
date: 2023-05-18 10:00:00 UTC
tags: dotnetmaui, charts, mobile, datavisualization
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-line-chart-visualize-egg-price.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vrh0bg8mdul44w5qq20d.png
---
Welcome to the second blog of our blog series, **Chart of the Week**!

Today, we are going to create a line chart to visualize the rising average egg prices in the U.S. using the Syncfusion [.NET MAUI line chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts/chart-types/maui-line-chart ".NET MAUI Line Chart") control. This control is supported on both desktop (Windows and MacCatalyst) and mobile platforms (Android and iOS).

Due to avian influenza, the national average egg price in the United States has increased by 120% since the beginning of 2022. The national average cost for a dozen large, grade A eggs more than doubled, from $1.93 in January to $4.25 in December 2022.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Syncfusion-.NET-MAUI-line-chart-showing-the-surge-in-U.S.-egg-prices-in-2022.png" alt="Syncfusion .NET MAUI line chart showing the surge in U.S. egg prices in 2022" style="width:100%">

  <figcaption>Syncfusion .NET MAUI line chart showing the surge in U.S. egg prices in 2022</figcaption>

</figure>

Let’s see the steps to create a line chart visualizing the surge in U.S. egg prices in 2022 using the Syncfusion .NET MAUI line chart control.

## Step 1: Gathering surge in egg price data

Before creating a chart, we should gather the egg price data from the [United States consumer price index](https://www.bls.gov/charts/consumer-price-index/consumer-price-index-average-price-data.htm "United States consumer price index").

For this blog, we are obtaining data on the rise in egg prices from January to December 2022. You can also download it as a CSV file.

## Step 2: Preparing the data for the chart

To create a line chart in .NET MAUI, we should provide the egg price data in a specific format. Therefore, create the **EggPriceModel** class to hold monthly data using the **Month** and **AveragePrice** properties.

Refer to the following code example.

```csharp
public class EggPriceModel
{
    public DateTime Month { get; set; }
    public double AveragePrice { get; set; }

    public EggPriceModel(DateTime month, double averagePrice)
    {
       Month = month;
       AveragePrice = averagePrice;
    }
}
```

Next, generate the collection of egg prices with the help of the **AverageEggPrices** class and its **AveragePrices** property. Convert the CSV data to a collection of egg prices using the **ReadCSV** method and store it in the **AveragePrices** property.

```csharp
public class AverageEggPrices 
{
    private List<EggPriceModel> averagePrices;
    public List<EggPriceModel> AveragePrices
    { 
       get{ return averagePrices; }
       set
       {
          averagePrices = value;
       }
    }

    public AverageEggPrices()
    {
        AveragePrices = new List<EggPriceModel>(ReadCSV());
    }

    public IEnumerable<EggPriceModel> ReadCSV()
    {
        Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly;
        Stream inputStream = executingAssembly.GetManifestResourceStream("EggPriceChart.Resources.Raw.eggpricechart.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(',');
           DateTime date = DateTime.ParseExact(data[0], "MMMM", CultureInfo.InvariantCulture);
           return new EggPriceModel((date), Convert.ToDouble(data[1]));
        });
   }
}
```

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

Let’s 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 the code example.

```xml
<chart:SfCartesianChart >
 <chart:SfCartesianChart.XAxes>
  <chart:DateTimeAxis >
  </chart:DateTimeAxis>
 </chart:SfCartesianChart.XAxes>

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

## Step 4: Binding egg price data

Now, let’s bind the egg price data in the chart using the **LineSeries**. Refer to the following code example.

```xml
<chart:LineSeries XBindingPath="Month" YBindingPath="AveragePrice" ItemsSource="{Binding AveragePrices}">
</chart:LineSeries>
```

In this example, we bound our chart to the **AveragePrices** property containing the monthly egg price data. We have also specified the x and y critical paths with the **Month** and **AveragePrice** properties, respectively, which inform the chart about the data points to be utilized for the x- and y-axes.

## Step 5: Customizing the chart appearance.

We can customize the line chart’s appearance by changing the axis elements’ appearance, like showing data labels at the line points, changing the line style, adding data markers, and adding titles to the charts.

Refer to the following code example to customize the line chart title using the **Title** property.

```xml
<chart:SfCartesianChart.Title>
 <Grid HeightRequest="100">
  <Grid.RowDefinitions>
   <RowDefinition Height="0.7*"/>
   <RowDefinition Height="0.3*"/>
  </Grid.RowDefinitions>
  <Label Grid.Row="0" Margin="3" Text="Average Egg Price Surges" HorizontalOptions="StartAndExpand"
         VerticalOptions="CenterAndExpand"
         FontAttributes="Bold" TextColor="Black" FontSize="Header" />
  <Label Grid.Row="1" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand"
         Text="The average price for a dozen grade A eggs in the U.S. rose in 2022" 
         TextColor="Black" FontAttributes="Bold" FontSize="20"/>
 </Grid>
</chart:SfCartesianChart.Title>

```

Let’s customize the axis title and set the interval type, text color, font size, and other properties.

```xml
<chart:SfCartesianChart.XAxes>
 <chart:DateTimeAxis ShowMajorGridLines="False" IntervalType="Months" Interval="1" 
                     EdgeLabelsDrawingMode="Fit">
  <chart:DateTimeAxis.Title>
   <chart:ChartAxisTitle TextColor="Black" FontSize="14" Text="Month">
   </chart:ChartAxisTitle>
  </chart:DateTimeAxis.Title> 
 </chart:DateTimeAxis>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
 <chart:NumericalAxis>
  <chart:NumericalAxis.Title>
   <chart:ChartAxisTitle TextColor="Black" FontSize="14" Text="Price USD">
   </chart:ChartAxisTitle>
  </chart:NumericalAxis.Title>
 </chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>
```

Refer to the following code example to customize the line chart’s axis lines and tick lines.

```xml
<chart:SfCartesianChart.XAxes>
 <chart:DateTimeAxis >
  <chart:DateTimeAxis.AxisLineStyle>
   <chart:ChartLineStyle Stroke="GhostWhite" />
  </chart:DateTimeAxis.AxisLineStyle>

  <chart:DateTimeAxis.MajorTickStyle>
   <chart:ChartAxisTickStyle Stroke="GhostWhite" />
  </chart:DateTimeAxis.MajorTickStyle>
 </chart:DateTimeAxis>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
 <chart:NumericalAxis >
  <chart:NumericalAxis.AxisLineStyle>
   <chart:ChartLineStyle Stroke="GhostWhite" />
  </chart:NumericalAxis.AxisLineStyle>

  <chart:NumericalAxis.MajorTickStyle>
   <chart:ChartAxisTickStyle Stroke="GhostWhite" />
  </chart:NumericalAxis.MajorTickStyle>
 </chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>

```

Refer to the following code example to customize the axis labels using the **LabelFormat** property and set the **Minimum** and **Maximum** properties for the **NumericalAxis**.

```xml
<chart:SfCartesianChart.XAxes>
 <chart:DateTimeAxis.LabelStyle>
  <chart:ChartAxisLabelStyle LabelFormat="MMM" FontSize="13"
                             TextColor="Black" />
 </chart:DateTimeAxis.LabelStyle>
 </chart:DateTimeAxis>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
 <chart:NumericalAxis Minimum="1.5" Maximum="5">
  <chart:NumericalAxis.LabelStyle>
   <chart:ChartAxisLabelStyle LabelFormat="$###.##" FontSize="13"
                              TextColor="Black" />
  </chart:NumericalAxis.LabelStyle>
 </chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>

```

Then, customize the line stroke style, color, and width using the **StrokeDashArray** , **Fill,** and **StrokeWidth** properties, respectively.

```xml
<chart:LineSeries x:Name="series" Fill="#e19620" StrokeWidth="5" StrokeDashArray="2,3,3"
                  XBindingPath="Month" YBindingPath="AveragePrice" ShowMarkers="True"
                  ShowDataLabels="True" ItemsSource="{Binding AveragePrices}">
</chart:LineSeries>
```

Customize the chart data labels using the **CartesianDataLabelSettings** property and the label style with the appropriate format. To show the data labels, we need to enable the **ShowDataLabels** property in the **LineSeries**.

```xml
<chart:LineSeries.DataLabelSettings>
 <chart:CartesianDataLabelSettings LabelPlacement="Outer" UseSeriesPalette="False">
  <chart:CartesianDataLabelSettings.LabelStyle>
   <chart:ChartDataLabelStyle LabelFormat="$###.##" Margin="0,25,0,0" LabelPadding="10" FontAttributes="Bold" />
  </chart:CartesianDataLabelSettings.LabelStyle>
 </chart:CartesianDataLabelSettings>
</chart:LineSeries.DataLabelSettings>
```

Then, customize the chart’s data points using the **MarkerSetting** property and enable the markers using the **ShowMarkers** property in the **LineSeries**.

```xml
<chart:LineSeries.MarkerSettings>
 <chart:ChartMarkerSettings Height="55" Width="20" Fill="white" Type="Circle"
                             Stroke="Black" StrokeWidth="2" >
 </chart:ChartMarkerSettings>
</chart:LineSeries.MarkerSettings>
```

Finally, let’s customize the chart’s plot area like in the following code example.

```xml
<chart:SfCartesianChart.PlotAreaBackgroundView>
 <AbsoluteLayout BackgroundColor="#c8e1f7">
  <Label LineBreakMode="WordWrap" Margin="10" TextColor="Gray"
         WidthRequest="{OnPlatform Android='300',WinUI='500',iOS='300',MacCatalyst='500'}" 
         Text="A few years ago, Avian flu caused egg prices to rise by 40% within nine months. By September 2015, the price of a dozen eggs had increased to $2.97." 
         FontSize="{OnPlatform WinUI='13',Android='10',MacCatalyst='13',iOS='10'}" 
         AbsoluteLayout.LayoutBounds="0,0.04,-1,-1"
	 AbsoluteLayout.LayoutFlags="PositionProportional"/>
 </AbsoluteLayout>
</chart:SfCartesianChart.PlotAreaBackgroundView>
```

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

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Syncfusion-.NET-MAUI-line-chart-showing-the-surge-in-U.S.-egg-prices-in-2022.png" alt="Syncfusion .NET MAUI line chart showing the surge in U.S. egg prices in 2022" style="width:100%">

  <figcaption>Syncfusion .NET MAUI line chart showing the surge in U.S. egg prices in 2022</figcaption>

</figure>

## GitHub reference

For more details, refer to the [demo on GitHub](https://github.com/SyncfusionExamples/Create-a-Line-Chart-showing-U.S.-Egg-Prices-more-than-Twice-in-2022 "Create a line chart to visualize surge in U.S. egg prices in 2022 GitHub demo").

## Conclusion

Thanks for reading! In this blog, we have seen how to use the [Syncfusion .NET MAUI line chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts/chart-types/maui-line-chart "Syncfusion .NET MAUI line chart") to visualize the rise in U.S. egg prices in 2022. Like this, you can also visualize other trends and changes in prices over time. 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

- [Simplify Data Visualization with Multi-Axis Charts in .NET MAUI](https://www.syncfusion.com/blogs/post/simplify-data-visualization-with-multi-axis-charts-in-net-maui.aspx "Blog: Simplify Data Visualization with Multi-Axis Charts in .NET MAUI")
- [Streamline MAUI Projects with the Syncfusion .NET MAUI Template Studio](https://www.syncfusion.com/blogs/post/dotnet-maui-template-studio.aspx "Blog: Streamline MAUI Projects with the Syncfusion .NET MAUI Template Studio")
- [Elevate Your App’s User Experience with the New .NET MAUI Shimmer Control](https://www.syncfusion.com/blogs/post/dotnet-maui-shimmer-control.aspx "Blog: Elevate Your App’s User Experience with the New .NET MAUI Shimmer Control")
- [Chart of the Week: Creating a .NET MAUI Column Chart to Visualize Yearly Box Office Data](https://www.syncfusion.com/blogs/post/dotnet-maui-column-chart-visualize-yearly-box-office-data.aspx "Blog: Creating a .NET MAUI Column Chart to Visualize Yearly Box Office Data")