From 9c7ca98f3195aeb890f1bee1f69368a3fb7f3211 Mon Sep 17 00:00:00 2001 From: Venkatesan Kumar Date: Fri, 15 May 2026 22:05:11 +0530 Subject: [PATCH 1/3] 1005021: Fix minor grammar and wording issues across Blazor chart --- .../getting-started-with-server-app.md | 114 +-------- .../getting-started-with-web-app.md | 108 +------- blazor/accumulation-chart/getting-started.md | 67 +---- blazor/chart/getting-started-wasm.md | 95 +------ blazor/chart/getting-started-with-maui-app.md | 2 +- blazor/chart/getting-started-with-web-app.md | 98 ++----- blazor/chart/getting-started.md | 95 +------ blazor/maps/getting-started-webapp.md | 234 +---------------- blazor/maps/getting-started-with-maui-app.md | 242 +----------------- .../maps/getting-started-with-server-app.md | 234 +---------------- blazor/maps/getting-started.md | 229 +---------------- blazor/stock-chart/getting-started-webapp.md | 133 +--------- blazor/stock-chart/getting-started.md | 138 +--------- 13 files changed, 60 insertions(+), 1729 deletions(-) diff --git a/blazor/accumulation-chart/getting-started-with-server-app.md b/blazor/accumulation-chart/getting-started-with-server-app.md index 6c6219b17e..a48793d496 100644 --- a/blazor/accumulation-chart/getting-started-with-server-app.md +++ b/blazor/accumulation-chart/getting-started-with-server-app.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Stared | Blazor Accumulation Chart in Server App | Syncfusion +title: Getting Started | Blazor Accumulation Chart in Server App | Syncfusion description: Checkout and learn about getting started with Blazor Accumulation Chart component in Blazor Server App. platform: Blazor control: Accumulation Chart @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Accumulation Chart in Blazor Server App -This section briefly explains about how to include [Syncfusion® Blazor Accumulation Chart](https://www.syncfusion.com/blazor-components/blazor-charts) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include [Syncfusion® Blazor Accumulation Chart](https://www.syncfusion.com/blazor-components/blazor-charts) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -35,7 +35,7 @@ Create a **Blazor Server App** by using the **Blazor Web App** template in Visua Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. -Alternatively, create a Server application by using the following command in the integrated terminal (Ctrl+`). +Alternatively, create a Server application using the following command in the integrated terminal (Ctrl+`). {% tabs %} @@ -131,7 +131,7 @@ builder.Services.AddSyncfusionBlazor(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file. +The theme stylesheet and the script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file. ```html @@ -145,14 +145,14 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Accumulation Chart component -Add the Syncfusion® Blazor Accumulation Chart component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at top of the `~Pages/Home.razor` file. +Add the Syncfusion® Blazor Accumulation Chart component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} -@* desired render mode define here *@ +@* desired render mode defined here *@ @rendermode InteractiveServer {% endhighlight %} @@ -197,108 +197,6 @@ Press Ctrl+F5 (Windows) or ⌘+F5 (m N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AccumulationChart) -## Add title - -Using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_Title) property, a title to the accumulation chart is added to provide the user with quick information about the data plotted in the chart. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - -@code{ - public class ChartData - { - public string Country { get; set; } - public double Medals { get; set; } - } - - public List MedalDetails = new List - { - new ChartData { Country= "United States of America", Medals= 46 }, - new ChartData { Country= "Great Britain", Medals= 27 }, - new ChartData { Country= "China", Medals= 26 }, - new ChartData { Country= "United Kingdom", Medals= 23 }, - new ChartData { Country= "Australia", Medals= 16 }, - new ChartData { Country= "India", Medals= 36 }, - new ChartData { Country= "Nigeria", Medals= 12 }, - new ChartData { Country= "Brazil", Medals= 20 }, - }; -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhpjMhShUPfYVwX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding Title in Blazor Accumulation Chart](images/getting-started/blazor-accumulation-chart-with-title.webp)" %} - -## Add data label - -The data labels are added to improve the readability of the accumulation chart. This can be achieved by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Visible) property to `true` in the [AccumulationDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrJXWLorfzIwbIh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding Data Label in Blazor Accumulation Chart](images/getting-started/blazor-accumulation-chart-data-label.webp)" %} - -## Enable Tooltip - -When space constraints prevent from displaying the information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html#Syncfusion_Blazor_Charts_AccumulationChartTooltipSettings_Enable) property in [AccumulationChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html) to `true`. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrJZMhyLfknWQpM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart displays Tooltip](images/getting-started/blazor-accumulation-chart-tooltip.webp)" %} - -## Enable Legend - -Legend is used for the accumulation chart by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_Visible) property to `true` in the [AccumulationChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Accumulation component in your default web browser. - -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVzjCVSVyMUwbGm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Legend](images/getting-started/blazor-accumulation-chart-legend.webp)" %} - ## See also diff --git a/blazor/accumulation-chart/getting-started-with-web-app.md b/blazor/accumulation-chart/getting-started-with-web-app.md index 09f89e92d9..143e36a0f6 100644 --- a/blazor/accumulation-chart/getting-started-with-web-app.md +++ b/blazor/accumulation-chart/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Accumulation Chart in Blazor Web App -This section briefly explains about how to include [Syncfusion® Blazor Accumulation Chart](https://www.syncfusion.com/blazor-components/blazor-charts) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include [Syncfusion® Blazor Accumulation Chart](https://www.syncfusion.com/blazor-components/blazor-charts) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -139,7 +139,7 @@ N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, registe ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file. +The theme stylesheet and the script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file. ```html @@ -160,7 +160,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor %} -@* desired render mode define here *@ +@* desired render mode defined here *@ @rendermode InteractiveAuto {% endhighlight %} @@ -205,108 +205,6 @@ Press Ctrl+F5 (Windows) or ⌘+F5 (m N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AccumulationChart) -## Add title - -Using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_Title) property, a title to the accumulation chart is added to provide the user with quick information about the data plotted in the chart. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - -@code{ - public class ChartData - { - public string Country { get; set; } - public double Medals { get; set; } - } - - public List MedalDetails = new List - { - new ChartData { Country= "United States of America", Medals= 46 }, - new ChartData { Country= "Great Britain", Medals= 27 }, - new ChartData { Country= "China", Medals= 26 }, - new ChartData { Country= "United Kingdom", Medals= 23 }, - new ChartData { Country= "Australia", Medals= 16 }, - new ChartData { Country= "India", Medals= 36 }, - new ChartData { Country= "Nigeria", Medals= 12 }, - new ChartData { Country= "Brazil", Medals= 20 }, - }; -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhpjMhShUPfYVwX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding Title in Blazor Accumulation Chart](images/getting-started/blazor-accumulation-chart-with-title.webp)" %} - -## Add data label - -The data labels are added to improve the readability of the accumulation chart. This can be achieved by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Visible) property to `true` in the [AccumulationDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html). - -{% tabs %} -{% highlight razor %} - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrJXWLorfzIwbIh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding Data Label in Blazor Accumulation Chart](images/getting-started/blazor-accumulation-chart-data-label.webp)" %} - -## Enable Tooltip - -When space constraints prevent from displaying the information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html#Syncfusion_Blazor_Charts_AccumulationChartTooltipSettings_Enable) property in [AccumulationChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html) to `true`. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrJZMhyLfknWQpM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart displays Tooltip](images/getting-started/blazor-accumulation-chart-tooltip.webp)" %} - -## Enable Legend - -Legend is used for the accumulation chart by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_Visible) property to `true` in the [AccumulationChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Accumulation component in your default web browser. - -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVzjCVSVyMUwbGm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Legend](images/getting-started/blazor-accumulation-chart-legend.webp)" %} - ## See also diff --git a/blazor/accumulation-chart/getting-started.md b/blazor/accumulation-chart/getting-started.md index 837e190a23..5f0c28245d 100644 --- a/blazor/accumulation-chart/getting-started.md +++ b/blazor/accumulation-chart/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Stared with Blazor Accumulation Chart | Syncfusion +title: Getting Started with Blazor Accumulation Chart | Syncfusion description: Checkout and learn about getting started with Blazor Accumulation Chart component in Blazor WebAssembly App. platform: Blazor control: Accumulation Chart @@ -11,7 +11,7 @@ documentation: ug # Getting Started with Blazor Accumulation Chart Component -This section briefly explains about how to include [Syncfusion® Blazor Accumulation Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include [Syncfusion® Blazor Accumulation Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -131,7 +131,7 @@ builder.Services.AddSyncfusionBlazor(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file. +The theme stylesheet and the script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file. ```html @@ -225,67 +225,6 @@ Using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts {% previewsample "https://blazorplayground.syncfusion.com/embed/VjhpjMhShUPfYVwX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding Title in Blazor Accumulation Chart](images/getting-started/blazor-accumulation-chart-with-title.webp)" %} -## Add data label - -The data labels are added to improve the readability of the accumulation chart. This can be achieved by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Visible) property to `true` in the [AccumulationDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html). - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrJXWLorfzIwbIh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding Data Label in Blazor Accumulation Chart](images/getting-started/blazor-accumulation-chart-data-label.webp)" %} - -## Enable Tooltip - -When space constraints prevent from displaying the information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html#Syncfusion_Blazor_Charts_AccumulationChartTooltipSettings_Enable) property in [AccumulationChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html) to `true`. - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrJZMhyLfknWQpM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart displays Tooltip](images/getting-started/blazor-accumulation-chart-tooltip.webp)" %} - -## Enable Legend - -Legend is used for the accumulation chart by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_Visible) property to `true` in the [AccumulationChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html). - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVzjCVSVyMUwbGm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Legend](images/getting-started/blazor-accumulation-chart-legend.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AccumulationChart). diff --git a/blazor/chart/getting-started-wasm.md b/blazor/chart/getting-started-wasm.md index 2f06a41c93..3be65dc698 100644 --- a/blazor/chart/getting-started-wasm.md +++ b/blazor/chart/getting-started-wasm.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Stared with Blazor Chart Component | Syncfusion +title: Getting Started with Blazor Chart Component | Syncfusion description: Checkout and learn about getting started with Syncfusion Blazor Charts in Blazor WebAssembly (WASM) App using Visual Studio and more. platform: Blazor control: Chart @@ -11,7 +11,7 @@ documentation: ug # Getting Started with Blazor Chart Component in Blazor WASM App -This section briefly explains about how to include [Syncfusion® Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include [Syncfusion® Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). > **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) @@ -162,7 +162,7 @@ Add the Syncfusion® Blazor Chart component ## Populate Blazor chart with data -To bind data for the chart component, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). +To bind data for the chart component, you can assign an IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -226,95 +226,6 @@ Now, map the data fields `Month` and `Sales` to the series [XName](https://help {% previewsample "https://blazorplayground.syncfusion.com/embed/rtBTNiLezckHqsGf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart](images/getting-started/blazor-chart-column.webp)" %} -## Add titles - -Using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Title) property, you can add a title to the chart and the axes to provide the user with quick information about the data plotted in the chart. - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBJjihozcpDsXHf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Title](images/getting-started/blazor-chart-title.webp)" %} - -## Add data label - -You can add data labels to improve the readability of the chart. This can be achieved by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Visible) property to **true** in the [ChartDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html). - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - - - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVpjMhIzmJRkHwA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with DataLabel](images/getting-started/blazor-chart-data-label.webp)" %} - -## Enable Tooltip - -When space constraints prevent you from displaying information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html#Syncfusion_Blazor_Charts_ChartTooltipSettings_Enable) property in [ChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html) to **true**. - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVTNChepGIwhetf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Tooltip](images/getting-started/blazor-chart-tooltip.webp)" %} - -## Enable legend - -You can use legend for the chart by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Visible) property to **true** in [ChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html). The legend name can be changed by using the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Name) property in the series. - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrTDCLIpQHyGNEq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Legend](images/getting-started/blazor-chart-legend.webp)" %} - N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Chart) ## See also diff --git a/blazor/chart/getting-started-with-maui-app.md b/blazor/chart/getting-started-with-maui-app.md index cc012a2f06..e4b389d191 100644 --- a/blazor/chart/getting-started-with-maui-app.md +++ b/blazor/chart/getting-started-with-maui-app.md @@ -142,7 +142,7 @@ Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows. To run the Blazor Chart in a Blazor Android MAUI application using the Android emulator, follow these steps: -Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator. +Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch the Android emulator. N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). diff --git a/blazor/chart/getting-started-with-web-app.md b/blazor/chart/getting-started-with-web-app.md index 06bf81f6e1..2986dd090e 100644 --- a/blazor/chart/getting-started-with-web-app.md +++ b/blazor/chart/getting-started-with-web-app.md @@ -181,7 +181,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem ## Populate Blazor chart with data -To bind data for the chart component, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). +To bind data for the chart component, you can assign an IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -208,94 +208,40 @@ public List Sales = new List Now, map the data fields `Month` and `Sales` to the series [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_XName) and [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_YName) properties, then set the data to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property, and the [chart type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to **Column** because we will be viewing the data in a column chart. -## Add titles - -Using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Title) property, you can add a title to the chart and the axes to provide the user with quick information about the data plotted in the chart. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBJjihozcpDsXHf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Title](images/getting-started/blazor-chart-title.webp)" %} - -## Add data label - -You can add data labels to improve the readability of the chart. This can be achieved by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Visible) property to **true** in the [ChartDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html). - {% tabs %} {% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVpjMhIzmJRkHwA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with DataLabel](images/getting-started/blazor-chart-data-label.webp)" %} - -## Enable tooltip - -When space constraints prevent you from displaying information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html#Syncfusion_Blazor_Charts_ChartTooltipSettings_Enable) property in [ChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html) to **true**. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - + + -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVTNChepGIwhetf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Tooltip](images/getting-started/blazor-chart-tooltip.webp)" %} - -## Enable legend - -You can use legend for the chart by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Visible) property to **true** in [ChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html). The legend name can be changed by using the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Name) property in the series. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - +@code { + public class SalesInfo + { + public string Month { get; set;} + public double SalesValue { get; set;} + } + + public List Sales = new List + { + new SalesInfo { Month = "Jan", SalesValue = 35 }, + new SalesInfo { Month = "Feb", SalesValue = 28 }, + new SalesInfo { Month = "Mar", SalesValue = 34 }, + new SalesInfo { Month = "Apr", SalesValue = 32 }, + new SalesInfo { Month = "May", SalesValue = 40 }, + new SalesInfo { Month = "Jun", SalesValue = 32 }, + new SalesInfo { Month = "Jul", SalesValue = 35 } + }; +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrTDCLIpQHyGNEq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Legend](images/getting-started/blazor-chart-legend.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBTNiLezckHqsGf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart](images/getting-started/blazor-chart-column.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Chart). diff --git a/blazor/chart/getting-started.md b/blazor/chart/getting-started.md index 619ffce4b0..2b51ac7ecd 100644 --- a/blazor/chart/getting-started.md +++ b/blazor/chart/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Stared | Blazor Chart Component | Syncfusion +title: Getting Started | Blazor Chart Component | Syncfusion description: Checkout and learn about getting started with Blazor Charts component in Blazor Server App using Visual Studio and more. platform: Blazor control: Chart @@ -134,7 +134,7 @@ builder.Services.AddSyncfusionBlazor(); ## Add script resources -The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include script reference in the **App.razor** file. +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the **App.razor** file. ```html @@ -175,7 +175,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati ## Populate Blazor chart with data -To bind data for the chart component, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). +To bind data for the chart component, you can assign an IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -237,95 +237,6 @@ Now, map the data fields `Month` and `Sales` to the series [XName](https://help {% previewsample "https://blazorplayground.syncfusion.com/embed/rtBTNiLezckHqsGf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart](images/getting-started/blazor-chart-column.webp)" %} -## Add titles - -Using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Title) property, you can add a title to the chart and the axes to provide the user with quick information about the data plotted in the chart. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBJjihozcpDsXHf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Title](images/getting-started/blazor-chart-title.webp)" %} - -## Add data label - -You can add data labels to improve the readability of the chart. This can be achieved by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Visible) property to **true** in the [ChartDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVpjMhIzmJRkHwA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with DataLabel](images/getting-started/blazor-chart-data-label.webp)" %} - -## Enable tooltip - -When space constraints prevent you from displaying information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html#Syncfusion_Blazor_Charts_ChartTooltipSettings_Enable) property in [ChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html) to **true**. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVTNChepGIwhetf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Tooltip](images/getting-started/blazor-chart-tooltip.webp)" %} - -## Enable legend - -You can use legend for the chart by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Visible) property to **true** in [ChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html). The legend name can be changed by using the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Name) property in the series. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrTDCLIpQHyGNEq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Legend](images/getting-started/blazor-chart-legend.webp)" %} - N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Chart). ## See also diff --git a/blazor/maps/getting-started-webapp.md b/blazor/maps/getting-started-webapp.md index 8da0a14c8a..f2982270ac 100644 --- a/blazor/maps/getting-started-webapp.md +++ b/blazor/maps/getting-started-webapp.md @@ -1,7 +1,7 @@ --- layout: post title: Getting started with Syncfusion Maps Component in Blazor Web App -description: Check out the documentation for getting started with Syncfusion Blazor Maps Component Components in Blazor Web App. +description: Check out the documentation for getting started with Syncfusion Blazor Maps Component in Blazor Web App. platform: Blazor control: Maps documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Getting started with Blazor Maps Component in Blazor Web App -This section briefly explains about how to include [Syncfusion® Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include [Syncfusion® Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -155,7 +155,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor %} -@* desired render mode define here *@ +@* desired render mode defined here *@ @rendermode InteractiveAuto {% endhighlight %} @@ -170,7 +170,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -The Maps will not show any content on the web page while running the application because the properties related to the layer are not initialized in the above code. +The Maps will not display any content on the web page while running the application because the properties related to the layer are not initialized in the above code. ## Adding GeoJSON data in Blazor Maps layer @@ -199,232 +199,6 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- N> The "world-map.json" file contains the World map GeoJSON data. -## Bind data source - -The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. We can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the below list **SecurityCouncilDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@code { - public List SecurityCouncilDetails = new List{ - new UNCouncilCountry { Name= "China", Membership= "Permanent"}, - new UNCouncilCountry { Name= "France", Membership= "Permanent" }, - new UNCouncilCountry { Name= "Russia", Membership= "Permanent"}, - new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent"}, - new UNCouncilCountry { Name= "United States", Membership= "Permanent"}, - new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Ivory Coast", Membership= "Permanent"}, - new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent"} - }; - - public class UNCouncilCountry - { - public string Name { get; set; } - public string Membership { get; set; } - }; -} - -{% endhighlight %} -{% endtabs %} - -N> The United Nations Security Council data is referred from [source](https://en.wikipedia.org/wiki/List_of_members_of_the_United_Nations_Security_Council). - -You should also specify the field names in the shape data and data source to the [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) properties, respectively. These are used to identify the appropriate shapes and match the specific data source values to them. - -N> Please [refer to the section](populate-data#data-binding) for more information on data binding. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - @*To map shape data name field and data source field*@ - - - - - -{% endhighlight %} -{% endtabs %} - -N> For example, consider field names specified in [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) have the same value: **"United States"**. So corresponding color, data label and tooltip related settings will be applied to the **United States** shape. - -## Apply color mapping - -The color mapping supports customization of shape colors based on the underlying value of shape received from the bound data source. The values from the field name specified in the [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) property will be compared for the shapes with the values in the field name specified in the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property in [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html). Also, specify color and value in [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html). Here, in this example, **"#EDB46F"** is specified for **"Permanent"** and **"#F1931B"** is specified for **"Non-Permanent"**. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - @* Color mapping related configuration *@ - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDrdXVZpTCKEstPx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Color Mapping](./images/blazor-map-color-mapping.webp)" %} - -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. - -## Adding data labels - -Label provides information to users about the shapes, and you can enable label text to the shapes in the Maps component by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_Visible) property as **true** and field name from data source in the [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_LabelPath) property in [MapsDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - @* To add data labels *@ - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhHNLZzTMSPCHxK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Label](./images/blazor-map-label.webp)" %} - -## Adding title for Blazor Maps - -Title can be added to the Maps to provide quick information to the users about the shapes rendered in the component. You can add a title using [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html#Syncfusion_Blazor_Maps_MapsTitleSettings_Text) property in [MapsTitleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - @* To add title *@ - - - - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. - -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVnNLtpfWHcdHHC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Title](./images/blazor-map-title.webp)" %} - -## Enable legend - -The legend items are used to denote color mapping categories, and you can show legend for the Maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property to **true** in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - @* To add legend *@ - - - - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. - -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLHDrZTJilZXniY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Legend](./images/blazor-map-legend.webp)" %} - -## Enable tooltip - -The tooltip can be used when you cannot display information using the data labels due to space constraints. You can enable tooltip by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Visible) property to **true** in [MapsLayerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerTooltipSettings.html). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - - - - - @* To add tooltip for the shape *@ - - - - - -{% endhighlight %} -{% endtabs %} - -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBdXhZpzMurAPfU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Tooltip](./images/blazor-map-tooltip.webp)" %} - N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Maps). ## See also diff --git a/blazor/maps/getting-started-with-maui-app.md b/blazor/maps/getting-started-with-maui-app.md index a02f0164d3..a58066ac3f 100644 --- a/blazor/maps/getting-started-with-maui-app.md +++ b/blazor/maps/getting-started-with-maui-app.md @@ -35,7 +35,7 @@ To use the MAUI project templates, install the Mobile development with the .NET Create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. -Alternatively, create a MAUI application by using the following command in the integrated terminal (Ctrl+`). +Alternatively, create a MAUI application using the following command in the integrated terminal (Ctrl+`). {% tabs %} {% highlight c# tabtitle="Blazor MAUI App" %} @@ -131,7 +131,7 @@ Add the Syncfusion® Blazor Maps component i {% endhighlight %} {% endtabs %} -The Maps will not show any content on the web page while running the application because the properties related to the layer are not initialized in the above code. +The Maps will not display any content on the web page while running the application because the properties related to the layer are not initialized in the above code. ## Adding GeoJSON data in Blazor Maps layer @@ -172,244 +172,6 @@ N> If encounter any errors while using the Android Emulator, refer to the follow ![Blazor Maps with GeoJSON Layer](./images/blazor-map.webp) -## Bind data source - -The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. We can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the below list **SecurityCouncilDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@code { - public List SecurityCouncilDetails = new List{ - new UNCouncilCountry { Name= "China", Membership= "Permanent"}, - new UNCouncilCountry { Name= "France", Membership= "Permanent" }, - new UNCouncilCountry { Name= "Russia", Membership= "Permanent"}, - new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent"}, - new UNCouncilCountry { Name= "United States", Membership= "Permanent"}, - new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent"}, - new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent"} - }; - - public class UNCouncilCountry - { - public string Name { get; set; } - public string Membership { get; set; } - }; -} - -{% endhighlight %} -{% endtabs %} - -N> The United Nations Security Council data is referred from [source](https://en.wikipedia.org/wiki/List_of_members_of_the_United_Nations_Security_Council). - -You should also specify the field names in the shape data and data source to the [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) properties, respectively. These are used to identify the appropriate shapes and match the specific data source values to them. - -N> Please [refer to the section](populate-data#data-binding) for more information on data binding. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.Maps - - - - @*To map shape data name field and data source field*@ - - - - - -{% endhighlight %} -{% endtabs %} - -N> For example, consider field names specified in [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) have the same value: **"United States"**. So corresponding color, data label and tooltip related settings will be applied to the **United States** shape. - -## Apply color mapping - -The color mapping supports customization of shape colors based on the underlying value of shape received from the bound data source. The values from the field name specified in the [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) property will be compared for the shapes with the values in the field name specified in the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property in [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html). Also, specify color and value in [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html). Here, in this example, **"#EDB46F"** is specified for **"Permanent"** and **"#F1931B"** is specified for **"Non-Permanent"**. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.Maps - - - - - @* Color mapping related configuration *@ - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -![Blazor Maps with Color Mapping](./images/blazor-map-color-mapping.webp) - -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. - -## Adding data labels - -Label provides information to users about the shapes, and you can enable label text to the shapes in the Maps component by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_Visible) property as **true** and field name from data source in the [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_LabelPath) property in [MapsDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.Maps - - - - - @* To add data labels *@ - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. - -![Blazor Maps with Label](./images/blazor-map-label.webp) - -## Adding title for Blazor Maps - -Title can be added to the Maps to provide quick information to the users about the shapes rendered in the component. You can add a title using [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html#Syncfusion_Blazor_Maps_MapsTitleSettings_Text) property in [MapsTitleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.Maps - - - @* To add title *@ - - - - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. - -![Blazor Maps with Title](./images/blazor-map-title.webp) - -## Enable legend - -The legend items are used to denote color mapping categories, and you can show legend for the Maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property to **true** in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.Maps - - - - @* To add legend *@ - - - - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. - -![Blazor Maps with Legend](./images/blazor-map-legend.webp) - -## Enable tooltip - -The tooltip can be used when you cannot display information using the data labels due to space constraints. You can enable tooltip by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Visible) property to **true** in [MapsLayerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerTooltipSettings.html). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.Maps - - - - - - - - - - - - - - @* To add tooltip for the shape *@ - - - - - -{% endhighlight %} -{% endtabs %} - -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. - -![Blazor Maps with Tooltip](./images/blazor-map-tooltip.webp) - N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Maps). ## See also diff --git a/blazor/maps/getting-started-with-server-app.md b/blazor/maps/getting-started-with-server-app.md index 78c90bd2a6..a4153548c8 100644 --- a/blazor/maps/getting-started-with-server-app.md +++ b/blazor/maps/getting-started-with-server-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Maps Component in Blazor Server App -This section briefly explains about how to include [Syncfusion® Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component in your Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include [Syncfusion® Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component in your Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -138,7 +138,7 @@ The script can be accessed from NuGet through [Static Web Assets](https://blazor ``` -N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. +N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. ## Add Syncfusion® Blazor Maps component @@ -149,7 +149,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor %} -@* desired render mode define here *@ +@* desired render mode defined here *@ @rendermode InteractiveServer {% endhighlight %} @@ -164,7 +164,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% endhighlight %} {% endtabs %} -The Maps will not show any content on the web page while running the application because the properties related to the layer are not initialized in the above code. +The Maps will not display any content on the web page while running the application because the properties related to the layer are not initialized in the above code. ## Adding GeoJSON data in Blazor Maps layer @@ -191,232 +191,6 @@ N> The "world-map.json" file contains the World map GeoJSON data. {% previewsample "https://blazorplayground.syncfusion.com/embed/hZBzNsUjWcevzcvR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with GeoJSON Layer](./images/blazor-map.webp)" %} -## Bind data source - -The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. We can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the below list **SecurityCouncilDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@code { - public List SecurityCouncilDetails = new List{ - new UNCouncilCountry { Name= "China", Membership= "Permanent"}, - new UNCouncilCountry { Name= "France", Membership= "Permanent" }, - new UNCouncilCountry { Name= "Russia", Membership= "Permanent"}, - new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent"}, - new UNCouncilCountry { Name= "United States", Membership= "Permanent"}, - new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent"}, - new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent"} - }; - - public class UNCouncilCountry - { - public string Name { get; set; } - public string Membership { get; set; } - }; -} - -{% endhighlight %} -{% endtabs %} - -N> The United Nations Security Council data is referred from [source](https://en.wikipedia.org/wiki/List_of_members_of_the_United_Nations_Security_Council). - -You should also specify the field names in the shape data and data source to the [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) properties, respectively. These are used to identify the appropriate shapes and match the specific data source values to them. - -N> Please [refer to the section](populate-data#data-binding) for more information on data binding. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - @*To map shape data name field and data source field*@ - - - - - -{% endhighlight %} -{% endtabs %} - -N> For example, consider field names specified in [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) have the same value: **"United States"**. So corresponding color, data label and tooltip related settings will be applied to the **United States** shape. - -## Apply color mapping - -The color mapping supports customization of shape colors based on the underlying value of shape received from the bound data source. The values from the field name specified in the [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) property will be compared for the shapes with the values in the field name specified in the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property in [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html). Also, specify color and value in [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html). Here, in this example, **"#EDB46F"** is specified for **"Permanent"** and **"#F1931B"** is specified for **"Non-Permanent"**. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - @* Color mapping related configuration *@ - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/BthTXCgjWGYITQsB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Color Mapping](./images/blazor-map-color-mapping.webp)" %} - -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. - -## Adding data labels - -Label provides information to users about the shapes, and you can enable label text to the shapes in the Maps component by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_Visible) property as **true** and field name from data source in the [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_LabelPath) property in [MapsDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - @* To add data labels *@ - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLJDiKjMPitIelx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Label](./images/blazor-map-label.webp)" %} - -## Adding title for Blazor Maps - -Title can be added to the Maps to provide quick information to the users about the shapes rendered in the component. You can add a title using [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html#Syncfusion_Blazor_Maps_MapsTitleSettings_Text) property in [MapsTitleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - @* To add title *@ - - - - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VthftCKZWbsaohgF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Title](./images/blazor-map-title.webp)" %} - -## Enable legend - -The legend items are used to denote color mapping categories, and you can show legend for the Maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property to **true** in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - @* To add legend *@ - - - - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. - -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLzNsKtiFmBLBLC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Legend](./images/blazor-map-legend.webp)" %} - -## Enable tooltip - -The tooltip can be used when you cannot display information using the data labels due to space constraints. You can enable tooltip by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Visible) property to **true** in [MapsLayerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerTooltipSettings.html). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - - - - - @* To add tooltip for the shape *@ - - - - - -{% endhighlight %} -{% endtabs %} - -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. - -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBfXWgjCPFtJBKY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Tooltip](./images/blazor-map-tooltip.webp)" %} - N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Maps). ## See also diff --git a/blazor/maps/getting-started.md b/blazor/maps/getting-started.md index cf8bfc6b5c..be3630066b 100644 --- a/blazor/maps/getting-started.md +++ b/blazor/maps/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Maps Component -This section briefly explains about how to include [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component in your Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component in your Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -197,7 +197,7 @@ Add the Syncfusion® Blazor Maps component i {% endhighlight %} {% endtabs %} -The Maps will not show any content on the web page while running the application because the properties related to the layer are not initialized in the above code. +The Maps will not display any content on the web page while running the application because the properties related to the layer are not initialized in the above code. ## Adding GeoJSON data in Blazor Maps layer @@ -222,231 +222,6 @@ You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla N> The "world-map.json" file contains the World map GeoJSON data. -## Bind data source - -The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. We can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the below list **SecurityCouncilDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). - -{% tabs %} -{% highlight razor %} - -@code { - public List SecurityCouncilDetails = new List{ - new UNCouncilCountry { Name= "China", Membership= "Permanent"}, - new UNCouncilCountry { Name= "France", Membership= "Permanent" }, - new UNCouncilCountry { Name= "Russia", Membership= "Permanent"}, - new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent"}, - new UNCouncilCountry { Name= "United States", Membership= "Permanent"}, - new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent"}, - new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent"}, - new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent"} - }; - - public class UNCouncilCountry - { - public string Name { get; set; } - public string Membership { get; set; } - }; -} - -{% endhighlight %} -{% endtabs %} - -N> The United Nations Security Council data is referred from [source](https://en.wikipedia.org/wiki/List_of_members_of_the_United_Nations_Security_Council). - -You should also specify the field names in the shape data and data source to the [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) properties, respectively. These are used to identify the appropriate shapes and match the specific data source values to them. - -N> Please [refer to the section](populate-data#data-binding) for more information on data binding. - -{% tabs %} -{% highlight razor %} - - - - @*To map shape data name field and data source field*@ - - - - - -{% endhighlight %} -{% endtabs %} - -N> For example, consider field names specified in [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) have the same value: **"United States"**. So corresponding color, data label and tooltip related settings will be applied to the **United States** shape. - -## Apply color mapping - -The color mapping supports customization of shape colors based on the underlying value of shape received from the bound data source. The values from the field name specified in the [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) property will be compared for the shapes with the values in the field name specified in the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property in [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html). Also, specify color and value in [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html). Here, in this example, **"#EDB46F"** is specified for **"Permanent"** and **"#F1931B"** is specified for **"Non-Permanent"**. - -{% tabs %} -{% highlight razor %} - - - - - @* Color mapping related configuration *@ - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/BthTXCgjWGYITQsB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Color Mapping](./images/blazor-map-color-mapping.webp)" %} - -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. - -## Adding data labels - -Label provides information to users about the shapes, and you can enable label text to the shapes in the Maps component by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_Visible) property as **true** and field name from data source in the [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_LabelPath) property in [MapsDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html). - -{% tabs %} -{% highlight razor %} - - - - - @* To add data labels *@ - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLJDiKjMPitIelx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Label](./images/blazor-map-label.webp)" %} - -## Adding title for Blazor Maps - -Title can be added to the Maps to provide quick information to the users about the shapes rendered in the component. You can add a title using [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html#Syncfusion_Blazor_Maps_MapsTitleSettings_Text) property in [MapsTitleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html). - -{% tabs %} -{% highlight razor %} - - - @* To add title *@ - - - - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VthftCKZWbsaohgF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Title](./images/blazor-map-title.webp)" %} - -## Enable legend - -The legend items are used to denote color mapping categories, and you can show legend for the Maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property to **true** in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html). - -{% tabs %} -{% highlight razor %} - - - - @* To add legend *@ - - - - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. - -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLzNsKtiFmBLBLC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Legend](./images/blazor-map-legend.webp)" %} - -## Enable tooltip - -The tooltip can be used when you cannot display information using the data labels due to space constraints. You can enable tooltip by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Visible) property to **true** in [MapsLayerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerTooltipSettings.html). - -{% tabs %} -{% highlight razor %} - - - - - - - - - - - - - - @* To add tooltip for the shape *@ - - - - - -{% endhighlight %} -{% endtabs %} - -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. - -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBfXWgjCPFtJBKY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Tooltip](./images/blazor-map-tooltip.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Maps). diff --git a/blazor/stock-chart/getting-started-webapp.md b/blazor/stock-chart/getting-started-webapp.md index 23902e18dd..3e6858ae15 100644 --- a/blazor/stock-chart/getting-started-webapp.md +++ b/blazor/stock-chart/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Stock Chart in Blazor Web App -This section briefly explains about how to include [Syncfusion® Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include [Syncfusion® Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -137,7 +137,7 @@ N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, registe ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file. +The theme stylesheet and the script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file. ```html @@ -158,7 +158,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor %} -@* desired render mode define here *@ +@* desired render mode defined here *@ @rendermode InteractiveAuto {% endhighlight %} @@ -209,7 +209,7 @@ To bind data for the Stock Chart component, assign a `IEnumerable` object to the {% endhighlight %} {% endtabs %} -Now set the `StockDetails` to [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_DataSource) property. By default, Stock Chart will be rendered based on the provided `Date` and `High` fields value from datasource without any mapping. +Now set the `StockDetails` to [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_DataSource) property. By default, Stock Chart will be rendered based on the provided `Date` and `High` fields value from the datasource without any mapping. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -229,131 +229,6 @@ Press Ctrl+F5 (Windows) or ⌘+F5 (m N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/StockChart). -## Adding Title - -A title using [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_Title) property can be added in the Stock Chart, to provide quick information to the user about the data plotted in the component. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - -@code { - public class ChartData - { - public DateTime Date { get; set; } - public Double Open { get; set; } - public Double Low { get; set; } - public Double Close { get; set; } - public Double High { get; set; } - public Double Volume { get; set; } - } - - public List StockDetails = new List - { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} - }; -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrJtMKjTJvplKeq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stock Chart with Title](images/blazor-stock-chart-title.webp)" %} - -## Adding Crosshair - -The crosshair is a vertical and horizontal line on the view that shows the value of an axis when the mouse or touch is in a certain position. The crosshair lines can be enabled by using [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Enable) property in the [StockChartCrosshairSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html). Likewise tooltip label for an axis can be enabled by using [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_Enable) property in the [StockChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - -@code { - public class ChartData - { - public DateTime Date { get; set; } - public Double Y { get; set; } - } - - public List StockDetails = new List - { - new ChartData { Date = new DateTime(2012, 04, 02), Y= 100}, - new ChartData { Date = new DateTime(2012, 04, 09), Y= 10 }, - new ChartData { Date = new DateTime(2012, 04, 16), Y= 500}, - new ChartData { Date = new DateTime(2012, 04, 23), Y= 80 }, - new ChartData { Date = new DateTime(2012, 04, 30), Y= 200}, - new ChartData { Date = new DateTime(2012, 05, 07), Y= 600}, - new ChartData { Date = new DateTime(2012, 05, 14), Y= 50 }, - new ChartData { Date = new DateTime(2012, 05, 21), Y= 700}, - new ChartData { Date = new DateTime(2012, 05, 28), Y= 90 } - }; -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhTtsANzJEKAOXS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stock Chart with Crosshair](images/blazor-stock-chart-with-crosshair.webp)" %} - -## Adding Trackball - -The trackball is used to track a closest data point to the mouse or touch position. The trackball marker indicates the closest point and trackball tooltip displays the information about the point. It can be enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Enable) property in the [StockChartCrosshairSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html) to **true** and [Shared](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_Shared) property in the [StockChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html) to **true** in component. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - -@code { - public class ChartData - { - public DateTime Date { get; set; } - public Double Y { get; set; } - public Double Y1 { get; set; } - } - - public List StockDetails = new List - { - new ChartData { Date = new DateTime(2012, 04, 02), Y= 100, Y1= 50}, - new ChartData { Date = new DateTime(2012, 04, 09), Y= 10 , Y1= 5}, - new ChartData { Date = new DateTime(2012, 04, 16), Y= 500, Y1= 250}, - new ChartData { Date = new DateTime(2012, 04, 23), Y= 80 , Y1= 60}, - new ChartData { Date = new DateTime(2012, 04, 30), Y= 200, Y1= 100}, - new ChartData { Date = new DateTime(2012, 05, 07), Y= 600, Y1= 300}, - new ChartData { Date = new DateTime(2012, 05, 14), Y= 50 , Y1= 25}, - new ChartData { Date = new DateTime(2012, 05, 21), Y= 700, Y1= 350}, - new ChartData { Date = new DateTime(2012, 05, 28), Y= 90 , Y1= 45} - }; -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrfXCgjzINVMeUY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stock Chart with Trackball](images/blazor-stock-chart-trackball.webp)" %} ## See also diff --git a/blazor/stock-chart/getting-started.md b/blazor/stock-chart/getting-started.md index 3799240c45..88935a5dc5 100644 --- a/blazor/stock-chart/getting-started.md +++ b/blazor/stock-chart/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Stock Chart Component -This section briefly explains about how to include [Syncfusion® Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include [Syncfusion® Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -129,7 +129,7 @@ builder.Services.AddSyncfusionBlazor(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file. +The theme stylesheet and the script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file. ```html @@ -192,7 +192,7 @@ To bind data for the Stock Chart component, assign a `IEnumerable` object to the {% endhighlight %} {% endtabs %} -Now set the `StockDetails` to [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_DataSource) property. By default, Stock Chart will be rendered based on the provided `Date` and `High` fields value from datasource without any mapping. +Now set the `StockDetails` to [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_DataSource) property. By default, Stock Chart will be rendered based on the provided `Date` and `High` fields value from the datasource without any mapping. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -214,138 +214,6 @@ Press Ctrl+F5 (Windows) or ⌘+F5 (m N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/StockChart). -## Adding Title - -A title using [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_Title) property can be added in the Stock Chart, to provide quick information to the user about the data plotted in the component. - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.Charts - - - - - - - -@code { - public class ChartData - { - public DateTime Date { get; set; } - public Double Open { get; set; } - public Double Low { get; set; } - public Double Close { get; set; } - public Double High { get; set; } - public Double Volume { get; set; } - } - - public List StockDetails = new List - { - new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068}, - new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864}, - new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066}, - new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749}, - new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High = 85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365}, - new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692}, - new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233}, - new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215}, - new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584} - }; -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrJtMKjTJvplKeq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stock Chart with Title](images/blazor-stock-chart-title.webp)" %} - -## Adding Crosshair - -The crosshair is a vertical and horizontal line on the view that shows the value of an axis when the mouse or touch is in a certain position. The crosshair lines can be enabled by using [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Enable) property in the [StockChartCrosshairSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html). Likewise tooltip label for an axis can be enabled by using [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_Enable) property in the [StockChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html). - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.Charts - - - - - - - - -@code { - public class ChartData - { - public DateTime Date { get; set; } - public Double Y { get; set; } - } - - public List StockDetails = new List - { - new ChartData { Date = new DateTime(2012, 04, 02), Y= 100}, - new ChartData { Date = new DateTime(2012, 04, 09), Y= 10 }, - new ChartData { Date = new DateTime(2012, 04, 16), Y= 500}, - new ChartData { Date = new DateTime(2012, 04, 23), Y= 80 }, - new ChartData { Date = new DateTime(2012, 04, 30), Y= 200}, - new ChartData { Date = new DateTime(2012, 05, 07), Y= 600}, - new ChartData { Date = new DateTime(2012, 05, 14), Y= 50 }, - new ChartData { Date = new DateTime(2012, 05, 21), Y= 700}, - new ChartData { Date = new DateTime(2012, 05, 28), Y= 90 } - }; -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhTtsANzJEKAOXS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stock Chart with Crosshair](images/blazor-stock-chart-with-crosshair.webp)" %} - -## Adding Trackball - -The trackball is used to track a closest data point to the mouse or touch position. The trackball marker indicates the closest point and trackball tooltip displays the information about the point. It can be enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Enable) property in the [StockChartCrosshairSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html) to **true** and [Shared](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_Shared) property in the [StockChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html) to **true** in component. - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.Charts - - - - - - - - - - -@code { - public class ChartData - { - public DateTime Date { get; set; } - public Double Y { get; set; } - public Double Y1 { get; set; } - } - - public List StockDetails = new List - { - new ChartData { Date = new DateTime(2012, 04, 02), Y= 100, Y1= 50}, - new ChartData { Date = new DateTime(2012, 04, 09), Y= 10 , Y1= 5}, - new ChartData { Date = new DateTime(2012, 04, 16), Y= 500, Y1= 250}, - new ChartData { Date = new DateTime(2012, 04, 23), Y= 80 , Y1= 60}, - new ChartData { Date = new DateTime(2012, 04, 30), Y= 200, Y1= 100}, - new ChartData { Date = new DateTime(2012, 05, 07), Y= 600, Y1= 300}, - new ChartData { Date = new DateTime(2012, 05, 14), Y= 50 , Y1= 25}, - new ChartData { Date = new DateTime(2012, 05, 21), Y= 700, Y1= 350}, - new ChartData { Date = new DateTime(2012, 05, 28), Y= 90 , Y1= 45} - }; -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrfXCgjzINVMeUY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stock Chart with Trackball](images/blazor-stock-chart-trackball.webp)" %} - ## See also * [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) From 0a5d67c3eddadb6c072f5dcec8ec6e8af5a10393 Mon Sep 17 00:00:00 2001 From: Venkatesan Kumar Date: Sat, 16 May 2026 00:27:53 +0530 Subject: [PATCH 2/3] 1005021: update the content --- blazor/maps/getting-started-webapp.md | 42 +++++++++++++++++++ blazor/maps/getting-started-with-maui-app.md | 42 +++++++++++++++++++ .../maps/getting-started-with-server-app.md | 42 +++++++++++++++++++ blazor/maps/getting-started.md | 41 ++++++++++++++++++ 4 files changed, 167 insertions(+) diff --git a/blazor/maps/getting-started-webapp.md b/blazor/maps/getting-started-webapp.md index f2982270ac..2e3382844e 100644 --- a/blazor/maps/getting-started-webapp.md +++ b/blazor/maps/getting-started-webapp.md @@ -199,6 +199,48 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- N> The "world-map.json" file contains the World map GeoJSON data. +## Bind data source + +The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. We can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the below list **SecurityCouncilDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + +@code { + public List SecurityCouncilDetails = new List{ + new UNCouncilCountry { Name= "China", Membership= "Permanent"}, + new UNCouncilCountry { Name= "France", Membership= "Permanent" }, + new UNCouncilCountry { Name= "Russia", Membership= "Permanent"}, + new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent"}, + new UNCouncilCountry { Name= "United States", Membership= "Permanent"}, + new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent"}, + new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent"} + }; + + public class UNCouncilCountry + { + public string Name { get; set; } + public string Membership { get; set; } + }; +} + +{% endhighlight %} +{% endtabs %} + +N> The United Nations Security Council data is referred from [source](https://en.wikipedia.org/wiki/List_of_members_of_the_United_Nations_Security_Council). + +You should also specify the field names in the shape data and data source to the [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) properties, respectively. These are used to identify the appropriate shapes and match the specific data source values to them. + +N> Please [refer to the section](populate-data#data-binding) for more information on data binding. + N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Maps). ## See also diff --git a/blazor/maps/getting-started-with-maui-app.md b/blazor/maps/getting-started-with-maui-app.md index a58066ac3f..d5524d2502 100644 --- a/blazor/maps/getting-started-with-maui-app.md +++ b/blazor/maps/getting-started-with-maui-app.md @@ -172,6 +172,48 @@ N> If encounter any errors while using the Android Emulator, refer to the follow ![Blazor Maps with GeoJSON Layer](./images/blazor-map.webp) +## Bind data source + +The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. We can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the below list **SecurityCouncilDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + +@code { + public List SecurityCouncilDetails = new List{ + new UNCouncilCountry { Name= "China", Membership= "Permanent"}, + new UNCouncilCountry { Name= "France", Membership= "Permanent" }, + new UNCouncilCountry { Name= "Russia", Membership= "Permanent"}, + new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent"}, + new UNCouncilCountry { Name= "United States", Membership= "Permanent"}, + new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent"}, + new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent"} + }; + + public class UNCouncilCountry + { + public string Name { get; set; } + public string Membership { get; set; } + }; +} + +{% endhighlight %} +{% endtabs %} + +N> The United Nations Security Council data is referred from [source](https://en.wikipedia.org/wiki/List_of_members_of_the_United_Nations_Security_Council). + +You should also specify the field names in the shape data and data source to the [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) properties, respectively. These are used to identify the appropriate shapes and match the specific data source values to them. + +N> Please [refer to the section](populate-data#data-binding) for more information on data binding. + N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Maps). ## See also diff --git a/blazor/maps/getting-started-with-server-app.md b/blazor/maps/getting-started-with-server-app.md index a4153548c8..7d75c42d36 100644 --- a/blazor/maps/getting-started-with-server-app.md +++ b/blazor/maps/getting-started-with-server-app.md @@ -191,6 +191,48 @@ N> The "world-map.json" file contains the World map GeoJSON data. {% previewsample "https://blazorplayground.syncfusion.com/embed/hZBzNsUjWcevzcvR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with GeoJSON Layer](./images/blazor-map.webp)" %} +## Bind data source + +The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. We can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the below list **SecurityCouncilDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + +@code { + public List SecurityCouncilDetails = new List{ + new UNCouncilCountry { Name= "China", Membership= "Permanent"}, + new UNCouncilCountry { Name= "France", Membership= "Permanent" }, + new UNCouncilCountry { Name= "Russia", Membership= "Permanent"}, + new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent"}, + new UNCouncilCountry { Name= "United States", Membership= "Permanent"}, + new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent"}, + new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent"} + }; + + public class UNCouncilCountry + { + public string Name { get; set; } + public string Membership { get; set; } + }; +} + +{% endhighlight %} +{% endtabs %} + +N> The United Nations Security Council data is referred from [source](https://en.wikipedia.org/wiki/List_of_members_of_the_United_Nations_Security_Council). + +You should also specify the field names in the shape data and data source to the [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) properties, respectively. These are used to identify the appropriate shapes and match the specific data source values to them. + +N> Please [refer to the section](populate-data#data-binding) for more information on data binding. + N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Maps). ## See also diff --git a/blazor/maps/getting-started.md b/blazor/maps/getting-started.md index be3630066b..e8f5204bf6 100644 --- a/blazor/maps/getting-started.md +++ b/blazor/maps/getting-started.md @@ -222,6 +222,47 @@ You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla N> The "world-map.json" file contains the World map GeoJSON data. +## Bind data source + +The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. We can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the below list **SecurityCouncilDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + +@code { + public List SecurityCouncilDetails = new List{ + new UNCouncilCountry { Name= "China", Membership= "Permanent"}, + new UNCouncilCountry { Name= "France", Membership= "Permanent" }, + new UNCouncilCountry { Name= "Russia", Membership= "Permanent"}, + new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent"}, + new UNCouncilCountry { Name= "United States", Membership= "Permanent"}, + new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent"}, + new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent"} + }; + + public class UNCouncilCountry + { + public string Name { get; set; } + public string Membership { get; set; } + }; +} + +{% endhighlight %} +{% endtabs %} + +N> The United Nations Security Council data is referred from [source](https://en.wikipedia.org/wiki/List_of_members_of_the_United_Nations_Security_Council). + +You should also specify the field names in the shape data and data source to the [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) properties, respectively. These are used to identify the appropriate shapes and match the specific data source values to them. + +N> Please [refer to the section](populate-data#data-binding) for more information on data binding. N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Maps). From d6fb9c16b656cd4b018a7c405d3abca937f17a5a Mon Sep 17 00:00:00 2001 From: Venkatesan Kumar Date: Sat, 16 May 2026 00:33:57 +0530 Subject: [PATCH 3/3] 1005021: update the code --- blazor/maps/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/maps/getting-started.md b/blazor/maps/getting-started.md index e8f5204bf6..3eadd44e09 100644 --- a/blazor/maps/getting-started.md +++ b/blazor/maps/getting-started.md @@ -227,7 +227,7 @@ N> The "world-map.json" file contains the World map GeoJSON data. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. We can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the below list **SecurityCouncilDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). {% tabs %} -{% highlight razor tabtitle="Home.razor" %} +{% highlight razor %} @code { public List SecurityCouncilDetails = new List{