Chart of the Week: Creating a .NET MAUI Inversed Column Chart to Visualize Meta Reality Labs’s Yearly Operating Loss
Tags: dotnetmaui, chart, development, mobile
Published: 2023-05-25 12:42:31

---
title: Chart of the Week: Creating a .NET MAUI Inversed Column Chart to Visualize Meta Reality Labs’s Yearly Operating Loss
published: true
date: 2023-05-25 10:58:26 UTC
tags: dotnetmaui, chart, development, mobile
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-inversed-column-chart-visualize-yearly-operating-loss-data.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1rj28y0ij7fsmjw4lng.png
---
Welcome to our **Chart of the Week** blog series. Today, we’ll create an inverted column chart using the Syncfusion [.NET MAUI Cartesian Charts](https://www.syncfusion.com/maui-controls/maui-cartesian-charts/chart-types/maui-column-chart ".NET MAUI Column Chart") 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](https://en.wikipedia.org/wiki/Reality_Labs "Wikipedia Link: Meta Reality Labs") 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](https://www.statista.com/chart/29236/operating-loss-of-metas-reality-labs-division/ "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.

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

```csharp

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](https://help.syncfusion.com/maui/cartesian-charts/getting-started "Getting Started with .NET MAUI Charts").

Refer to the following code example.

```xml
<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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ColumnSeries.html?tabs=tabid-1 "ColumnSeries Class of .NET MAUI Charts") instance to bind the Meta Reality Labs’s operating loss data into the chart.

Refer to the following code example.

```xml
<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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_XBindingPath "XBindingPath property of .NET MAUI Charts") and [YBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.XYDataSeries.html#Syncfusion_Maui_Charts_XYDataSeries_YBindingPath "YBindingPath property of .NET MAUI Charts") 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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_CrossesAt "CrossesAt property of .NET MAUI Charts") and **Name** properties of the chart axis.

```xml
<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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CartesianSeries.html#Syncfusion_Maui_Charts_CartesianSeries_XAxisName "XAxisName property of .NET MAUI Charts") property.

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

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

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

```xml
<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](https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Visualizing-the-Operating-Losses-of-Meta-Reality-Labs-Using-Inversed-Column-Chart-in-.NET-MAUI-1.png)

## GitHub reference

For more information, refer to the project on [GitHub](https://github.com/SyncfusionExamples/Creating-an-Inversed-Column-Chart-by-demonstrating-Meta-s-Reality-labs-yearly-operating-loss "Creating a .NET MAUI Inversed Column Chart to Visualize Meta Reality Labs's Yearly Operating Loss GitHub demo").

## 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](https://www.syncfusion.com/maui-controls/maui-cartesian-charts ".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 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 happy to assist you!

See you in our next blog!

## Related blogs

- [Data Visualization with a Heat Map Using .NET MAUI Scheduler](https://www.syncfusion.com/blogs/post/heat-map-dotnet-maui-scheduler.aspx "Blog: Data Visualization with a Heat Map Using .NET MAUI Scheduler")
- [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: Chart of the Week: Creating a .NET MAUI Column Chart to Visualize Yearly Box Office Data")
- [Create and Validate a Login Form in .NET MAUI](https://www.syncfusion.com/blogs/post/login-form-in-net-maui.aspx "Blog: Create and Validate a Login Form in .NET MAUI")
- [Create a Line Chart to Visualize the Surge in U.S. Egg Prices](https://www.syncfusion.com/blogs/post/dotnet-maui-line-chart-visualize-egg-price.aspx "Chart of the Week: Create a Line Chart to Visualize the Surge in U.S. Egg Prices")