diff --git a/blazor/accumulation-chart/getting-started-with-server-app.md b/blazor/accumulation-chart/getting-started-with-server-app.md index 38e27c8d80..fd706797a1 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 %} @@ -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. @@ -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 %} @@ -161,10 +159,11 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@using Syncfusion.Blazor.Charts - + + + @@ -199,110 +198,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" %} - -@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.png)" %} - -## 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.png)" %} - -## 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.png)" %} - -## 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.png)" %} - ## 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 6490ad5cbd..6b9d1f50d3 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 %} @@ -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. @@ -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 %} @@ -169,10 +167,11 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@using Syncfusion.Blazor.Charts - + + + @@ -207,110 +206,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" %} - -@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.png)" %} - -## 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.png)" %} - -## 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.png)" %} - -## 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.png)" %} - ## See also diff --git a/blazor/accumulation-chart/getting-started.md b/blazor/accumulation-chart/getting-started.md index fccaf05ad3..12738ddc5f 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 @@ -151,8 +150,11 @@ Add the Syncfusion® Blazor Accumulation Cha @using Syncfusion.Blazor.Charts + + + @@ -185,108 +187,6 @@ 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.png)" %} -## 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.png)" %} - -## 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.png)" %} - -## 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.png)" %} - -## 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.png)" %} - N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AccumulationChart). ## See also diff --git a/blazor/chart/getting-started-wasm.md b/blazor/chart/getting-started-wasm.md index 5d283a1df2..fbc5dd77c1 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 @@ -149,6 +149,7 @@ Add the Syncfusion® Blazor Chart component {% tabs %} {% highlight razor tabtitle="Index.razor" %} + @@ -162,32 +163,9 @@ 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" %} - -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 + + + @@ -226,95 +207,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.png)" %} -## 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.png)" %} - -## 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.png)" %} - -## 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.png)" %} - -## 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.png)" %} - 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 319dd497b9..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/). @@ -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 @@ -125,6 +125,7 @@ Add the Syncfusion® Blazor Chart component {% tabs %} {% highlight razor tabtitle="Home.razor" %} + @@ -142,7 +143,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 c858880808..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/). @@ -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 @@ -168,6 +168,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} + @@ -181,121 +182,47 @@ 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" %} - -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. - -## 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.png)" %} - -## 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.png)" %} - -## 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**. +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" %} - - - - + + + + + -{% 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.png)" %} - -## 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.png)" %} +{% 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 a6f7a909c4..6523392cf7 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 @@ -144,7 +144,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 Chart component +## Add Blazor Chart component Add the Syncfusion® Blazor 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. @@ -162,6 +162,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} + @@ -175,41 +176,19 @@ 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" %} - -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" %} -@using Syncfusion.Blazor.Charts - + + + @@ -239,95 +218,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.png)" %} -## 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.png)" %} - -## 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.png)" %} - -## 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.png)" %} - -## 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.png)" %} - 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 97274d7cfb..63ce3ea190 100644 --- a/blazor/maps/getting-started-webapp.md +++ b/blazor/maps/getting-started-webapp.md @@ -1,15 +1,15 @@ --- 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 +component: Maps 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 @@ -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`). @@ -155,34 +155,22 @@ 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 %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - -{% 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. - -## 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,7 +179,7 @@ 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.png)" %} @@ -219,7 +207,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"} @@ -239,191 +227,60 @@ 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. -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.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). +The following complete example shows a Maps component with the GeoJSON layer and data source binding: {% 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.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="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.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="Home.razor" %} +@using Syncfusion.Blazor.Maps +@rendermode InteractiveAuto - - @* 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.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="Home.razor" %} +@code { + public List SecurityCouncilDetails = new List{ + new UNCouncilCountry { Name= "China", Membership= "Permanent"}, + new UNCouncilCountry { Name= "France", Membership= "Permanent" }, + new UNCouncilCountry { Name= "Russia", Membership= "Permanent"}, + new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent"}, + new UNCouncilCountry { Name= "United States", Membership= "Permanent"}, + new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent"}, + new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent"} + }; - - - - - - - - - - - - - @* To add tooltip for the shape *@ - - - - + public class UNCouncilCountry + { + public string Name { get; set; } + public string Membership { get; set; } + }; +} {% endhighlight %} {% endtabs %} -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. +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 -{% 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.png)" %} +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 ddd901f164..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 --- @@ -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 @@ -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 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. - -## 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 + + + @@ -212,99 +196,7 @@ 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. -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.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="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.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). +The following complete example shows a Maps component with the GeoJSON layer and data source binding: {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -312,103 +204,51 @@ Title can be added to the Maps to provide quick information to the users about t @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.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="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.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="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"} + }; - - - - - - - - - - - - - @* To add tooltip for the shape *@ - - - - + public class UNCouncilCountry + { + public string Name { get; set; } + public string Membership { get; set; } + }; +} {% endhighlight %} {% endtabs %} -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. +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 -![Blazor Maps with Tooltip](./images/blazor-map-tooltip.png) +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 561f5f5cae..c6af0849b0 100644 --- a/blazor/maps/getting-started-with-server-app.md +++ b/blazor/maps/getting-started-with-server-app.md @@ -3,13 +3,13 @@ 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 --- # 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,9 +138,9 @@ 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 +## 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. @@ -149,34 +149,22 @@ 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 %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - -{% 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. - -## 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,7 +175,7 @@ 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.png)" %} @@ -231,191 +219,60 @@ 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. -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.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="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.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). +The following complete example shows a Maps component with the GeoJSON layer and data source binding: {% 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.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="Home.razor" %} +@using Syncfusion.Blazor.Maps +@rendermode InteractiveServer - - @* 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="Home.razor" %} +@code { + public List SecurityCouncilDetails = new List{ + new UNCouncilCountry { Name= "China", Membership= "Permanent"}, + new UNCouncilCountry { Name= "France", Membership= "Permanent" }, + new UNCouncilCountry { Name= "Russia", Membership= "Permanent"}, + new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent"}, + new UNCouncilCountry { Name= "United States", Membership= "Permanent"}, + new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent"}, + new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent"}, + new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent"} + }; - - - - - - - - - - - - - @* To add tooltip for the shape *@ - - - - + public class UNCouncilCountry + { + public string Name { get; set; } + public string Membership { get; set; } + }; +} {% endhighlight %} {% endtabs %} -N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**. +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 -{% 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> 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 2e6348b3e0..21d0a94ea3 100644 --- a/blazor/maps/getting-started.md +++ b/blazor/maps/getting-started.md @@ -3,7 +3,7 @@ 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 --- @@ -138,32 +138,18 @@ 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 **~/Pages/Index.razor** file. - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - - - - -{% 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. - -## 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/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 tabtitle="Index.razor" %} + + + @@ -237,6 +223,58 @@ N> Please [refer to the section](populate-data#data-binding) for more informatio 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. +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 + ## 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"**. diff --git a/blazor/stock-chart/getting-started-webapp.md b/blazor/stock-chart/getting-started-webapp.md index 3b6ee960aa..667a4f1b0b 100644 --- a/blazor/stock-chart/getting-started-webapp.md +++ b/blazor/stock-chart/getting-started-webapp.md @@ -3,13 +3,13 @@ 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 --- # 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 %} @@ -167,8 +167,6 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@using Syncfusion.Blazor.Charts - @@ -183,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 { @@ -211,162 +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 datasource without any mapping. - -{% tabs %} -{% highlight razor tabtitle="Home.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.png)" %} 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" %} - -@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.png)" %} - -## 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" %} - -@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.png)" %} - -## 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" %} - -@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.png)" %} ## 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 43bfc7f8fe..c278df9d62 100644 --- a/blazor/stock-chart/getting-started.md +++ b/blazor/stock-chart/getting-started.md @@ -3,13 +3,13 @@ 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 --- # 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 @@ -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,162 +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 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.png)" %} 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.png)" %} - -## 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.png)" %} - -## 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.png)" %} - ## 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