--- title: "Create Stunning AI-Powered .NET MAUI Charts Using Natural Language" published_at: "2025-01-08T14:48:24+00:00" modified_at: "2026-06-24T10:16:47+00:00" url: "https://www.syncfusion.com/blogs/post/create-maui-chart-from-natural-language" excerpt: "Create stunning .NET MAUI Charts with AI and Syncfusion® tools. Effortlessly generate dynamic visuals using natural language—no coding required!" taxonomy_category: - ".NET MAUI" - "Chart" - "Chart of the week" - "Desktop" - "Mobile" - "Smart AI components" taxonomy_post_tag: - ".NET MAUI" - "AI" - "Chart" - "Data Visualization" - "desktop" - "development" - "Mobile" --- [Chart of the week](https://www.syncfusion.com/blogs/category/chart-of-the-week) # Create Stunning AI-Powered .NET MAUI Charts Using Natural Language [Saravanan Madheswaran](https://www.syncfusion.com/blogs/author/saravanan-madheswaran) ![Create Stunning AI-Powered .NET MAUI Charts Using Natural Language](https://www.syncfusion.com/blogs/wp-content/uploads/2025/01/Create-Stunning-AI-Powered-.NET-MAUI-Charts-Using-Natural-Language.png) **TL;DR:** Learn how to generate impressive charts using AI and Syncfusion® in .NET MAUI by simply describing your data needs in natural language. Streamline your workflow with automatic JSON configurations and real-time updates. Imagine describing your data visualization needs in plain English and instantly receiving a stunning chart without any coding required! This is now a reality, thanks to the integration of AI with Syncfusion® robust [.NET MAUI Charts](https://www.syncfusion.com/maui-controls/maui-cartesian-charts/chart-types) control. In this blog, we’ll explore how you can effortlessly generate charts in .NET MAUI using natural language input. For an introduction to our JSON-based auto-chart generation process, feel free to check out our [previous blog](https://www.syncfusion.com/blogs/post/json-input-to-chart-with-maui-toolkit) to understand the foundation of this feature. ## Why choose Natural Language chart generation? - **User-friendly**: No technical expertise is needed—just describe your data. - **Time-saving**: Let AI handle chart creation and customization instantly. - **Effortless workflow**: Combine AI with Syncfusion® Charts for seamless data visualization. - **Dynamic flexibility**: Generate a variety of chart types from a single input. ## How does it work? 1. **AI-powered JSON generation**: The AI processes natural language input and generates chart configurations in JSON format. 2. **JSON-to-chart conversion**: JSON configurations are converted into chart visuals using Syncfusion® .NET MAUI Charts. 3. **In-place modifications**: With the Syncfusion®[.NET MAUI AI AssistView](https://www.syncfusion.com/maui-controls/maui-aiassistview) , you can dynamically update and refine the chart. Simplify .NET MAUI Chart Development Spend less time building data visualization features from scratch. Syncfusion .NET MAUI Charts includes ready-to-use support for multiple chart types, data binding, interactive tooltips, legends, zooming, selection, and responsive layouts. [Start Building Today](https://www.syncfusion.com/maui-controls/maui-cartesian-charts) ## Setting up Natural Language Processing with AI To implement this feature, we leverage the [Microsoft.Extensions.AI.OpenAI](https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI/9.3.0-preview.1.25161.3) package. Install the package using the following command. ``` dotnet add package Microsoft.Extensions.AI.OpenAI ``` ### Implementing the AI service The **ChartAIService** class handles Azure OpenAI credentials, validates them, and fetches AI responses. **Key features** - **Credential validation**: Ensures that the Azure API key and endpoint are configured correctly. - **AI response retrieval**: Converts user prompts into AI-generated JSON configurations. Refer to the following code example. ``` internal class ChartAIService { #region Fields internal const string endpoint = "https://YOUR_ACCOUNT.openai.azure.com/"; internal const string deploymentName = "deployment name"; internal const string imageDeploymentName = "IMAGE_MODEL_NAME"; internal const string key = "API key"; private static bool isAlreadyValidated; private Uri? uriResult; #endregion public ChartAIService() { ValidateCredential(); } #region Properties internal IChatClient? Client { get; set; } internal string? ChatHistory { get; set; } internal static bool IsCredentialValid { get; set; } #endregion #region Private Methods // Validate Azure Credentials private async void ValidateCredential() { this.GetAzureOpenAIKernal(); if (isAlreadyValidated) { return; } try { if (Client != null) { await Client!.CompleteAsync("Hello, Test Check"); ChatHistory = string.Empty; IsCredentialValid = true; isAlreadyValidated = true; } else { ShowAlertAsync(); } } catch (Exception) { return; } } #region Azure OpenAI // To get the Azure open ai kernal method private void GetAzureOpenAIKernal() { try { var client = new AzureOpenAIClient(new Uri(endpoint), new AzureKeyCredential(key)).AsChatClient(modelId: deploymentName); this.Client = client; } catch (Exception) { } } #endregion // Show Alert Popup private async void ShowAlertAsync() { var page = Application.Current?.Windows[0].Page; if (page != null && !IsCredentialValid) { isAlreadyValidated = true; await page.DisplayAlert("Alert", "The Azure API key or endpoint is missing or incorrect. Please verify your credentials. You can also continue with the offline data.", "OK"); } } #endregion } ``` Then, replace the placeholders, such as **YOUR_ACCOUNT** and ** Your_API_key** with your actual Azure OpenAI credentials. ``` // Retrieves an answer from the deployment name model using the provided user prompt. internal async Task GetAnswerFromGPT(string userPrompt) { try { if (IsCredentialValid && Client != null) { ChatHistory = string.Empty; // Add the system message and user message to the options ChatHistory = ChatHistory + userPrompt; var response = await Client.CompleteAsync(ChatHistory); return response.ToString(); } } catch { // If an exception occurs (e.g., network issues, API errors), return an empty string. return ""; } return ""; } ``` ### Crafting effective AI prompts To ensure accurate and cost-effective responses, we request JSON configurations instead of direct chart logic. ``` public async Task GetAIResponse(string query) { string prompt = "Create a JSON configuration for a cartesian chart using the ChartConfig and SeriesConfig classes, " + $"based on the following query: {query}. The JSON should include: " + "1. The chart type (cartesian or circular). " + "2. Title of the chart. " + "3. X-axis and Y-axis specifications (for cartesian charts). " + "4. Series configurations, including type and data source. " + "5. A setting for whether tooltips are enabled. " + "Use exemplary data relevant to the query to fill in the values. " + "Example JSON Structure: " + "{ " + " chartType: cartesian, // or circular" + " title: {Chart Title}, // Replace with an appropriate title" + " ShowLegend: true " + " series: [ " + " { " + " type: line, // Specify type: line, area, column, pie, doughnut or radialbar etc." + " xpath: xvalue, " + " dataSource: [ " + " { xvalue: {X1}, yvalue: {Y1} }, // Sample data points" + " { xvalue: {X2}, yvalue: {Y2} }, // Keys should always be xvalue and yvalue. All other keys are not allowed." + " { xvalue: {X3}, yvalue: {Y3} } // Real-world data is preferred over sample data" + " ], " + " tooltip: true " + " } " + " ], " + " xAxis: { " + " type: category, // For cartesian charts" + " title: {X Axis Title} // Optional: Replace with an appropriate title" + " }, " + " yAxis: { " + " title: {Y Axis Title}, // Optional: Replace with an appropriate title" + " type: numerical, // For cartesian charts" + " min: {Min Value}, // Optional: set minimum value if relevant" + " max: {Max Value} // Optional: set maximum value if relevant" + " }, " + "} " + "Instructions: " + "- Replace placeholders such as `{query}`, `{Chart Title}`, `{X1}`, `{Y1}`, `{X Axis Title}`, and `{Y Axis Title}` with actual data relevant to the query. " + "- Choose the appropriate chart and series types based on the data. " + "- Ensure the data format matches the requirements for cartesian charts. " + "- Only plain text should be used; no need to specify 'json' above the data. " + "- No additional content other than json data should be included!"; // Call the method to get the AI response var response = await openAIService.GetAnswerFromGPT(prompt); // Convert the response to a string (assuming the response has a ToString method) return response.ToString(); } ``` ## Reusing JSON-to-chart logic The AI-generated JSON integrates seamlessly with the JSON-to-chart logic discussed in our [previous blog](https://www.syncfusion.com/blogs/post/json-input-to-chart-with-maui-toolkit) . This modular approach leverages existing functionality, thus avoiding duplication. ## Enhancing with .NET MAUI AI AssistView The .NET MAUI AI AssistView enables real-time interaction with the AI service, allowing for dynamic chart updates. To use this feature, install the package using the following command. ``` dotnet add package Syncfusion.Maui.AIAssistView --version 28.1.37 ``` **ViewModel setup** **C#** ``` public ICommand RequestCommand { get; } public ObservableCollection Messages { get; set; } ``` **XAML** ``` xmlns:aiassistview="clr-namespace:Syncfusion.Maui.AIAssistView;assembly=Syncfusion.Maui.AIAssistView" ... ``` Now, refer to the following code example to configure the message service with **AI AssistView**. ``` RequestCommand = new Command(OnRequest); ... internal async void OnRequest(object requestText) { var value = ((RequestEventArgs)requestText).RequestItem.Text; OnRequest(value); } internal async void OnRequest(string requestText) { if (!string.IsNullOrEmpty(requestText)) { newJson = await ProcessUserRequest(requestText); } if (!string.IsNullOrEmpty(newJson) && newJson != oldJson) { DecryptJSON(newJson, true); oldJson = newJson; } else { AssistItem assistItem = new() { Text = "Invalid request. Please try again!", ShowAssistItemFooter = false }; Messages.Add(assistItem); } } public async Task ProcessUserRequest(string request) { string prompt = $"Given the user's request: {request}, modify the following json data." + $"json data: {oldJson}" + "Instructions: " + "- Accept only the possible modifications that can be made to the current json data; return empty string for unintended requests like changing the entire chart type or etc." + "- Only plain text should be used; no need to specify 'json' above the data." + "- No additional content other than json data should be included!"; var response = await openAIService.GetAnswerFromGPT(prompt); return response.ToString(); } ``` Refer to the following output GIF image. Generating AI-powered .NET MAUI Charts using natural language ## GitHub reference Also, refer to transforming natural language inputs into charts using the AI-powered chart creator [GitHub](https://github.com/SyncfusionExamples/AI-Powered-Chart-Creator-from-Natural-Language-with-Syncfusion-.NET-MAUI-Toolkit) demo. ## Conclusion Thanks for reading the blog! We have explored how to effortlessly create stunning charts using AI and Syncfusion® robust [.NET MAUI](https://www.syncfusion.com/maui-controls) tools, all with natural language input. No coding is needed for dynamic chart visuals! Try it out and experience the convenience of auto-generating stunning charts with AI! If you need assistance, please do not hesitate to contact us via our [support forum,](https://www.syncfusion.com/forums) [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback) . We are always eager to help you! ## Related Blogs [Transform JSON into Stunning Charts: Auto-Generate Visuals with Syncfusion® .NET MAUI Toolkit](https://www.syncfusion.com/blogs/post/json-input-to-chart-with-maui-toolkit) [Visualizing Skyscraper Data with .NET MAUI Doughnut Chart and Maps](https://www.syncfusion.com/blogs/post/dotnet-maui-chart-for-skyscrapers) [Syncfusion Essential® UI Kit for .NET MAUI: Accelerate App Development with Pre-Built UI Pages](https://www.syncfusion.com/blogs/post/essential-ui-kit-for-dotnet-maui) [Building a Neumorphic UI with .NET MAUI Column Chart to Showcase Gen Z’s Favourite Social Media Platforms](https://www.syncfusion.com/blogs/post/neumorphic-ui-net-maui-column-chart)