--- title: "Chart of the Week: Creating a .NET MAUI Bar Chart for the US’s Most Traded Goods with China" published_at: "2024-02-14T12:03:49+00:00" modified_at: "2026-01-12T12:16:33+00:00" url: "https://www.syncfusion.com/blogs/post/maui-bar-chart-traded-goods-us" excerpt: "This blog explains how to visualize the U.S.’s most-traded goods with China in 2017 using the Syncfusion .NET MAUI Bar Chart." taxonomy_category: - ".NET MAUI" - "Chart" - "Chart of the week" - "Desktop" - "Mobile" - "Syncfusion" 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 Bar Chart for the US’s Most Traded Goods with China [Arul Jenith Berkmans](https://www.syncfusion.com/blogs/author/arul-jenith-berkmans) ![Creating a .NET MAUI Bar Chart for the US’s Most Traded Goods with China](https://www.syncfusion.com/blogs/wp-content/uploads/2024/02/Creating-a-.NET-MAUI-Bar-Chart-for-the-USs-Most-Traded-Goods-with-China.png) Welcome to the **Chart of the week** blog series! Today, we’ll visualize the most traded goods between the U.S. and China in 2017 using the [Syncfusion .NET MAUI Bar Chart control](https://help.syncfusion.com/maui/cartesian-charts/barchart) . Before we dive in, let’s imagine you’re a financial or trade analysts, you need to communicate trade data and trends effectively for imported and exported goods. Visualization tools such as bar charts are useful for getting this information across to an audience of mixed specialties. A bar chart uses rectangular bars to represent data values. In the context of analyzing the U.S.’s import and export trends with China, a bar chart can effectively illustrate key trends in trade flows. In our example, we’re going to create a custom bar chart by integrating images and descriptions into the relevant data source. Images can enhance the visual appeal and comprehension of the chart beyond mere text. The following image shows the bar chart we’re going to create. ![Visualizing the most traded goods data using .NET MAUI bar chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/02/Visualizing-the-most-traded-goods-data-using-.NET-MAUI-bar-chart-2.png) ## Step 1: Gathering import and export goods data Before creating the bar chart, we need to gather data on the goods the U.S. [imports](https://oec.world/olap-proxy/data?cube=trade_i_baci_a_92&Exporter+Country=aschn&Importer+Country=nausa&Year=2017&drilldowns=HS6&measures=Trade+Value&parents=true&locale=en) from and [exports](https://oec.world/olap-proxy/data?cube=trade_i_baci_a_92&Exporter+Country=nausa&Importer+Country=aschn&Year=2017&drilldowns=HS6&measures=Trade+Value&parents=true&locale=en&q=1,1) to China. ## Step 2: Preparing the data for the chart Create a **TradeModel** class that includes the properties for storing the goods’ name, value, category (import and export), and description. In this bar chart use case, the values will be plotted on both quadrants (positive and negative) of the x-axis. We’ll plot the import value details of goods in the negative quadrant, meaning that these values will appear below the x-axis. To achieve this, we need the original values to be represented in their negative form. So, we’ll adjust the sine of the value accordingly. Refer to the following code example. ``` Public class TradeModel { public string? GoodsName { get; set; } public string Category { get; set; } public double Value { get; set; } public string Description { get; set; } public Iimage? Image { get; set; } public TradeModel(string name, double value, string category, string description) { GoodsName = name; Category = category; if (Category == "import") { Value = - value; } else { Value = value; } Description = description; } } ``` Next, generate the data collection using the **TradeGoodsData** class, specify the ** ImportDataCollection** and ** ExportDataCollection** properties to store the collection of import and export data. Refer to the following code example. ``` public class TradeGoodsData { public ObservableCollection ImportDataCollection { get; set;} public ObservableCollection ExportDataCollection { get; set;} public Dictionary? Stream { get; set; } = new Dictionary(); public TradeGoodsData() { ImportDataCollection = new ObservableCollection(); ExportDataCollection = new ObservableCollection(); Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly; Stream? ExportStream = executingAssembly.GetManifestResourceStream("CustomBarSample.Resources.Raw.Export_Data.csv"); Stream? ImportStream = executingAssembly.GetManifestResourceStream("CustomBarSample.Resources.Raw.Import_Data.csv"); ReadCSV(ImportDataCollection, ImportStream); ReadCSV(ExportDataCollection, ExportStream); } } ``` Then, convert the CSV data to a collection of trade data using the **ReadCSV** method with specific fields. ``` private void ReadCSV(ObservableCollection dataCollection, Stream? datestream) { string line; List lines = new(); if(datestream != null) { using StreamReader reader = new(datestream); while ((line = reader.ReadLine()) != null) { lines.Add(line); } lines.RemoveAt(0); foreach (var datapoint in lines) { string[] data = datapoint.Split(','); var model = new TradeModel(data[9], Convert.ToDouble(data[8]), data[10], data[5]); // add the relevant image to the itemsource SetStream(model); dataCollection.Add(model); } } } ``` Refer to the following code example to add the image source to the relevant model. Here, we use images in PNG format that are available in [Syncfusion Metro Studio](https://www.syncfusion.com/downloads/metrostudio) . ``` private void SetStream(TradeModel data) { Assembly assembly = typeof(MainPage).GetTypeInfo().Assembly; string imageName = $"{data.GoodsName}.png"; Stream? stream = assembly.GetManifestResourceStream($"CustomBarSample.Resources.Images.{imageName}"); if (stream != null && data.GoodsName is not null) { var image = PlatformImage.FromStream(stream); data.Image = image; } } ``` ## Step 3: Configure the Syncfusion .NET MAUI Cartesian Charts control Then, configure the Syncfusion .NET MAUI Cartesian Charts control using this [documentation](https://help.syncfusion.com/maui/cartesian-charts/overview) . Configure the [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html?tabs=tabid-1) and then switch the chart’s x- and y-axes by setting the [IsTransposed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_IsTransposedProperty) property to **true**. Then, create a column chart by creating an instance of [ColumnSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ColumnSeries.html?tabs=tabid-1) and add it to the [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_Series) collection property of [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html?tabs=tabid-1) . Refer to the following code example. ``` ``` ## Step 4: Create a customized bar chart Create the **ColumnSeriesExt** class inherited from the [ColumnSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ColumnSeries.html?tabs=tabid-1) to customize the bar chart segment drawing method for series. While rendering the segments (bars) for data, it will be displayed along with the relevant image and description about the segment based on the **itemsource** data. Refer to the following code example. ``` public class ColumnSeriesExt : ColumnSeries { int index = 0; protected override ChartSegment CreateSegment() { var segment = new ColumnSegmentExt(); segment.Item = GetItemSource(index); // do get the segment model index++; return segment; } } ``` Creating a custom **ColumnSegment** involves defining a segment type that displays the relevant images and descriptions about the segment’s data source. Refer to the following code example. ``` public class ColumnSegmentExt : ColumnSegment { internal TradeModel? Item { get; set; } protected override void OnLayout() { base.OnLayout(); if (Series is ColumnSeriesExt series && Item != null) { var style = series.LabelStyle; style.Parent = series.ActualYAxis!.Parent; var size = Item.Description.Measure(style); CalculatePositions(size); // calculate the image and description positions. } } protected override void Draw(ICanvas canvas) { if (Series is ColumnSeriesExt series) { var style = series.LabelStyle; if (Item != null) { canvas.DrawText(Item.Description, TextX, TextY, style); canvas.StrokeColor = Colors.Black; canvas.DrawLine(LineX1, LineY, LineX2, LineY); canvas.DrawImage(Item.Image, ImageX, ImageY, imageWidth, imageWidth); } } base.Draw(canvas); } } ``` Next, initialize the custom bar series in the [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html?tabs=tabid-1) . ``` . . . . . . ``` ## Step 5: Initialize the legend Enable the [legend](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Legend) in the bar chart to provide a visual guide to the data series. **C#** ``` chart.Legend = new ChartLegend(); ``` **XAML** ``` . . . ``` ## Step 6: Binding the data to the bar chart Configure the **TradeGoodsData** class to bind its properties to the chart’s ** BindingContext**. Bind the **ExportDataCollection** from the ** TradeGoodsData** class to the [ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ItemsSource) property for one series and **ImportDataCollection** as the ** ItemsSource** for another. The ** XBindingPath** and ** YBindingPath** properties are bound with the ** GoodsName** and ** Value** details, respectively. Set the ** EnableSidebySideSeriesPlacement** property to false to prevent the series from being arranged side by side. Refer to the following code example. ``` ``` ## Step 7: Customize the chart appearance Let’s customize the .NET MAUI bar chart by configuring its properties and styles. ### Customize the chart title You can customize the chart [title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Title) to make the chart more visually appealing and informative. ``` ``` ### Customize the chart axes You can customize the chart [axes](https://help.syncfusion.com/maui/cartesian-charts/axis/overview) to enhance the look and readability of the chart, as shown in the following code example. ``` ``` ### Customize the chart series appearance Next, customize the [series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html?tabs=tabid-9%2Ctabid-11%2Ctabid-5%2Ctabid-7%2Ctabid-18%2Ctabid-1%2Ctabid-16%2Ctabid-20%2Ctabid-14%2Ctabid-13%2Ctabid-3) appearance by utilizing the [PaletteBrush](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_PaletteBrushes) property by binding gradients from the **LinearGradiantBrush** collection. Refer to the following code example. ``` ``` ### Customize the data label appearance Data labels provide additional information about the data points on the chart. We can customize their appearance using the **CartesianDataLabelSettings** class. Refer to the following code example. ``` ``` After executing the previous code examples, the output will look like the following image. ![Visualizing the most traded goods data using .NET MAUI bar chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/02/Visualizing-the-most-traded-goods-data-using-.NET-MAUI-bar-chart-2.png) Visualizing the most traded goods data using .NET MAUI Bar Chart ## GitHub reference For more details, refer to the complete project on [GitHub](https://github.com/SyncfusionExamples/Creating-the-.NET-MAUI-Bar-Chart-for-the-most-traded-goods-between-the-US-and-China-in-2017) . ## Conclusion Thanks for reading! In this blog, we explored how to visualize the U.S.’s most traded goods with China using the Syncfusion [.NET MAUI Bar Chart](https://help.syncfusion.com/maui/cartesian-charts/barchart) . We strongly encourage you to follow the steps outlined in this blog and share your thoughts in the comments below. You can also contact us through our [support forums](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback/) . We are always happy to assist you! ## Related blogs - [Easily Replicate a Waiting List UI in .NET MAUI](https://www.syncfusion.com/blogs/post/waiting-list-ui-dotnet-maui.aspx) - [Easily Load Appointments in .NET MAUI Scheduler with SQLite and Perform CRUD](https://www.syncfusion.com/blogs/post/load-maui-scheduler-sqlite-crud.aspx) - [Chart of the Week: Create a .NET MAUI Stacked Column Chart for the Top-Earning Female Athletes](https://www.syncfusion.com/blogs/post/maui-stackedcolumn-chart-athlete.aspx) - [Syncfusion .NET MAUI 2024 Road Map](https://www.syncfusion.com/blogs/post/dotnet-maui-2024-road-map.aspx)