diff --git a/blazor/accumulation-chart/getting-started-with-server-app.md b/blazor/accumulation-chart/getting-started-with-server-app.md index c23199626d..27b6c95613 100644 --- a/blazor/accumulation-chart/getting-started-with-server-app.md +++ b/blazor/accumulation-chart/getting-started-with-server-app.md @@ -11,15 +11,25 @@ documentation: ug 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/). +## Using Playground + +[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows interaction with Syncfusion Blazor components directly in a web browser without needing to install any NuGet packages. By default, the `Syncfusion.Blazor` package is included. + +{% playground "https://blazorplayground.syncfusion.com/" %} + +## Manually creating a project + +This section provides a brief guide on how to manually create a Blazor Server App. + {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio +### Create a new Blazor Server App in Visual Studio Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. @@ -27,11 +37,11 @@ Create a **Blazor Server App** by using the **Blazor Web App** template in Visua {% tabcontent Visual Studio Code %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio Code +### Create a new Blazor Server App in Visual Studio Code 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. @@ -52,7 +62,7 @@ cd BlazorApp {% tabcontent .NET CLI %} -## Prerequisites +### Prerequisites Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). @@ -64,7 +74,7 @@ dotnet --version {% endhighlight %} {% endtabs %} -## Create a Blazor Server App using .NET CLI +### Create a Blazor Server App using .NET CLI Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=.net-cli) documentation. @@ -83,7 +93,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 the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Charts --version {{ site.releaseversion }}), or the .NET CLI. @@ -99,7 +109,7 @@ Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -## Add import namespaces +### Add import namespaces After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. @@ -114,7 +124,7 @@ N> The `~/` notation represents the root directory of your project. This file is {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +### Register Syncfusion® Blazor service Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor Server App. This step enables the Syncfusion components to work in your application. @@ -130,7 +140,7 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add script resources +### Add script resources The Syncfusion JavaScript library needs to be included in your application. 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 (this is the root layout file of your application). @@ -142,7 +152,7 @@ The Syncfusion JavaScript library needs to be included in your application. The 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 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 the top of the `~Pages/Home.razor` file. @@ -201,6 +211,5 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also - 1. [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) 2. [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/accumulation-chart/getting-started-with-web-app.md b/blazor/accumulation-chart/getting-started-with-web-app.md index 577bb98d41..396f687934 100644 --- a/blazor/accumulation-chart/getting-started-with-web-app.md +++ b/blazor/accumulation-chart/getting-started-with-web-app.md @@ -11,15 +11,29 @@ documentation: ug 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/). +## Using Playground + +[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows you to interact with our Blazor components directly in your web browser without needing to install any NuGet packages. + +{% playground "https://blazorplayground.syncfusion.com/" %} + +## Using Blazor Templates + +Create a Blazor Web App using Blazor Templates in both [Visual Studio](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) and [Visual Studio Code](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). + +## Manually creating a project + +This section provides a brief guide on how to manually create a Blazor Web App. + {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio +### Create a new Blazor Web App in Visual Studio Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. @@ -27,11 +41,11 @@ Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https: {% tabcontent Visual Studio Code %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio Code +### Create a new Blazor Web App in Visual Studio Code Create a **Blazor Web 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 Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. @@ -57,7 +71,7 @@ cd .. {% tabcontent .NET CLI %} -## Prerequisites +### Prerequisites Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). @@ -69,7 +83,7 @@ dotnet --version {% endhighlight %} {% endtabs %} -## Create a Blazor Web App using .NET CLI +### Create a Blazor Web App using .NET CLI Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. @@ -99,7 +113,7 @@ cd .. 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 the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Charts --version {{ site.releaseversion }}), or the .NET CLI. @@ -117,7 +131,7 @@ If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -## Add import namespaces +### Add import namespaces After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. @@ -132,7 +146,7 @@ N> The `~/` notation represents the root directory of your project. This file is {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +### Register Syncfusion® Blazor service Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor Web App. This step enables the Syncfusion components to work in your application. @@ -150,7 +164,7 @@ 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 script resources +### Add script resources The Syncfusion JavaScript library needs to be included in your application. 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 (this is the root layout file of your application). @@ -162,7 +176,7 @@ The Syncfusion JavaScript library needs to be included in your application. The 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 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` in the Web App, define a render mode at the top of the `~Pages/Home.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). diff --git a/blazor/accumulation-chart/getting-started.md b/blazor/accumulation-chart/getting-started.md index 81fddde4b0..af4d85dfa2 100644 --- a/blazor/accumulation-chart/getting-started.md +++ b/blazor/accumulation-chart/getting-started.md @@ -13,15 +13,29 @@ documentation: ug 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/). +## Using Playground + +[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows interaction with Syncfusion Blazor components directly in a web browser without needing to install any NuGet packages. By default, the `Syncfusion.Blazor` package is included. + +{% playground "https://blazorplayground.syncfusion.com/" %} + +## Using Syncfusion® Blazor Templates + +You can create a Blazor WebAssembly Standalone App using Syncfusion® Blazor Templates in both [Visual Studio](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) and [Visual Studio Code](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). + +## Manually creating a project + +This section provides a brief guide on how to manually create a Blazor WebAssembly App. + {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio +### Create a new Blazor WebAssembly App (Standalone) in Visual Studio Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. @@ -29,11 +43,11 @@ Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates {% tabcontent Visual Studio Code %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio Code +### Create a new Blazor WebAssembly App in Visual Studio Code Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. @@ -54,7 +68,7 @@ cd BlazorApp {% tabcontent .NET CLI %} -## Prerequisites +### Prerequisites Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). @@ -66,7 +80,7 @@ dotnet --version {% endhighlight %} {% endtabs %} -## Create a Blazor WebAssembly App using .NET CLI +### Create a Blazor WebAssembly App using .NET CLI Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. @@ -83,7 +97,7 @@ cd BlazorApp {% endtabcontents %} -## Install Syncfusion® Blazor packages +### Install Syncfusion® Blazor packages Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package into 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 Syncfusion.Blazor.Charts --version {{ site.releaseversion }}), or the .NET CLI. @@ -99,7 +113,7 @@ Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -## Add import namespaces +### Add import namespaces After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. @@ -114,7 +128,7 @@ N> The `~/` notation represents the root directory of your project. This file is {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +### Register Syncfusion® Blazor service Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor WebAssembly App. This step enables the Syncfusion components to work in your application. @@ -130,7 +144,7 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add script resources +### Add script resources The Syncfusion JavaScript library needs to be included in your application. 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 (this is the root layout file of your application). @@ -142,7 +156,7 @@ The Syncfusion JavaScript library needs to be included in your application. The 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 Syncfusion® Blazor Accumulation Chart component Add the Syncfusion® Blazor Accumulation Chart component in the **~/Pages/Home.razor** file. diff --git a/blazor/chart/getting-started-wasm.md b/blazor/chart/getting-started-wasm.md index 010fedd5c7..2b10a99e6f 100644 --- a/blazor/chart/getting-started-wasm.md +++ b/blazor/chart/getting-started-wasm.md @@ -15,15 +15,29 @@ This section briefly explains how to include [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) +## Using Playground + +[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows interaction with Syncfusion Blazor components directly in a web browser without needing to install any NuGet packages. By default, the `Syncfusion.Blazor` package is included. + +{% playground "https://blazorplayground.syncfusion.com/" %} + +## Using Syncfusion® Blazor Templates + +You can create a Blazor WebAssembly Standalone App using Syncfusion® Blazor Templates in both [Visual Studio](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) and [Visual Studio Code](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). + +## Manually creating a project + +This section provides a brief guide on how to manually create a Blazor WebAssembly App. + {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio +### Create a new Blazor WebAssembly App (Standalone) in Visual Studio Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. @@ -31,11 +45,11 @@ Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates {% tabcontent Visual Studio Code %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio Code +### Create a Blazor WebAssembly App in Visual Studio Code Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. @@ -56,7 +70,7 @@ cd BlazorApp {% tabcontent .NET CLI %} -## Prerequisites +### Prerequisites Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). @@ -68,7 +82,7 @@ dotnet --version {% endhighlight %} {% endtabs %} -## Create a Blazor WebAssembly App using .NET CLI +### Create a Blazor WebAssembly App using .NET CLI Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. @@ -85,7 +99,7 @@ cd BlazorApp {% endtabcontents %} -## Install Syncfusion® Blazor packages +### Install Syncfusion® Blazor packages Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Charts --version {{ site.releaseversion }}), or the .NET CLI. @@ -101,7 +115,7 @@ Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -## Add import namespaces +### Add import namespaces After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. @@ -116,7 +130,7 @@ N> The `~/` notation represents the root directory of your project. This file is {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +### Register Syncfusion® Blazor service Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor WebAssembly App. This step enables the Syncfusion components to work in your application. @@ -132,7 +146,7 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add script resources +### Add script resources The Syncfusion JavaScript library needs to be included in your application. 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 (this is the main HTML entry point of your WebAssembly application). @@ -144,7 +158,7 @@ The Syncfusion JavaScript library needs to be included in your application. The 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 Syncfusion® Blazor Chart component Add the Syncfusion® Blazor Chart component in the **~/Pages/Home.razor** file. @@ -163,7 +177,7 @@ Add the Syncfusion® Blazor Chart component {% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.webp)" %} -## Populate Blazor chart with data +### Populate Blazor chart with data To bind data for the chart component, you can assign an IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). diff --git a/blazor/chart/getting-started-with-web-app.md b/blazor/chart/getting-started-with-web-app.md index 54e5498b74..eb9c9bfae3 100644 --- a/blazor/chart/getting-started-with-web-app.md +++ b/blazor/chart/getting-started-with-web-app.md @@ -13,15 +13,29 @@ This section briefly explains how to include [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) +## Using Playground + +[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows you to interact with our Blazor components directly in your web browser without needing to install any NuGet packages. + +{% playground "https://blazorplayground.syncfusion.com/" %} + +## Using Blazor Templates + +Create a Blazor Web App using Blazor Templates in both [Visual Studio](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) and [Visual Studio Code](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). + +## Manually creating a project + +This section provides a brief guide on how to manually create a Blazor Web App. + {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio +### Create a new Blazor Web App in Visual Studio Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. @@ -29,11 +43,11 @@ Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https: {% tabcontent Visual Studio Code %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio Code +### Create a new Blazor Web App in Visual Studio Code Create a **Blazor Web 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 Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. @@ -59,7 +73,7 @@ cd .. {% tabcontent .NET CLI %} -## Prerequisites +### Prerequisites Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). @@ -71,7 +85,7 @@ dotnet --version {% endhighlight %} {% endtabs %} -## Create a Blazor Web App using .NET CLI +### Create a Blazor Web App using .NET CLI Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. @@ -102,7 +116,7 @@ cd .. 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 the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Charts --version {{ site.releaseversion }}), or the .NET CLI. @@ -120,7 +134,7 @@ If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -## Add import namespaces +### Add import namespaces After the package is installed, open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. @@ -135,7 +149,7 @@ N> The `~/` notation represents the root directory of your project. This file is {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +### Register Syncfusion® Blazor service Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor Web App. This step enables the Syncfusion components to work in your application. @@ -153,7 +167,7 @@ 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 script resources +### Add script resources The Syncfusion JavaScript library needs to be included in your application. 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 (this is the root layout file of your application). @@ -195,7 +209,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.webp)" %} -## Populate Blazor chart with data +### Populate Blazor chart with data To bind data for the chart component, you can assign an IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). diff --git a/blazor/chart/getting-started.md b/blazor/chart/getting-started.md index 97dc1dac32..58e56a547a 100644 --- a/blazor/chart/getting-started.md +++ b/blazor/chart/getting-started.md @@ -15,15 +15,25 @@ This section briefly explains how to include [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) +## Using Playground + +[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows interaction with Syncfusion Blazor components directly in a web browser without needing to install any NuGet packages. By default, the `Syncfusion.Blazor` package is included. + +{% playground "https://blazorplayground.syncfusion.com/" %} + +## Manually creating a project + +This section provides a brief guide on how to manually create a Blazor Server App. + {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio +### Create a new Blazor Server App in Visual Studio Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. @@ -31,11 +41,11 @@ Create a **Blazor Server App** by using the **Blazor Web App** template in Visua {% tabcontent Visual Studio Code %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio Code +### Create a new Blazor Server App in Visual Studio Code 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. @@ -56,7 +66,7 @@ cd BlazorApp {% tabcontent .NET CLI %} -## Prerequisites +### Prerequisites Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). @@ -68,7 +78,7 @@ dotnet --version {% endhighlight %} {% endtabs %} -## Create a Blazor Server App using .NET CLI +### Create a Blazor Server App using .NET CLI Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=.net-cli) documentation. @@ -87,7 +97,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 the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Charts --version {{ site.releaseversion }}), or the .NET CLI. @@ -103,7 +113,7 @@ Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -## Add import namespaces +### Add import namespaces After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. @@ -118,7 +128,7 @@ N> The `~/` notation represents the root directory of your project. This file is {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +### Register Syncfusion® Blazor service Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor Server App. This step enables the Syncfusion components to work in your application. @@ -134,7 +144,7 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add script resources +### Add script resources The Syncfusion JavaScript library needs to be included in your application. 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 (this is the root layout file of your application). @@ -146,7 +156,7 @@ The Syncfusion JavaScript library needs to be included in your application. The N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. -## Add Blazor 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 as shown below. @@ -176,7 +186,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.webp)" %} -## Populate Blazor chart with data +### Populate Blazor chart with data To bind data for the chart component, you can assign an IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). diff --git a/blazor/maps/getting-started-webapp.md b/blazor/maps/getting-started-webapp.md index 15fa7e23ba..b327c460cd 100644 --- a/blazor/maps/getting-started-webapp.md +++ b/blazor/maps/getting-started-webapp.md @@ -11,15 +11,29 @@ documentation: ug 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/). +## Using Playground + +[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows you to interact with our Blazor components directly in your web browser without needing to install any NuGet packages. + +{% playground "https://blazorplayground.syncfusion.com/" %} + +## Using Blazor Templates + +Create a Blazor Web App using Blazor Templates in both [Visual Studio](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) and [Visual Studio Code](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). + +## Manually creating a project + +This section provides a brief guide on how to manually create a Blazor Web App. + {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio +### Create a new Blazor Web App in Visual Studio Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. @@ -27,11 +41,11 @@ Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https: {% tabcontent Visual Studio Code %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio Code +### Create a new Blazor Web App in Visual Studio Code Create a **Blazor Web 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 Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. @@ -57,7 +71,7 @@ cd .. {% tabcontent .NET CLI %} -## Prerequisites +### Prerequisites Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). @@ -69,7 +83,7 @@ dotnet --version {% endhighlight %} {% endtabs %} -## Create a Blazor Web App using .NET CLI +### Create a Blazor Web App using .NET CLI Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. @@ -97,7 +111,7 @@ cd .. 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 the [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Maps --version {{ site.releaseversion }}), or the .NET CLI. @@ -115,7 +129,7 @@ If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -## Add import namespaces +### Add import namespaces After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Maps` namespaces. @@ -130,7 +144,7 @@ N> The `~/` notation represents the root directory of your project. This file is {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +### Register Syncfusion® Blazor service Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor Web App. This step enables the Syncfusion components to work in your application. @@ -148,7 +162,7 @@ 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 script resources +### Add script resources The Syncfusion JavaScript library needs to be included in your application. 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 (this is the root layout file of your application). @@ -160,7 +174,7 @@ The Syncfusion JavaScript library needs to be included in your application. The 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 with GeoJSON data +### 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. @@ -201,7 +215,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- N> The "world-map.json" file contains the World map GeoJSON data. -## Bind data source +### Bind data source The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. We can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the below list **SecurityCouncilDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). diff --git a/blazor/maps/getting-started-with-server-app.md b/blazor/maps/getting-started-with-server-app.md index 999622db6e..05d7f5469e 100644 --- a/blazor/maps/getting-started-with-server-app.md +++ b/blazor/maps/getting-started-with-server-app.md @@ -11,15 +11,25 @@ documentation: ug 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/). +## Using Playground + +[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows interaction with Syncfusion Blazor components directly in a web browser without needing to install any NuGet packages. By default, the `Syncfusion.Blazor` package is included. + +{% playground "https://blazorplayground.syncfusion.com/" %} + +## Manually creating a project + +This section provides a brief guide on how to manually create a Blazor Server App. + {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio +### Create a new Blazor Server App in Visual Studio Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. @@ -27,11 +37,11 @@ Create a **Blazor Server App** by using the **Blazor Web App** template in Visua {% tabcontent Visual Studio Code %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio Code +### Create a new Blazor Server App in Visual Studio Code 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. @@ -52,7 +62,7 @@ cd BlazorApp {% tabcontent .NET CLI %} -## Prerequisites +### Prerequisites Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). @@ -64,7 +74,7 @@ dotnet --version {% endhighlight %} {% endtabs %} -## Create a Blazor Server App using .NET CLI +### Create a Blazor Server App using .NET CLI Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=.net-cli) documentation. @@ -83,7 +93,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 the [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Maps --version {{ site.releaseversion }}), or the .NET CLI. @@ -99,7 +109,7 @@ Install-Package Syncfusion.Blazor.Maps -Version {{ site.releaseversion }} N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -## Add import namespaces +### Add import namespaces After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Maps` namespaces. @@ -114,7 +124,7 @@ N> The `~/` notation represents the root directory of your project. This file is {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +### Register Syncfusion® Blazor service Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor Server App. This step enables the Syncfusion components to work in your application. @@ -130,7 +140,7 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add script resources +### Add script resources The Syncfusion JavaScript library needs to be included in your application. 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 (this is the root layout file of your application). @@ -142,7 +152,7 @@ The Syncfusion JavaScript library needs to be included in your application. The 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 with GeoJSON data +### 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. @@ -181,7 +191,7 @@ Press Ctrl+F5 (Windows) or ⌘+F5 (m {% previewsample "https://blazorplayground.syncfusion.com/embed/hZBzNsUjWcevzcvR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with GeoJSON Layer](./images/blazor-map.webp)" %} -## Bind data source +### Bind data source The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. We can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the below list **SecurityCouncilDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). diff --git a/blazor/maps/getting-started.md b/blazor/maps/getting-started.md index 08907d2fd7..64b8ff410f 100644 --- a/blazor/maps/getting-started.md +++ b/blazor/maps/getting-started.md @@ -11,15 +11,29 @@ documentation: ug This section briefly explains how to include [Syncfusion® Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +## Using Playground + +[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows interaction with Syncfusion Blazor components directly in a web browser without needing to install any NuGet packages. By default, the `Syncfusion.Blazor` package is included. + +{% playground "https://blazorplayground.syncfusion.com/" %} + +## Using Syncfusion® Blazor Templates + +You can create a Blazor WebAssembly Standalone App using Syncfusion® Blazor Templates in both [Visual Studio](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) and [Visual Studio Code](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). + +## Manually creating a project + +This section provides a brief guide on how to manually create a Blazor WebAssembly App. + {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio +### Create a new Blazor WebAssembly App (Standalone) in Visual Studio Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. @@ -27,11 +41,11 @@ Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates {% tabcontent Visual Studio Code %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio Code +### Create a Blazor WebAssembly App in Visual Studio Code Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. @@ -52,7 +66,7 @@ cd BlazorApp {% tabcontent .NET CLI %} -## Prerequisites +### Prerequisites Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). @@ -64,7 +78,7 @@ dotnet --version {% endhighlight %} {% endtabs %} -## Create a Blazor WebAssembly App using .NET CLI +### Create a Blazor WebAssembly App using .NET CLI Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. @@ -81,7 +95,7 @@ cd BlazorApp {% endtabcontents %} -## Install Syncfusion® Blazor package +### Install Syncfusion® Blazor package Install the [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Maps --version {{ site.releaseversion }}), or the .NET CLI. @@ -97,7 +111,7 @@ Install-Package Syncfusion.Blazor.Maps -Version {{ site.releaseversion }} N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -## Add import namespaces +### Add import namespaces After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Maps` namespaces. @@ -112,7 +126,7 @@ N> The `~/` notation represents the root directory of your project. This file is {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +### Register Syncfusion® Blazor service Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor WebAssembly App. This step enables the Syncfusion components to work in your application. @@ -128,7 +142,7 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add script resources +### Add script resources The Syncfusion JavaScript library needs to be included in your application. 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 (this is the main HTML entry point of your WebAssembly application). @@ -140,7 +154,7 @@ The Syncfusion JavaScript library needs to be included in your application. The 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 with GeoJSON data +### Add Syncfusion® Blazor Maps component with GeoJSON data 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. @@ -164,7 +178,7 @@ Add the Syncfusion® Blazor Maps component i N> The "world-map.json" file contains the World map GeoJSON data. -## Bind data source +### Bind data source The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. We can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the below list **SecurityCouncilDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). diff --git a/blazor/stock-chart/getting-started-webapp.md b/blazor/stock-chart/getting-started-webapp.md index bcc1b0eba5..112d7e47e3 100644 --- a/blazor/stock-chart/getting-started-webapp.md +++ b/blazor/stock-chart/getting-started-webapp.md @@ -11,15 +11,29 @@ documentation: ug 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/). +## Using Playground + +[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows you to interact with our Blazor components directly in your web browser without needing to install any NuGet packages. + +{% playground "https://blazorplayground.syncfusion.com/" %} + +## Using Blazor Templates + +Create a Blazor Web App using Blazor Templates in both [Visual Studio](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) and [Visual Studio Code](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). + +## Manually creating a project + +This section provides a brief guide on how to manually create a Blazor Web App. + {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio +### Create a new Blazor Web App in Visual Studio Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. @@ -27,11 +41,11 @@ Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https: {% tabcontent Visual Studio Code %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio Code +### Create a new Blazor Web App in Visual Studio Code Create a **Blazor Web 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 Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. @@ -57,7 +71,7 @@ cd .. {% tabcontent .NET CLI %} -## Prerequisites +### Prerequisites Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). @@ -69,7 +83,7 @@ dotnet --version {% endhighlight %} {% endtabs %} -## Create a Blazor Web App using .NET CLI +### Create a Blazor Web App using .NET CLI Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. @@ -97,7 +111,7 @@ cd .. 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 the [Syncfusion.Blazor.StockChart](https://www.nuget.org/packages/Syncfusion.Blazor.StockChart) and the [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 Syncfusion.Blazor.StockChart --version {{ site.releaseversion }}), or the .NET CLI. @@ -116,7 +130,7 @@ If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -## Add import namespaces +### Add import namespaces After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. @@ -131,7 +145,7 @@ N> The `~/` notation represents the root directory of your project. This file is {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +### Register Syncfusion® Blazor service Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor Web App. This step enables the Syncfusion components to work in your application. @@ -149,7 +163,7 @@ 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 stylesheet and script resources The theme stylesheet and the Syncfusion JavaScript library need to be included in your application. The 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 (this is the root layout file of your application). @@ -163,7 +177,7 @@ The theme stylesheet and the Syncfusion JavaScript library need to be included i 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 your 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 your Blazor application. -## Add Syncfusion® Blazor Stock Chart component +### Add Syncfusion® Blazor Stock Chart component Add the Syncfusion Blazor Stock Chart 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/Home.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). @@ -188,7 +202,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -## Populate Blazor Stock Chart with Data +### Populate Blazor Stock Chart with Data To bind data for the Stock Chart component, assign a `IEnumerable` object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). diff --git a/blazor/stock-chart/getting-started.md b/blazor/stock-chart/getting-started.md index 0f9ba2c44b..958a28bfab 100644 --- a/blazor/stock-chart/getting-started.md +++ b/blazor/stock-chart/getting-started.md @@ -11,15 +11,29 @@ documentation: ug 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/). +## Using Playground + +[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows interaction with Syncfusion Blazor components directly in a web browser without needing to install any NuGet packages. By default, the `Syncfusion.Blazor` package is included. + +{% playground "https://blazorplayground.syncfusion.com/" %} + +## Using Syncfusion® Blazor Templates + +You can create a Blazor WebAssembly Standalone App using Syncfusion® Blazor Templates in both [Visual Studio](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) and [Visual Studio Code](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). + +## Manually creating a project + +This section provides a brief guide on how to manually create a Blazor WebAssembly App. + {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio +### Create a new Blazor WebAssembly App (Standalone) in Visual Studio Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. @@ -27,11 +41,11 @@ Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates {% tabcontent Visual Studio Code %} -## Prerequisites +### Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio Code +### Create a new Blazor WebAssembly App in Visual Studio Code Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. @@ -52,7 +66,7 @@ cd BlazorApp {% tabcontent .NET CLI %} -## Prerequisites +### Prerequisites Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). @@ -64,7 +78,7 @@ dotnet --version {% endhighlight %} {% endtabs %} -## Create a Blazor WebAssembly App using .NET CLI +### Create a Blazor WebAssembly App using .NET CLI Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. @@ -81,7 +95,7 @@ cd BlazorApp {% endtabcontents %} -## Install Syncfusion® Blazor packages +### Install Syncfusion® Blazor packages Install the [Syncfusion.Blazor.StockChart](https://www.nuget.org/packages/Syncfusion.Blazor.StockChart/) and the [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 Syncfusion.Blazor.StockChart --version {{ site.releaseversion }}), or the .NET CLI. @@ -98,7 +112,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -## Add import namespaces +### Add import namespaces After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. @@ -113,7 +127,7 @@ N> The `~/` notation represents the root directory of your project. This file is {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +### Register Syncfusion® Blazor service Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor WebAssembly App. This step enables the Syncfusion components to work in your application. @@ -129,7 +143,7 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +### Add stylesheet and script resources The theme stylesheet and the Syncfusion JavaScript library need to be included in your application. The 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 (this is the root HTML file of your application). @@ -143,7 +157,7 @@ The theme stylesheet and the Syncfusion JavaScript library need to be included i 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. -## Add Syncfusion® Blazor Stock Chart component +### Add Syncfusion® Blazor Stock Chart component Add the Syncfusion® Blazor Stock Chart component in the **~/Pages/Home.razor** file. @@ -159,7 +173,7 @@ Add the Syncfusion® Blazor Stock Chart comp {% endhighlight %} {% endtabs %} -## Populate Blazor Stock Chart with Data +### Populate Blazor Stock Chart with Data To bind data for the Stock Chart component, assign a `IEnumerable` object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html).