Chart of the Week: Create a Line Chart to Visualize the Surge in U.S. Egg Prices
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (182).NET Core  (26).NET MAUI  (233)Angular  (115)ASP.NET  (49)ASP.NET Core  (80)ASP.NET MVC  (85)Azure  (42)Black Friday Deal  (1)Blazor  (243)BoldSign  (15)DocIO  (24)Essential JS 2  (108)Essential Studio  (198)File Formats  (73)Flutter  (140)JavaScript  (227)Microsoft  (121)PDF  (86)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (987)TypeScript  (32)Uno Platform  (3)UWP  (3)Vue  (45)Webinar  (53)Windows Forms  (59)WinUI  (72)Word  (18)WPF  (165)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (11)Business intelligence  (55)Button  (4)C#  (164)Chart  (154)Chart of the week  (62)Cloud  (16)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (74)Development  (694)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (47)Extensions  (31)File Manager  (8)Gantt  (23)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (530)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (48)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (425)Uncategorized  (68)Unix  (2)User interface  (67)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (648)What's new  (354)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Chart of the Week: Create a Line Chart to Visualize the Surge in U.S. Egg Prices

Chart of the Week: Create a Line Chart to Visualize the Surge in U.S. Egg Prices

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 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.

Syncfusion .NET MAUI line chart showing the surge in U.S. egg prices in 2022
Syncfusion .NET MAUI line chart showing the surge in U.S. egg prices in 2022

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.

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.

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.

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.

Refer to the following the code example.

<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.

<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.

<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.

<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.

<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.

<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.

<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.

<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.

<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.

<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.

Syncfusion .NET MAUI line chart showing the surge in U.S. egg prices in 2022
Visualizing the surge in U.S. egg prices using Syncfusion’s .NET MAUI line chart

GitHub reference

For more details, refer to the demo on GitHub.

Conclusion

Thanks for reading! In this blog, we have seen how to use the 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 forumsupport portal, or feedback portal. We are always eager to help you!

Test Flight
App Center Badge
Google Play Store Badge
Microsoft Badge
Github Store Badge

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed