--- title: "Comparing Generative AI Usage with .NET MAUI Multi-Category Bar Charts" published_at: "2024-07-31T14:48:57+00:00" modified_at: "2026-01-12T12:58:33+00:00" url: "https://www.syncfusion.com/blogs/post/maui-multi-bar-charts-generative-ai" excerpt: "Let’s compare the usage of generative AI for creating media and obtaining information by creating multi-category bar charts in a .NET MAUI app." taxonomy_category: - ".NET MAUI" - "Chart" - "Chart of the week" - "Desktop" - "Syncfusion" - "UI" taxonomy_post_tag: - ".NET MAUI" - "Chart" - "Data Visualization" - "desktop" - "MAUI" - "Mobile" --- [Chart of the week](https://www.syncfusion.com/blogs/category/chart-of-the-week) # Comparing Generative AI Usage with .NET MAUI Multi-Category Bar Charts [Ezhilarasan Elangovan](https://www.syncfusion.com/blogs/author/ezhilarasan-elangovan) ![Chart of the Week: Create .NET MAUI Multi-Category Bar Charts to Compare the Use of Generative AI for Creating Media vs. Obtaining Information](https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Chart-of-the-Week-Create-.NET-MAUI-Multi-Category-Bar-Charts-to-Compare-the-Use-of-Generative-AI-for-Creating-Media-vs.-Obtaining-Information.png) **TL;DR:** Learn to create multi-category bar charts with Syncfusion .NET MAUI Charts. Compare the use of generative AI for creating media and obtaining information. Steps include gathering and preparing data, defining the layout, configuring the charts, and customizing the appearance. Follow our step-by-step guide to visualize trends effectively and make data-driven decisions! Welcome to our **Chart of the Week** blog series! Today, we’ll create multi-category [Bar Charts](https://help.syncfusion.com/maui/cartesian-charts/barchart) to compare media creation and information retrieval applications of generative AI using the [Syncfusion .NET MAUI Charts control](https://www.syncfusion.com/maui-controls/maui-cartesian-charts) . Bar Charts (Transposed column charts) are versatile tools for comparing categorical data. They clearly show differences between categories. Here are a few common use cases: - Survey results - Usage trends - Performance metrics - Market analysis Imagine you’re analyzing how people use generative AI tools. You need a chart representing the percentage of users engaging in media creation versus information retrieval. A bar chart is perfect for this purpose. It visually differentiates the two applications, making the data easy to understand and compare. This helps in drawing insights and making informed decisions. Since we need to explain two categories, we can create two multi-category bar charts. You can easily see the differences and similarities by displaying both categories aside. This visual representation allows for more effective communication of your findings. The following image shows the multi-category Bar Charts we’ll create. ![Comparing the data on the usage of generative AI for creating media and getting information using the .NET MAUI multi-category Bar Charts](https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Comparing-the-data-on-the-usage-of-generative-AI-for-creating-media-and-getting-information-using-the-.NET-MAUI-multi-category-Bar-Charts-1.png)Let’s get started! ## Step 1: Gather data Before creating the chart, let’s gather data from page No. 12 of the [generative AI usage](https://reutersinstitute.politics.ox.ac.uk/sites/default/files/2024-05/Fletcher_and_Nielsen_Generative_AI_and_News_Audiences.pdf) data source. ## Step 2: Prepare the data for the chart Create a **Model** class that includes the properties to store the details, such as the purpose of using AI and overall usage percentage. ``` public class Model { public string Purpose { get; set; } public double Percentage { get; set; } public Model(string purpose, double percentage) { Purpose = purpose; Percentage = percentage; } } ``` Next, we will create a **ViewModel** to hold the collection of data for both creating media and obtaining information. ``` public class ViewModel { public ObservableCollection GettingInformationDetails { get; set; } public ObservableCollection CreatingMediaDetails { get; set; } public ViewModel() { GettingInformationDetails = new ObservableCollection() { new Model("Answering factual questions",11), new Model("Asking advice",10), new Model("Generating ideas",9), new Model("Playing around or experimenting",9), new Model("Summarizing text",8), new Model("Seeking support",7), new Model("Recommendations",6), new Model("Translations",6), new Model("Getting the latest news",5), new Model("Data analysis",5), new Model("Other",1), }; CreatingMediaDetails = new ObservableCollection() { new Model("Playing around or experimenting",11), new Model("Writing an email or letter",9), new Model("Making an image",9), new Model("Writing an essay or report",8), new Model("Creative writing",7), new Model("A job application/interview",5), new Model("Programming or coding",5), new Model("Making a video",4), new Model("Making audio",3), new Model("Creating test data",3), new Model("Other",2), }; } } ``` ## Step 3: Layout definition Define the layout using a **Border** element. Inside the border, we’ll utilize a ** Grid** to place our content. ``` …. ``` ## Step 4: Configure the Syncfusion .NET MAUI Charts Let’s configure the Syncfusion.NET MAUI Charts control using the [documentation](https://help.syncfusion.com/maui/cartesian-charts/getting-started) . Refer to the following code example. ``` … …. ``` ## Step 5: Bind the data to the .NET MAUI Bar Charts To compare the data on the usage of generative AI for creating media vs. obtaining information effectively, we’ll use two separate Bar Charts. We’ll also set the **ColumnSeries’** ** IsTransposed** property to ** True** to replicate the Bar Charts and bind the ** CreatingMediaDetails** and ** GettingInformationDetails** collections to the charts. Refer to the following code example. ``` . . . . . . ``` In the above code example, the **GettingInformationDetails** and ** CreatingMediaDetails** collections from the ** ViewModel** are bound to the ** ItemSource** property for each chart. The ** XBindingPath** is bound with the ** Purpose** property, and the ** YBindingPath** is bound with the ** Percentage** property. ## Step 6: Customize the .NET MAUI Bar Charts’ appearance Let’s customize the elements of the .NET MAUI Bar Charts to enhance their readability. ### Adding the title Adding a [Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Title) helps users understand the content of the chart more effectively. Refer to the following code example to add a title to the chart. ``` . . . . . . ``` Refer to the following code example to customize the chart title. ``` . . . . . . . . . ``` ### Customize the chart axis Let’s customize the chart’s x- and y-axes using properties such as [LabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_LabelStyle) , [AxisLineStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_AxisLineStyle) , and [MajorTickStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_MajorTickStyle) . Refer to the following code example. ``` ``` ### Customize the series appearance and data labels Now, use the [Fill](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_Fill) property to apply color to each series and customize the data labels using the [LabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Charts_ChartDataLabelSettings_LabelStyle) , [LabelPlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Charts_ChartDataLabelSettings_LabelPlacement) , and [UseSeriesPalette](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Charts_ChartDataLabelSettings_UseSeriesPalette) properties. ``` . . . . . . . . . ``` After executing these code examples, we will get the output that resembles the following image. ![Comparing the data on the usage of generative AI for creating media and getting information using the .NET MAUI multi-category Bar Charts](https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Comparing-the-data-on-the-usage-of-generative-AI-for-creating-media-and-getting-information-using-the-.NET-MAUI-multi-category-Bar-Charts-1.png) Comparing the data on the usage of generative AI for creating media and getting information using the .NET MAUI multi-category Bar Charts ## GitHub reference For more details, refer to the runnable project on [GitHub](https://github.com/SyncfusionExamples/Creating-the-.NET-MAUI-Bar-Chart-to-Compare-Generative-AI-Usage) . ## Conclusion Thanks for reading! In this blog, we’ve seen how to create multi-category [.NET MAUI Bar Charts](https://help.syncfusion.com/maui/cartesian-charts/barchart) to compare the usage of generative AI for creating media and obtaining information. Please follow the steps outlined in this blog and share your thoughts in the comments below. The existing customers can download the new version of Essential Studio® on the [License and Downloads](https://www.syncfusion.com/account) page. If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out our incredible features. 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 - [Design a Timer App using .NET MAUI Radial Gauge and Timer Picker](https://www.syncfusion.com/blogs/post/timer-app-maui-radialgauge-timepicker) - [Making Payments Easy: Using .NET MAUI Radio Button for Payment Apps and Digital Wallets](https://www.syncfusion.com/blogs/post/make-payment-easy-maui-radio-button) - [How to Zoom and View the Desired Area in a PDF using .NET MAUI PDF Viewer?](https://www.syncfusion.com/blogs/post/zoom-view-pdf-in-callout-dotnet-maui) - [Chart of the Week: Creating the .NET MAUI Radial Bar to Visualize Apple’s Revenue Breakdown](https://www.syncfusion.com/blogs/post/dotnet-maui-radial-bar-apple-revenue)