Chart of the Week: Creating a .NET MAUI Inversed Column Chart to Visualize Meta Reality Labs's Yearly Operating Loss
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (174).NET Core  (29).NET MAUI  (207)Angular  (109)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (41)Black Friday Deal  (1)Blazor  (215)BoldSign  (14)DocIO  (24)Essential JS 2  (107)Essential Studio  (200)File Formats  (66)Flutter  (133)JavaScript  (221)Microsoft  (119)PDF  (81)Python  (1)React  (100)Streamlit  (1)Succinctly series  (131)Syncfusion  (915)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (51)Windows Forms  (61)WinUI  (68)WPF  (159)Xamarin  (161)XlsIO  (36)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (147)Chart  (131)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (628)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (40)Extensions  (22)File Manager  (7)Gantt  (18)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  (507)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (387)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (592)What's new  (332)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Chart of the Week: Creating a .NET MAUI Inversed Column Chart to Visualize Meta Reality Labs’s Yearly Operating Loss

Chart of the Week: Creating a .NET MAUI Inversed Column Chart to Visualize Meta Reality Labs’s Yearly Operating Loss

Welcome to our Chart of the Week blog series. Today, we’ll create an inverted column chart using the Syncfusion .NET MAUI Cartesian Charts control. The inverted column chart is commonly used for plotting comparative data values in reverse order. In this example, we will compare Meta Reality Labs’s yearly operating losses from 2019 to 2022.

Step 1: Gather yearly revenue loss data

Refer to the Meta’s Money Pit: Metaverse Bet Bleeds Billions article by Statista and extract data from it. We will utilize the .NET MAUI column chart to create the same user interface.

Step 2: Populate the data for the inversed column chart

Create the MetaLabLossModel class to hold the year and loss data for Meta’s Reality Labs division with the Year and Loss properties.

Refer to the following code example.

public class MetaLabLossModel
{ public double Year { get; set; } public double Loss { get; set; } }

Then, generate a collection of Reality Labs division’s operating details with the help of the MetaLabLossDetails class.

public class MetaLabLossDetails
{ public MetaLabLossDetails() { LossDetails = new List<MetaLabLossModel>() { new MetaLabLossModel {Year = 2019, Loss = -4.5}, new MetaLabLossModel {Year = 2020, Loss = -6.6}, new MetaLabLossModel {Year = 2021, Loss = -10.2}, new MetaLabLossModel {Year = 2022, Loss = -13.7} }; } public List< MetaLabLossModel > LossDetails { get; set; } }

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

Now, configure the Syncfusion .NET MAUI Cartesian Charts control by following this documentation.

Refer to the following code example.

<Chart:SfCartesianChart x:Name="chart">
 <Chart:SfCartesianChart.XAxes>
  <Chart:NumericalAxis>
  </Chart:NumericalAxis>
 </Chart:SfCartesianChart.XAxes>
 <Chart:SfCartesianChart.YAxes>
  <Chart:NumericalAxis>
  </Chart:NumericalAxis>
 </Chart:SfCartesianChart.YAxes>
</Chart:SfCartesianChart>

Step 4: Bind data to the chart

Use Syncfusion’s ColumnSeries instance to bind the Meta Reality Labs’s operating loss data into the chart.

Refer to the following code example.

<Chart:ColumnSeries XBindingPath="Year" YBindingPath="Loss" ItemsSource="{Binding LossDetails}">
</Chart:ColumnSeries>

In this example, we’ve bound the LossDetails with the ItemSource property. We’ve also specified the XBindingPath and YBindingPath with the Year and Loss properties, respectively.

Step 5: Position the chart axis

To design the inversed column chart, position the chart axis using the CrossesAt and Name properties of the chart axis.

<Chart:SfCartesianChart.XAxes>
 <Chart:NumericalAxis CrossesAt="-1" Name="primary">
 </Chart:NumericalAxis>
</Chart:SfCartesianChart.XAxes>

To assign the crossing axis to the chart series, use the XAxisName property.

<Chart:ColumnSeries XAxisName="primary">
</Chart:ColumnSeries>

Step 6: Customize the chart appearance

Let’s enhance the appearance of the column chart by customizing the axis elements, data labels, column colors, and titles.

Refer to the following code example to add a title to the chart.

<Chart:SfCartesianChart.Title>
 <Label Text="Operating Loss of Meta's Reality Labs Division" HorizontalTextAlignment="Center" FontSize="Title" TextColor="#FF5E768E"/>
</Chart:SfCartesianChart.Title>

Then, configure the axis and modify the axis elements as shown in the following code example.

<Chart:SfCartesianChart.XAxes>
 <Chart:NumericalAxis Interval="1" ShowMajorGridLines="False" >
  <Chart:NumericalAxis.LabelStyle>
   <Chart:ChartAxisLabelStyle FontSize="20" Margin="-40" TextColor="Black"/>
  </Chart:NumericalAxis.LabelStyle>
  <Chart:NumericalAxis.MajorTickStyle>
   <Chart:ChartAxisTickStyle StrokeWidth="0"/>
  </Chart:NumericalAxis.MajorTickStyle>
  <Chart:NumericalAxis.AxisLineStyle>
   <Chart:ChartLineStyle Stroke="Black"/>
  </Chart:NumericalAxis.AxisLineStyle>
 </Chart:NumericalAxis>
</Chart:SfCartesianChart.XAxes>
<Chart:SfCartesianChart.YAxes>
 <Chart:NumericalAxis Maximum="0" IsVisible="False" ShowMajorGridLines="False"/>
</Chart:SfCartesianChart.YAxes>

Then, customize the column colors and enable data labels with the desired label formats.

<Chart:ColumnSeries XBindingPath="Year"
                    Fill="#FF0A3B7E"
                    YBindingPath="Loss"
                    ItemsSource="{Binding LossDetails}"
                    ShowDataLabels="True">
 <Chart:ColumnSeries.DataLabelSettings>
  <Chart:CartesianDataLabelSettings>
   <Chart:CartesianDataLabelSettings.LabelStyle>
    <Chart:ChartDataLabelStyle FontSize="20" LabelFormat="$0.0B"/>
   </Chart:CartesianDataLabelSettings.LabelStyle>
  </Chart:CartesianDataLabelSettings>
 </Chart:ColumnSeries.DataLabelSettings>
</Chart:ColumnSeries>

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

Visualizing the Operating Losses of Meta Reality Labs Using Inversed Column Chart in .NET MAUI
Visualizing the Operating Losses of Meta Reality Labs Using Inversed Column Chart in .NET MAUI

GitHub reference

For more information, refer to the project on GitHub.

Conclusion

Thanks for reading! In this blog, we’ve created an inversed column chart to visualize the net revenue loss of Meta’s Reality Labs over time using the Syncfusion .NET MAUI Cartesian Chart. We encourage you to try these steps to visualize your desired data and share your feedback in the comments section below.

You can also reach us through our support forumsupport portal, or feedback portal. We are always happy to assist you!

See you in our next blog!

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