From 426ce4b7be1c1c36dec3fb7edba398ea5c571c33 Mon Sep 17 00:00:00 2001 From: Sittiq Date: Sat, 16 May 2026 11:00:22 +0530 Subject: [PATCH 1/4] 1005021: Updated the UG documentations getting started content according to component rendering. --- .../getting-started-with-server-app.md | 120 +---------- .../getting-started-with-web-app.md | 114 +--------- blazor/accumulation-chart/getting-started.md | 115 +--------- blazor/chart/getting-started-wasm.md | 97 +-------- blazor/chart/getting-started-with-maui-app.md | 4 +- blazor/chart/getting-started-with-web-app.md | 100 ++------- blazor/chart/getting-started.md | 95 +------- blazor/maps/getting-started-webapp.md | 196 +---------------- blazor/maps/getting-started-with-maui-app.md | 202 +----------------- .../maps/getting-started-with-server-app.md | 194 +---------------- blazor/maps/getting-started.md | 190 +--------------- blazor/stock-chart/getting-started-webapp.md | 133 +----------- blazor/stock-chart/getting-started.md | 138 +----------- 13 files changed, 75 insertions(+), 1623 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..85e71ca1bf 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 %} @@ -129,30 +129,28 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add 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 script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script references in the **~/Components/App.razor** file. ```html - -.... ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, 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. +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 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 +195,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..b1cbd7e403 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 %} @@ -137,19 +137,17 @@ builder.Services.AddSyncfusionBlazor(); N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. -## Add stylesheet and script resources +## Add 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 script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script references in the **~/Components/App.razor** file. ```html - -.... ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, 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. +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 Accumulation Chart component @@ -160,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 %} @@ -205,108 +203,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..6f5628c06c 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 %} @@ -129,18 +129,17 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add 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 script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script references in the **~/Components/App.razor** file. ```html - ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, 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. +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 Accumulation Chart component @@ -185,111 +184,9 @@ Press Ctrl+F5 (Windows) or ⌘+F5 (m {% previewsample "https://blazorplayground.syncfusion.com/embed/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart.webp)" %} -## 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="Index.razor" %} - -@using Syncfusion.Blazor.Charts - - - - - - - -@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="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). ## See also * [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/chart/getting-started-wasm.md b/blazor/chart/getting-started-wasm.md index 2f06a41c93..7aa995578b 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) @@ -132,7 +132,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 the script reference in the **~/index.html** file. +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the **~/index.html** file. ```html @@ -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..97c22e49a9 100644 --- a/blazor/chart/getting-started-with-maui-app.md +++ b/blazor/chart/getting-started-with-maui-app.md @@ -108,7 +108,7 @@ public static class MauiProgram ## 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 the script reference in the **~/index.html** file. +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the **~/index.html** file. ```html @@ -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..d7ccdabd58 100644 --- a/blazor/chart/getting-started-with-web-app.md +++ b/blazor/chart/getting-started-with-web-app.md @@ -140,7 +140,7 @@ N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, registe ## 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 the script reference in the **~/Components/App.razor** file. +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the **~/Components/App.razor** file. ```html @@ -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..6a458d0fa9 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/common/adding-script-references#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..ee22d73c2c 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 %} @@ -136,7 +136,7 @@ N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, registe ## 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 the script reference in the **~/Components/App.razor** file. +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the **~/Components/App.razor** file. ```html @@ -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 @@ -219,7 +219,7 @@ The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Ma 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= "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"} @@ -241,190 +241,6 @@ You should also specify the field names in the shape data and data source to the 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..ca2b8cc061 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" %} @@ -106,7 +106,7 @@ public static class MauiProgram ## 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 the script reference in the **~/index.html** file. +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the **~/index.html** file. ```html @@ -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 @@ -214,202 +214,6 @@ You should also specify the field names in the shape data and data source to the 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..fbaee7e364 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 %} @@ -130,7 +130,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 the script reference in the **~/Components/App.razor** file. +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the **~/Components/App.razor** file. ```html @@ -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 @@ -233,190 +233,6 @@ You should also specify the field names in the shape data and data source to the 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..4e6f8515ce 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 %} @@ -170,7 +170,7 @@ await builder.Build().RunAsync(); ## 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 the script reference in the `` section of the **~/index.html** file. +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the `` section of the **~/index.html** file. ```html @@ -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 @@ -264,190 +264,6 @@ You should also specify the field names in the shape data and data source to the 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). ## See also 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 116495dcf869c479a97dea2af59729353711e045 Mon Sep 17 00:00:00 2001 From: mohammednowfel4989 Date: Mon, 18 May 2026 12:29:28 +0530 Subject: [PATCH 2/4] 1005021: Resolved the mentioned review concerns. --- .../getting-started-with-server-app.md | 7 +- .../getting-started-with-web-app.md | 7 +- blazor/accumulation-chart/getting-started.md | 7 +- blazor/chart/getting-started-wasm.md | 33 +- blazor/chart/getting-started-with-maui-app.md | 7 +- blazor/chart/getting-started-with-web-app.md | 33 +- blazor/chart/getting-started.md | 33 +- blazor/maps/getting-started-webapp.md | 81 +++- blazor/maps/getting-started-with-maui-app.md | 84 ++-- .../maps/getting-started-with-server-app.md | 81 +++- blazor/maps/getting-started.md | 358 +++++++++++++----- blazor/stock-chart/getting-started-webapp.md | 29 +- blazor/stock-chart/getting-started.md | 33 +- 13 files changed, 511 insertions(+), 282 deletions(-) diff --git a/blazor/accumulation-chart/getting-started-with-server-app.md b/blazor/accumulation-chart/getting-started-with-server-app.md index 85e71ca1bf..413cb8cf1a 100644 --- a/blazor/accumulation-chart/getting-started-with-server-app.md +++ b/blazor/accumulation-chart/getting-started-with-server-app.md @@ -83,7 +83,7 @@ cd BlazorApp N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -### Install Syncfusion® Blazor packages +## Install Syncfusion® Blazor packages Install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. @@ -159,8 +159,11 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} + + + @@ -191,7 +194,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Accumulation Chart component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart-webapp.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart-webapp.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AccumulationChart) diff --git a/blazor/accumulation-chart/getting-started-with-web-app.md b/blazor/accumulation-chart/getting-started-with-web-app.md index b1cbd7e403..a0bd399088 100644 --- a/blazor/accumulation-chart/getting-started-with-web-app.md +++ b/blazor/accumulation-chart/getting-started-with-web-app.md @@ -87,7 +87,7 @@ This command creates a new Blazor Web App and places it in a new directory calle N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -### Install Syncfusion® Blazor packages +## Install Syncfusion® Blazor packages Install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. @@ -167,8 +167,11 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} + + + @@ -199,7 +202,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Accumulation Chart component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart-webapp.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart-webapp.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AccumulationChart) diff --git a/blazor/accumulation-chart/getting-started.md b/blazor/accumulation-chart/getting-started.md index 6f5628c06c..69defe376c 100644 --- a/blazor/accumulation-chart/getting-started.md +++ b/blazor/accumulation-chart/getting-started.md @@ -150,8 +150,11 @@ Add the Syncfusion® Blazor Accumulation Cha @using Syncfusion.Blazor.Charts + + + @@ -182,11 +185,11 @@ Add the Syncfusion® Blazor Accumulation Cha Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Accumulation Chart component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AccumulationChart). ## See also * [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file +* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/chart/getting-started-wasm.md b/blazor/chart/getting-started-wasm.md index 7aa995578b..fbc5dd77c1 100644 --- a/blazor/chart/getting-started-wasm.md +++ b/blazor/chart/getting-started-wasm.md @@ -149,6 +149,7 @@ Add the Syncfusion® Blazor Chart component {% tabs %} {% highlight razor tabtitle="Index.razor" %} + @@ -158,36 +159,13 @@ Add the Syncfusion® Blazor Chart component * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chart component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.png)" %} ## Populate Blazor chart with data 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" %} - -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 %} - -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. +Map the data fields `Month` and `SalesValue` 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. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -195,8 +173,11 @@ Now, map the data fields `Month` and `Sales` to the series [XName](https://help @using Syncfusion.Blazor.Charts + + + @@ -224,7 +205,7 @@ Now, map the data fields `Month` and `Sales` to the series [XName](https://help {% endhighlight %} {% endtabs %} -{% 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)" %} +{% 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.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Chart) diff --git a/blazor/chart/getting-started-with-maui-app.md b/blazor/chart/getting-started-with-maui-app.md index 97c22e49a9..57d81eac6a 100644 --- a/blazor/chart/getting-started-with-maui-app.md +++ b/blazor/chart/getting-started-with-maui-app.md @@ -7,7 +7,7 @@ control: Chart documentation: ug --- -# Getting Started with Blazor Chart +# Getting Started with Blazor Chart Component in Blazor MAUI App This section explains you through the step-by-step process of integrating the [Syncfusion® Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component in your Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). @@ -125,6 +125,7 @@ Add the Syncfusion® Blazor Chart component {% tabs %} {% highlight razor tabtitle="Home.razor" %} + @@ -136,7 +137,7 @@ Add the Syncfusion® Blazor Chart component Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows. -![Blazor Chart Component](images/blazor-chart-maui-app.webp) +![Blazor Chart Component](images/blazor-chart-maui-app.png) ### How to run the sample on android @@ -146,7 +147,7 @@ Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/devi 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). -![Blazor Chart Component](images/getting-started/blazor-chart.webp) +![Blazor Chart Component](images/getting-started/blazor-chart.png) ## See also diff --git a/blazor/chart/getting-started-with-web-app.md b/blazor/chart/getting-started-with-web-app.md index d7ccdabd58..933d1e82ef 100644 --- a/blazor/chart/getting-started-with-web-app.md +++ b/blazor/chart/getting-started-with-web-app.md @@ -7,7 +7,7 @@ component: Chart documentation: ug --- -# Getting Started with Blazor Chart Component in Web App +# Getting Started with Blazor Chart Component in Blazor Web App This section briefly explains about how to include [Syncfusion® Blazor 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/). @@ -168,6 +168,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} + @@ -177,43 +178,23 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chart component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.png)" %} ## Populate Blazor chart with data 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" %} - -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 %} - -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. +Map the data fields `Month` and `SalesValue` 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. {% tabs %} {% highlight razor tabtitle="Home.razor" %} + + + diff --git a/blazor/chart/getting-started.md b/blazor/chart/getting-started.md index 6a458d0fa9..6523392cf7 100644 --- a/blazor/chart/getting-started.md +++ b/blazor/chart/getting-started.md @@ -162,6 +162,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} + @@ -171,43 +172,23 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chart component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.png)" %} ## Populate Blazor chart with data 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" %} - -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 %} - -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. +Map the data fields `Month` and `SalesValue` 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. {% tabs %} {% highlight razor tabtitle="Home.razor" %} + + + @@ -235,7 +216,7 @@ Now, map the data fields `Month` and `Sales` to the series [XName](https://help {% endhighlight %} {% endtabs %} -{% 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)" %} +{% 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.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Chart). diff --git a/blazor/maps/getting-started-webapp.md b/blazor/maps/getting-started-webapp.md index ee22d73c2c..63ce3ea190 100644 --- a/blazor/maps/getting-started-webapp.md +++ b/blazor/maps/getting-started-webapp.md @@ -3,7 +3,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 in Blazor Web App. platform: Blazor -control: Maps +component: Maps documentation: ug --- @@ -146,7 +146,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 your Blazor application. -## Add Syncfusion® Blazor Maps component +## Add Syncfusion® Blazor Maps component with GeoJSON data Add the Syncfusion® Blazor Maps component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). @@ -161,28 +161,16 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - -{% endhighlight %} -{% endtabs %} - -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 - -Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. For example, you can render the World map and make desired customizations on it. You can also add any number of layers in the Maps. - -You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component. +Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component. {% tabs %} {% highlight razor tabtitle="Home.razor" %} + + + @@ -191,9 +179,9 @@ You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Maps component in the default web browser. +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Maps component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVRNhjJJCBhIpFe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with GeoJSON Layer](./images/blazor-map.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVRNhjJJCBhIpFe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with GeoJSON Layer](./images/blazor-map.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Maps). @@ -239,6 +227,59 @@ N> The United Nations Security Council data is referred from [source](https://en 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. +The following complete example shows a Maps component with the GeoJSON layer and data source binding: + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + +@using Syncfusion.Blazor.Maps +@rendermode InteractiveAuto + + + + + + + + +@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 %} + +This example demonstrates the complete setup with: +- The **ShapeData** pointing to the GeoJSON world map +- The **ShapePropertyPath** set to `"name"` to match shape names +- The **DataSource** bound to `SecurityCouncilDetails` +- The **ShapeDataPath** set to `"Name"` to match data source field + 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). diff --git a/blazor/maps/getting-started-with-maui-app.md b/blazor/maps/getting-started-with-maui-app.md index ca2b8cc061..167c2b6299 100644 --- a/blazor/maps/getting-started-with-maui-app.md +++ b/blazor/maps/getting-started-with-maui-app.md @@ -3,7 +3,7 @@ layout: post title: Getting Started with Maps in Blazor MAUI App | Syncfusion description: Checkout and learn about the documentation for getting started with Blazor Maps Component in Blazor MAUI App. platform: Blazor -control: Maps +component: Maps documentation: ug --- @@ -116,36 +116,20 @@ 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 your Blazor application. -## Add Syncfusion® Blazor Maps component +## Add Syncfusion® Blazor Maps component with GeoJSON data -Add the Syncfusion® Blazor Maps component in the **~/Pages/Home.razor** file. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.Maps - - - - -{% endhighlight %} -{% endtabs %} - -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 - -Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. For example, you can render the World map and make desired customizations on it. You can also add any number of layers in the Maps. - -You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component. +Add the Syncfusion® Blazor Maps component in the **~/Pages/Home.razor** file. Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Maps + + + @@ -160,7 +144,7 @@ N> The "world-map.json" file contains the World map GeoJSON data. Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows. -![Blazor Maps with GeoJSON Layer](./images/blazor-maps-maui-app.webp) +![Blazor Maps with GeoJSON Layer](./images/blazor-maps-maui-app.png) ### How to run the sample on Android @@ -170,7 +154,7 @@ Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/devi N> If 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). -![Blazor Maps with GeoJSON Layer](./images/blazor-map.webp) +![Blazor Maps with GeoJSON Layer](./images/blazor-map.png) ## Bind data source @@ -212,6 +196,58 @@ N> The United Nations Security Council data is referred from [source](https://en 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. +The following complete example shows a Maps component with the GeoJSON layer and data source binding: + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + +@using Syncfusion.Blazor.Maps + + + + + + + + +@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 %} + +This example demonstrates the complete setup with: +- The **ShapeData** pointing to the GeoJSON world map +- The **ShapePropertyPath** set to `"name"` to match shape names +- The **DataSource** bound to `SecurityCouncilDetails` +- The **ShapeDataPath** set to `"Name"` to match data source field + 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). diff --git a/blazor/maps/getting-started-with-server-app.md b/blazor/maps/getting-started-with-server-app.md index fbaee7e364..c6af0849b0 100644 --- a/blazor/maps/getting-started-with-server-app.md +++ b/blazor/maps/getting-started-with-server-app.md @@ -3,7 +3,7 @@ layout: post title: Getting Started with Blazor Maps in Blazor Server App | Syncfusion description: Checkout and learn about getting started with the Blazor Maps component in Blazor Server Application. platform: Blazor -control: Maps +component: Maps documentation: ug --- @@ -140,7 +140,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 the Blazor application. -## Add Syncfusion® Blazor Maps component +## Add Syncfusion® Blazor Maps component with GeoJSON data Add the Syncfusion® Blazor Maps 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. @@ -155,28 +155,16 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - -{% endhighlight %} -{% endtabs %} - -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 - -Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. For example, you can render the World map and make desired customizations on it. You can also add any number of layers in the Maps. - -You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component. +Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component. {% tabs %} {% highlight razor tabtitle="Home.razor" %} + + + @@ -187,9 +175,9 @@ 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. -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Maps component in the default web browser. +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Maps component in the default web browser. -{% 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)" %} +{% 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.png)" %} ## Bind data source @@ -231,6 +219,59 @@ N> The United Nations Security Council data is referred from [source](https://en 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. +The following complete example shows a Maps component with the GeoJSON layer and data source binding: + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + +@using Syncfusion.Blazor.Maps +@rendermode InteractiveServer + + + + + + + + +@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 %} + +This example demonstrates the complete setup with: +- The **ShapeData** pointing to the GeoJSON world map +- The **ShapePropertyPath** set to `"name"` to match shape names +- The **DataSource** bound to `SecurityCouncilDetails` +- The **ShapeDataPath** set to `"Name"` to match data source field + 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). diff --git a/blazor/maps/getting-started.md b/blazor/maps/getting-started.md index 4e6f8515ce..21d0a94ea3 100644 --- a/blazor/maps/getting-started.md +++ b/blazor/maps/getting-started.md @@ -3,13 +3,13 @@ layout: post title: Getting Started with Blazor Maps Component | Syncfusion description: Checkout and learn about getting started with Blazor Maps component in Blazor WebAssembly Application. platform: Blazor -control: Maps +component: Maps documentation: ug --- # Getting Started with Blazor Maps Component -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/). +This section briefly explains about how to include [Syncfusion® Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) 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 %} @@ -23,22 +23,6 @@ This section briefly explains how to include [Blazor Maps](https://www.syncfusio Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. -![Blazor WASM Create Project Template](images/blazor-wasm-app-template.webp) - -## Install Syncfusion® Blazor Maps NuGet in the App - -To add the **Blazor Maps** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps). Alternatively, run the following commands in the Package Manager Console to achieve the same. - -{% tabs %} -{% highlight C# tabtitle="Package Manager" %} - -Install-Package Syncfusion.Blazor.Maps -Version {{ site.releaseversion }} - -{% endhighlight %} -{% endtabs %} - -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. - {% endtabcontent %} {% tabcontent Visual Studio Code %} @@ -51,7 +35,7 @@ N> Syncfusion® Blazor components are availa Create a **Blazor WebAssembly 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 WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, create a WebAssembly application by using the following command in the integrated terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following command in the integrated terminal (Ctrl+`). {% tabs %} @@ -64,25 +48,6 @@ cd BlazorApp {% endtabs %} -## Install Syncfusion® Blazor Maps NuGet in the App - -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure in the project root directory where the `.csproj` file is located. -* Run the following command to install the [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps) NuGet packages and ensure all dependencies are installed. - -{% tabs %} - -{% highlight c# tabtitle="Package Manager" %} - -dotnet add package Syncfusion.Blazor.Maps -v {{ site.releaseversion }} -dotnet restore - -{% endhighlight %} - -{% endtabs %} - -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. - {% endtabcontent %} {% tabcontent .NET CLI %} @@ -101,7 +66,7 @@ dotnet --version ## Create a Blazor WebAssembly App using .NET CLI -Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -112,31 +77,32 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -## Install Syncfusion® Blazor Maps NuGet in the App +{% endtabcontent %} + +{% endtabcontents %} + +## Install Syncfusion® Blazor package + +Install [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. -Here's an example of how to add **Blazor Maps** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install the [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +Alternatively, run the following command in the Package Manager Console to achieve the same. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight C# tabtitle="Package Manager" %} -dotnet add package Syncfusion.Blazor.Maps -Version {{ site.releaseversion }} -dotnet restore +Install-Package Syncfusion.Blazor.Maps -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. - -{% endtabcontent %} - -{% endtabcontents %} +N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -## Add Import Namespaces +## Add import namespaces -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Maps` namespaces. +After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Maps` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Maps @@ -144,25 +110,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor Service +## Register Syncfusion® Blazor service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. +Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor WebAssembly App. {% tabs %} -{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} +{% highlight C# tabtitle="Program.cs" %} -using Microsoft.AspNetCore.Components.Web; -using Microsoft.AspNetCore.Components.WebAssembly.Hosting; +.... using Syncfusion.Blazor; - -var builder = WebAssemblyHostBuilder.CreateDefault(args); -builder.RootComponents.Add("#app"); -builder.RootComponents.Add("head::after"); - -builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); - +.... builder.Services.AddSyncfusionBlazor(); -await builder.Build().RunAsync(); .... {% endhighlight %} @@ -170,47 +128,92 @@ await builder.Build().RunAsync(); ## Add script resources -The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the `` section of the **~/index.html** 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 **~/index.html** file. ```html - - .... - - //Blazor Maps Component script reference. - - + + ``` -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 your 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 Blazor Maps component +## Add Syncfusion® Blazor Maps component with GeoJSON data -Add the Syncfusion® Blazor Maps component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor Maps component in the **~/Pages/Index.razor** file. Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} + + + + + + + {% endhighlight %} {% endtabs %} -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. +{% 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.png)" %} -## Adding GeoJSON data in Blazor Maps layer +N> The "world-map.json" file contains the World map GeoJSON data. -Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. For example, you can render the World map and make desired customizations on it. You can also add any number of layers in the Maps. +## Bind data source -You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component. +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 %} +{% highlight razor tabtitle="Index.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="Index.razor" %} - + @*To map shape data name field and data source field*@ + @@ -218,16 +221,24 @@ You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla {% endhighlight %} {% endtabs %} -{% 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)" %} +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. -N> The "world-map.json" file contains the World map GeoJSON data. +The following complete example shows a Maps component with the GeoJSON layer and data source binding: -## Bind data source +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} -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). +@using Syncfusion.Blazor.Maps -{% tabs %} -{% highlight razor %} + + + + + + @code { public List SecurityCouncilDetails = new List{ @@ -258,11 +269,176 @@ The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Ma {% 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). +This example demonstrates the complete setup with: +- The **ShapeData** pointing to the GeoJSON world map +- The **ShapePropertyPath** set to `"name"` to match shape names +- The **DataSource** bound to `SecurityCouncilDetails` +- The **ShapeDataPath** set to `"Name"` to match data source field -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. +## Apply color mapping -N> Please [refer to the section](populate-data#data-binding) for more information on data binding. +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="Index.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.png)" %} + +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="Index.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.png)" %} + +## 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="Index.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.png)" %} + +## 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="Index.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.png)" %} + +## 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="Index.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.png)" %} 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 3e6858ae15..667a4f1b0b 100644 --- a/blazor/stock-chart/getting-started-webapp.md +++ b/blazor/stock-chart/getting-started-webapp.md @@ -3,7 +3,7 @@ layout: post title: Getting started with Syncfusion Stock Chart in Blazor Web App description: Check out the documentation for getting started with Syncfusion Blazor Stock Chart Components in Blazor Web App. platform: Blazor -control: Stock Chart +component: Stock Chart documentation: ug --- @@ -181,6 +181,12 @@ To bind data for the Stock Chart component, assign a `IEnumerable` object to the {% tabs %} {% highlight razor tabtitle="Home.razor" %} + + + + + + @code{ public class StockChartData { @@ -209,29 +215,14 @@ 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 the datasource without any mapping. - -{% 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 Stock Chart component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBTZWAXpJFtLYFv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stock Chart Component](images/blazor-stock-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBTZWAXpJFtLYFv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stock Chart Component](images/blazor-stock-chart.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/StockChart). ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file +* [Getting Started with Syncfusion® Blazor in Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor in Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/stock-chart/getting-started.md b/blazor/stock-chart/getting-started.md index 88935a5dc5..c278df9d62 100644 --- a/blazor/stock-chart/getting-started.md +++ b/blazor/stock-chart/getting-started.md @@ -3,7 +3,7 @@ layout: post title: Getting Started with Blazor Stock Chart Component | Syncfusion description: Checkout and learn about getting started with Blazor Stock Chart component in Blazor WebAssembly Application. platform: Blazor -control: Stock Chart +component: Stock Chart documentation: ug --- @@ -164,6 +164,14 @@ To bind data for the Stock Chart component, assign a `IEnumerable` object to the {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Charts + + + + + + + @code{ public class StockChartData { @@ -192,30 +200,13 @@ 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 the datasource without any mapping. - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.Charts - - - - - - - -{% endhighlight %} -{% endtabs %} - Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Stock Chart component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBTZWAXpJFtLYFv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stock Chart Component](images/blazor-stock-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBTZWAXpJFtLYFv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stock Chart Component](images/blazor-stock-chart.png)" %} N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/StockChart). ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting Started with Syncfusion® Blazor in Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor in Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file From a6acf46529186e1466243ad530d183741f08f760 Mon Sep 17 00:00:00 2001 From: mohammednowfel4989 Date: Mon, 18 May 2026 13:01:22 +0530 Subject: [PATCH 3/4] 1005021: Done description correction. --- blazor/accumulation-chart/getting-started-with-server-app.md | 2 +- blazor/accumulation-chart/getting-started-with-web-app.md | 2 +- blazor/accumulation-chart/getting-started.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/blazor/accumulation-chart/getting-started-with-server-app.md b/blazor/accumulation-chart/getting-started-with-server-app.md index 413cb8cf1a..fd706797a1 100644 --- a/blazor/accumulation-chart/getting-started-with-server-app.md +++ b/blazor/accumulation-chart/getting-started-with-server-app.md @@ -161,7 +161,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati - + diff --git a/blazor/accumulation-chart/getting-started-with-web-app.md b/blazor/accumulation-chart/getting-started-with-web-app.md index a0bd399088..6b9d1f50d3 100644 --- a/blazor/accumulation-chart/getting-started-with-web-app.md +++ b/blazor/accumulation-chart/getting-started-with-web-app.md @@ -169,7 +169,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem - + diff --git a/blazor/accumulation-chart/getting-started.md b/blazor/accumulation-chart/getting-started.md index 69defe376c..12738ddc5f 100644 --- a/blazor/accumulation-chart/getting-started.md +++ b/blazor/accumulation-chart/getting-started.md @@ -152,7 +152,7 @@ Add the Syncfusion® Blazor Accumulation Cha - + From 1b52666cc2c489d6787e57358e256f11159c1edc Mon Sep 17 00:00:00 2001 From: mohammednowfel4989 Date: Mon, 18 May 2026 13:24:11 +0530 Subject: [PATCH 4/4] 1005021: Resolved the image reference issue. --- blazor/chart/getting-started-with-maui-app.md | 4 ++-- blazor/maps/getting-started-with-maui-app.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/blazor/chart/getting-started-with-maui-app.md b/blazor/chart/getting-started-with-maui-app.md index 57d81eac6a..6bfef2bbd8 100644 --- a/blazor/chart/getting-started-with-maui-app.md +++ b/blazor/chart/getting-started-with-maui-app.md @@ -137,7 +137,7 @@ Add the Syncfusion® Blazor Chart component Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows. -![Blazor Chart Component](images/blazor-chart-maui-app.png) +![Blazor Chart Component](images/blazor-chart-maui-app.webp) ### How to run the sample on android @@ -147,7 +147,7 @@ Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/devi 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). -![Blazor Chart Component](images/getting-started/blazor-chart.png) +![Blazor Chart Component](images/getting-started/blazor-chart.webp) ## See also diff --git a/blazor/maps/getting-started-with-maui-app.md b/blazor/maps/getting-started-with-maui-app.md index 167c2b6299..51331c7694 100644 --- a/blazor/maps/getting-started-with-maui-app.md +++ b/blazor/maps/getting-started-with-maui-app.md @@ -144,7 +144,7 @@ N> The "world-map.json" file contains the World map GeoJSON data. Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows. -![Blazor Maps with GeoJSON Layer](./images/blazor-maps-maui-app.png) +![Blazor Maps with GeoJSON Layer](./images/blazor-maps-maui-app.webp) ### How to run the sample on Android @@ -154,7 +154,7 @@ Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/devi N> If 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). -![Blazor Maps with GeoJSON Layer](./images/blazor-map.png) +![Blazor Maps with GeoJSON Layer](./images/blazor-map.webp) ## Bind data source