--- title: "Chart of the Week: Creating a .NET MAUI Horizontal Bar Chart to Compare Grocery Prices Between Two Countries" published_at: "2023-09-01T07:59:22+00:00" modified_at: "2026-01-15T09:00:53+00:00" url: "https://www.syncfusion.com/blogs/post/dotnet-maui-horizontal-bar-chart-compare-grocery-prices" excerpt: "This blog explains how to visualize a price comparison of groceries using the Syncfusion .NET MAUI Horizontal Bar 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: Creating a .NET MAUI Horizontal Bar Chart to Compare Grocery Prices Between Two Countries [Sowndharya Selladurai](https://www.syncfusion.com/blogs/author/sowndharya-selladurai) ![Chart of the Week: Creating a NET MAUI Horizontal Bar Chart to Compare Grocery Prices Between Two Countries](https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Chart-of-the-Week-Creating-a-NET-MAUI-Horizontal-Bar-Chart-to-Compare-Grocery-Prices-Between-Two-Countries.png) Welcome to our **Chart of the Week** blog series! Today, we’ll create a horizontal bar chart to visualize the price comparison of groceries using the [Syncfusion .NET MAUI Cartesian Charts](https://www.syncfusion.com/maui-controls/maui-cartesian-charts) control. This control is supported on both desktop (Windows and Mac) and mobile platforms (Android and iOS). In this blog post, we’ll compare the prices of groceries in the United States and the United Kingdom using a horizontal bar chart that resembles a pyramid graph. It will allow us to identify and compare the prices of various grocery items easily. Let’s get started! ## Step 1: Collecting grocery price data Before creating the chart, let’s gather data on [grocery prices in the United States and the United Kingdom](https://www.numbeo.com/cost-of-living/compare_countries_result.jsp?country1=United+States&country2=United+Kingdom) . ## Step 2: Preparing data for the chart Create a **Model** class that includes properties for storing information about grocery items and their prices in the United States and the United Kingdom. Refer to the following code example. ``` public class Model { public string GroceryItem { get; set; } public double USPrice { get; set; } public double UKPrice { get; set; } } ``` Then, configure the **ViewModel** class to create a collection of grocery item price details and store it in an observable collection using the ** GroceryPriceDetails** property. Refer to the following code example. ``` public class ViewModel { public ObservableCollection GroceryPriceDetails { get; set; } public ViewModel() { GroceryPriceDetails = new ObservableCollection(); GroceryPriceDetails.Add(new Model() { GroceryItems = "Milk (1 L)", USPrice = 1.03, UKPrice = 1.05 }); GroceryPriceDetails.Add(new Model() { GroceryItems = "White Bread (500 g)", USPrice = 3.54, UKPrice = 1.08 }); GroceryPriceDetails.Add(new Model() { GroceryItems = "White Rice (1 kg)", USPrice = 4.56, UKPrice = 1.42 }); GroceryPriceDetails.Add(new Model() { GroceryItems = "Eggs (12)", USPrice = 4.40, UKPrice = 2.27 }); GroceryPriceDetails.Add(new Model() { GroceryItems = "Chicken Fillets(1 kg)", USPrice = 12.00, UKPrice = 5.89 }); ; GroceryPriceDetails.Add(new Model() { GroceryItems = "Cheese (1 kg)", USPrice = 12.87, UKPrice = 6.13 }); GroceryPriceDetails.Add(new Model() { GroceryItems = "Beef Round (1 kg)", USPrice = 15.21, UKPrice = 9.15 }); } } ``` ## Step 3: Layout definition Define the layout using a **Border** element. Inside the border, we utilize a ** Grid** to place our content. Refer to the following code example. ``` ``` ## Step 4: 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) . Refer to the following code example. ``` ``` Now that we’ve configured the Syncfusion .NET MAUI Cartesian Charts control, let’s see how to create a horizontal bar chart that resembles a pyramid with it! ## Step 5: Initialize the horizontal bar chart To compare the grocery item prices, we’ll use the [ColumnSeries](https://help.syncfusion.com/maui/cartesian-charts/column) instance and set the **IsTransposed** property to ** true** to initialize the horizontal bar chart. ``` .. … ``` ## Step 6: Binding data to the bar chart This step involves using the [ColumnSeries](https://help.syncfusion.com/maui/cartesian-charts/column) instance to bind the grocery items’ price data. Refer to the following code example. ``` … … ``` In the previous code, we’ve bound the **ItemSource** property with the ** GroceryPriceDetails** property. The ** XBindingPath**is bound with the grocery items count, and the ** YBindingPath** is bound with the price details. ## Step 7: Initializing the legend A [legend](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html?tabs=tabid-5%2Ctabid-9%2Ctabid-1%2Ctabid-3%2Ctabid-7#Syncfusion_Maui_Charts_ChartBase_Legend) displays information corresponding to the chart series. Let’s implement a legend in our bar chart, as shown in the following code example. ``` ``` ## Step 8: Customizing the chart appearance We can customize the appearance of the horizontal bar chart using various properties and styles. ### Customizing the title Refer to the following code example, which customizes the chart title using the **Label** property. In it, we’ve defined the title’s ** Text**, ** FontSize**, ** FontAttributes**, and other properties. ```