diff --git a/blazor/chart/getting-started-wasm.md b/blazor/chart/getting-started-wasm.md index 4d9fc674a2..833b172b7e 100644 --- a/blazor/chart/getting-started-wasm.md +++ b/blazor/chart/getting-started-wasm.md @@ -1,105 +1,116 @@ --- layout: post -title: Getting Started with Blazor Chart Component | Syncfusion® -description: Checkout and learn about getting started with Blazor Charts in Blazor WebAssembly (WASM) App using Visual Studio and more. +title: Getting Started with Blazor Charts in Blazor WASM App | 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 +control: Charts documentation: ug --- -# Getting Started with Blazor Chart Component in Blazor WASM App +# Getting Started with Blazor Charts Component in Blazor WASM App This section briefly explains how to include [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 Blazor development?**
Discover the full potential of Blazor components with 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, CodeStudio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +## Create a new Blazor WebAssembly (Standalone) App + {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +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 [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor App in Visual Studio +{% tabcontent Visual Studio Code %} -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. +Run the following command to create a new Blazor WebAssembly App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazorwasm -o BlazorApp +cd BlazorApp -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, 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 [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor App in Visual Studio Code +{% endtabcontent %} -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. +{% tabcontent .NET CLI %} -Alternatively, create a WebAssembly application by using the following command in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor WebAssembly App. {% tabs %} - -{% highlight c# tabtitle="Blazor WASM App" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet new blazorwasm -o BlazorApp cd BlazorApp {% endhighlight %} - {% endtabs %} {% endtabcontent %} -{% tabcontent .NET CLI %} +{% endtabcontents %} + +## Install the required Blazor package + +Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package. 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. -## Prerequisites +{% tabcontents %} + +{% tabcontent Visual Studio %} -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). +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.Charts`) and install it. + +Alternatively, you can install the same package using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet --version +Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Create a Blazor WebAssembly App using .NET CLI +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} -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. +Open the terminal and run the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazorwasm -o BlazorApp -cd BlazorApp +dotnet add package Syncfusion.Blazor.Charts -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} - -## Install required 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. +{% tabcontent .NET CLI %} -Alternatively, run the following commands in the Package Manager Console to achieve the same. +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Charts -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -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. +{% endtabcontent %} + +{% endtabcontents %} ## Add import namespaces @@ -116,9 +127,9 @@ N> The `~/` notation represents the root directory of your project. This file is {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file of your Blazor WebAssembly App. This step enables the Blazor components to work in your application. +Open the **Program.cs** file in Blazor WebAssembly App and register the Blazor service. {% tabs %} {% highlight C# tabtitle="Program.cs" %} @@ -133,20 +144,20 @@ builder.Services.AddSyncfusionBlazor(); {% endtabs %} ## 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 references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **~wwwroot/index.html** file. -The 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). - -```html +{% tabs %} +{% highlight html tabtitle="index.html" %} -``` - -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. +{% endhighlight %} +{% endtabs %} -## Add Blazor Chart component +## Add Blazor Charts component -Add the Blazor Chart component in the **~/Pages/Home.razor** file. +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component inside the razor file. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -159,13 +170,51 @@ Add the Blazor Chart component in the **~/Pages/Home.razor** file. {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Chart component in the default web browser. +**Run the application** + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Charts component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} {% 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 Charts 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). +To bind data for the Blazor charts 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). 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. @@ -185,7 +234,8 @@ Map the data fields `Month` and `SalesValue` to the series [XName](https://help. -@code { +@code +{ public class SalesInfo { public string Month { get; set;} @@ -207,12 +257,12 @@ Map the data fields `Month` and `SalesValue` to the series [XName](https://help. {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBTNiLezckHqsGf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart](images/getting-started/blazor-chart-column.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrRZdMVgPGhfPSi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Charts](images/getting-started/blazor-chart-column.webp)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Chart) +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Chart). ## See also -* [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) -* [Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +1. [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +3. [Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/chart/getting-started-with-web-app.md b/blazor/chart/getting-started-with-web-app.md index 2e4c27e692..3c7ca218e6 100644 --- a/blazor/chart/getting-started-with-web-app.md +++ b/blazor/chart/getting-started-with-web-app.md @@ -1,128 +1,122 @@ --- layout: post -title: Getting Started with Blazor Chart Component in WebApp | Syncfusion® -description: Checkout and learn about the documentation for getting started with Blazor Chart Component in Blazor Web App. +title: Getting Started with Blazor Charts in Blazor Web App | Syncfusion +description: Checkout and learn about the documentation for getting started with Blazor Charts Component in Blazor Web App. platform: Blazor -component: Chart +component: Charts documentation: ug --- -# Getting Started with Blazor Chart Component in Blazor Web App +# Getting Started with Blazor Charts Component in Blazor Web App -This section briefly explains how to include [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/). +This section briefly explains how to include [Blazor Charts](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/). > **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with 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, CodeStudio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +## Create a new Blazor Web App + {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## 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. +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 [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). {% endtabcontent %} {% tabcontent Visual Studio Code %} -## 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 **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. - -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor Web App. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazor -o BlazorWebApp -int Auto +dotnet new blazor -o BlazorWebApp --interactivity Auto cd BlazorWebApp +cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> If the application is configured with WebAssembly or Auto render modes, you may optionally navigate to the client project directory to manage client-specific dependencies. Once the required changes are completed, ensure that you navigate back to the root project directory. - -``` -cd BlazorWebApp.Client -cd .. -``` +Alternatively, 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), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. {% endtabcontent %} {% tabcontent .NET CLI %} -## 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). +Run the following command to create a new Blazor Web App. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet --version +dotnet new blazor -o BlazorWebApp --interactivity Auto +cd BlazorWebApp +cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -## Create a Blazor Web App using .NET CLI +{% endtabcontent %} + +{% endtabcontents %} + +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 the required Blazor package + +Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package. 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. If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install this package in the `.Client` project. -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. +{% tabcontents %} + +{% tabcontent Visual Studio %} -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.Charts`) and install it. + +Alternatively, you can install the same package using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet new blazor -o BlazorApp -int Auto -cd BlazorApp +Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} +{% endtabcontent %} -This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. - -N> If the application is configured with WebAssembly or Auto render modes, you may optionally navigate to the client project directory to manage client-specific dependencies. Once the required changes are completed, ensure that you navigate back to the root project directory. +{% tabcontent Visual Studio Code %} -``` -cd BlazorWebApp.Client -cd .. -``` +Open the terminal and run the following commands. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% endtabcontents %} +dotnet add package Syncfusion.Blazor.Charts -v {{ site.releaseversion }} -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). +{% endhighlight %} +{% endtabs %} -## Install required Blazor packages +{% endtabcontent %} -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. +{% tabcontent .NET CLI %} -Alternatively, run the following command in the Package Manager Console to achieve the same. +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Charts -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install this package in the client project. +{% endtabcontent %} -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. +{% endtabcontents %} ## 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. +After the package is installed, open the **~/_Imports.razor** file from the `.Client` project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. N> - The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder. @@ -137,9 +131,9 @@ N> {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file of your Blazor Web App. This step enables the Blazor components to work in your application. +Open the **Program.cs** file in Blazor Web App and register the Blazor service. If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. {% tabs %} {% highlight c# tabtitle="Program.cs" %} @@ -153,53 +147,86 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. - ## 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 references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **App.razor** file. -The 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). - -```html +{% tabs %} +{% highlight html tabtitle="App.razor" %} -``` - -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. +{% endhighlight %} +{% endtabs %} -## Add Blazor Chart component +## Add Blazor Charts component -Add the Blazor 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`). +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component inside the razor file. -N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. +N> If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode defined here *@ @rendermode InteractiveAuto + + + + + {% endhighlight %} {% endtabs %} +**Run the application** + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Charts component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + {% tabs %} -{% highlight razor tabtitle="Home.razor" %} +{% highlight razor tabtitle="Terminal" %} - - +cd .. +cd BlazorWebApp +dotnet run - +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +cd .. +cd BlazorWebApp +dotnet run {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Chart component in the default web browser. +{% endtabcontent %} + +{% endtabcontents %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBRjRiBKleQGqKo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Charts Component](images/getting-started/blazor-chart.webp)" %} -## Populate Blazor chart with data +## Populate Blazor Charts 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). +To bind data for the Blazor charts 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). 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. @@ -217,7 +244,8 @@ Map the data fields `Month` and `SalesValue` to the series [XName](https://help. -@code { +@code +{ public class SalesInfo { public string Month { get; set;} @@ -239,7 +267,7 @@ Map the data fields `Month` and `SalesValue` to the series [XName](https://help. {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBTNiLezckHqsGf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart](images/getting-started/blazor-chart-column.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrRZdMVgPGhfPSi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Charts](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 c6681ca9f1..257cbc1302 100644 --- a/blazor/chart/getting-started.md +++ b/blazor/chart/getting-started.md @@ -1,107 +1,118 @@ --- layout: post -title: Getting Started | Blazor Chart Component | Syncfusion® +title: Getting Started with Blazor Charts in Blazor Server App | 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 +control: Charts documentation: ug --- -# Getting Started with Blazor Chart Component in Blazor Server App +# Getting Started with Blazor Charts Component in Blazor Server App This section briefly explains how to include [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) 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/). > **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with 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, CodeStudio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +## Create a new Blazor Server App + {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +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 [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor App in Visual Studio +{% tabcontent Visual Studio Code %} -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 [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. +Run the following command to create a new Blazor Server App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazor -o BlazorApp --interactivity Server +cd BlazorApp -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, 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 [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor App in Visual Studio Code +{% endtabcontent %} -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 [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. +{% tabcontent .NET CLI %} -Alternatively, create a Server application by using the following command in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor Server App. {% tabs %} +{% highlight razor tabtitle="Command Prompt" %} -{% highlight c# tabtitle="Blazor Server App" %} - -dotnet new blazor -o BlazorApp -int Server +dotnet new blazor -o BlazorApp --interactivity Server cd BlazorApp {% endhighlight %} - {% endtabs %} {% endtabcontent %} -{% tabcontent .NET CLI %} +{% endtabcontents %} -## Prerequisites +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 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). +## Install the required Blazor package -{% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package. 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. -dotnet --version +{% tabcontents %} -{% endhighlight %} -{% endtabs %} +{% tabcontent Visual Studio %} -## Create a Blazor Server App using .NET CLI +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.Charts`) and install it. -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. +Alternatively, you can install the same package using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet new blazor -o BlazorApp -int Server -cd BlazorApp +Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} +{% tabcontent Visual Studio Code %} -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). +Open the terminal and run the following commands. -## Install Blazor packages +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -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. +dotnet add package Syncfusion.Blazor.Charts -v {{ site.releaseversion }} -Alternatively, run the following command in the Package Manager Console to achieve the same. +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Charts -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -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. +{% endtabcontent %} + +{% endtabcontents %} ## Add import namespaces @@ -118,9 +129,9 @@ N> The `~/` notation represents the root directory of your project. This file is {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file of your Blazor Server App. This step enables the Syncfusion components to work in your application. +Open the **Program.cs** file in Blazor Server App and register the Blazor service. {% tabs %} {% highlight C# tabtitle="Program.cs" %} @@ -135,50 +146,80 @@ builder.Services.AddSyncfusionBlazor(); {% endtabs %} ## 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 references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **App.razor** file. -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). - -```html +{% tabs %} +{% highlight html tabtitle="App.razor" %} -``` - -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. +{% endhighlight %} +{% endtabs %} -## Add Blazor Chart component +## Add Blazor Charts component -Add the 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. +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component inside the razor file. -N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. +N>If the interactivity location is set to `Per page/component`, define a render mode at the top of the razor file. (For example `InteractiveServer`). If the Interactivity is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode defined here *@ @rendermode InteractiveServer + + + + {% endhighlight %} {% endtabs %} +**Run the application** + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Charts component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + {% tabs %} -{% highlight razor tabtitle="Home.razor" %} +{% highlight razor tabtitle="Terminal" %} - - +dotnet run - +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Chart component in the default web browser. +{% endtabcontent %} + +{% endtabcontents %} {% 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 Charts 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). +To bind data for the Blazor charts 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). 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. @@ -196,7 +237,8 @@ Map the data fields `Month` and `SalesValue` to the series [XName](https://help. -@code { +@code +{ public class SalesInfo { public string Month { get; set;} @@ -218,11 +260,11 @@ Map the data fields `Month` and `SalesValue` to the series [XName](https://help. {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBTNiLezckHqsGf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart](images/getting-started/blazor-chart-column.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrRZdMVgPGhfPSi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Charts](images/getting-started/blazor-chart-column.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Chart). ## See also -* [Getting Started with Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +1. [Getting Started with Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)