diff --git a/blazor/sparkline/getting-started-webapp.md b/blazor/sparkline/getting-started-webapp.md index d94e6dc656..469e5635b5 100644 --- a/blazor/sparkline/getting-started-webapp.md +++ b/blazor/sparkline/getting-started-webapp.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started with Syncfusion Sparkline Component in Blazor Web App +title: Getting started with Blazor Sparkline in Blazor Web App | Syncfusion description: Check out the documentation for getting started with Syncfusion Blazor Sparkline Component Components in Blazor Web App. platform: Blazor control: Sparkline Charts @@ -9,108 +9,106 @@ documentation: ug # Getting Started with Blazor Sparkline in Blazor Web App -This section briefly explains about how to include [Syncfusion® Blazor Sparkline](https://www.syncfusion.com/blazor-components/blazor-sparkline) 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 about how to include [Blazor Sparkline](https://www.syncfusion.com/blazor-components/blazor-sparkline) 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/). + +### Create a new Blazor Web App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +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). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor Web App in Visual Studio +{% tabcontent Visual Studio Code %} -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. +Run the following command to create a new Blazor Web App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazor -o BlazorWebApp --interactivity Auto -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +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. -## Create a new Blazor Web App in Visual Studio Code +{% endtabcontent %} -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. +{% tabcontent .NET CLI %} -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="Command Prompt" %} -dotnet new blazor -o BlazorWebApp -int Auto -cd BlazorWebApp -cd BlazorWebApp.Client +dotnet new blazor -o BlazorWebApp --interactivity Auto {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% tabcontent .NET CLI %} - -## Prerequisites +{% endtabcontents %} -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). +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). -{% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +### Install the required Blazor packages -dotnet --version +Install the [Syncfusion.Blazor.Sparkline](https://www.nuget.org/packages/Syncfusion.Blazor.Sparkline) 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 these packages in the `.Client` project. -{% endhighlight %} -{% endtabs %} +{% tabcontents %} -## Create a Blazor Web App using .NET CLI +{% tabcontent Visual Studio %} -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. +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Sparkline`) and install it. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: +Alternatively, you can install the same package using the Package Manager Console with the following command. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet new blazor -o BlazorWebApp -int Auto -cd BlazorWebApp -cd BlazorWebApp.Client +Install-Package Syncfusion.Blazor.Sparkline -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 Web 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 command. -## Install Syncfusion® Blazor packages +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -Install the [Syncfusion.Blazor.Sparkline](https://www.nuget.org/packages/Syncfusion.Blazor.Sparkline) NuGet package using one of the following methods. +dotnet add package Syncfusion.Blazor.Sparkline -v {{ site.releaseversion }} -**Visual Studio (NuGet Package Manager)**: +{% endhighlight %} +{% endtabs %} -1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. -2. Search the required NuGet package (`Syncfusion.Blazor.Sparkline`) and install it. +{% endtabcontent %} -**Visual Studio Code or .NET CLI**: +{% tabcontent .NET CLI %} -Open the terminal or command prompt and run the following command: +Open the command prompt and run the following command. {% tabs %} -{% highlight C# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet add package Syncfusion.Blazor.Sparkline -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 +### 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. @@ -123,9 +121,9 @@ After the packages are installed, open the **~/_Imports.razor** file in the clie {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +### Register the Blazor service -Register the Syncfusion Blazor service in the **Program.cs** file of your Blazor Web App. +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" %} @@ -139,26 +137,25 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -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 - -The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the **~/Components/App.razor** file. - -```html +### 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. + +{% tabs %} +{% highlight html tabtitle="App.razor" %} + - -``` + +{% endhighlight %} +{% endtabs %} 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 Sparkline component +### Add Blazor Sparkline component -* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Blazor Sparkline component inside the 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 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 Sparkline](https://www.syncfusion.com/blazor-components/blazor-sparkline) 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 tabtitle="Home.razor" %} @@ -172,7 +169,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -## Populate Blazor Sparkline with Data +### Populate Blazor Sparkline with Data To bind data for the Sparkline component, assign a `IEnumerable` object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). @@ -221,27 +218,53 @@ Now map the `Month` and the `Celsius` fields from the datasource to [XName](http {% endhighlight %} {% endtabs %} -### Run the application +**Run the application** + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Sparkline 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="Terminal" %} + +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} -**Visual Studio**: +{% tabcontent .NET CLI %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Sparkline component will render in your default web browser. +Open the command prompt and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. -**Visual Studio Code or .NET CLI**: +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} -1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. -2. Run the following command: +{% endtabcontent %} - ``` - dotnet run - ``` -3. The application will start and display in your default web browser. +{% endtabcontents %} {% previewsample "https://blazorplayground.syncfusion.com/embed/rjrJXWqjfqKBvkdq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart](./images/blazor-sparkline.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Sparkline). -## Blazor Sparkline chart types +### Blazor Sparkline chart types Change the Sparkline type using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_Type) property set to **Line**, **Column**, **WinLoss**, **Pie** or **Area**. Here, the Sparkline type is set to **Area**. @@ -265,7 +288,7 @@ Change the Sparkline type using the [Type](https://help.syncfusion.com/cr/blazor N> Refer to [code block](#populate-sparkline-with-data) to know about the property value of **ClimateData**. -## Adding Data Label +### Adding Data Label Add the Data Labels to improve the readability of the Sparkline component. This can be achieved by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_Visible) property to **true** in the [SparklineDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html). @@ -299,7 +322,7 @@ N> Refer to the [code block](#populate-sparkline-with-data) to know about the pr {% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJXsqtfqzDdTTI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart with Data Label](./images/blazor-sparkline-data-label.webp)" %} -## Enable tooltip +### Enable tooltip When space constraints prevent from displaying information using Data Labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTooltipSettings-1.html#Syncfusion_Blazor_Charts_SparklineTooltipSettings_1_Visible) property to **true** in the [SparklineTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTooltipSettings-1.html). @@ -325,7 +348,7 @@ N> Refer to the [code block](#populate-sparkline-with-data) to know about the pr {% previewsample "https://blazorplayground.syncfusion.com/embed/rZLfDsUNfgJpNFjr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart with Tooltip](./images/blazor-sparkline-tooltip.webp)" %} -## See also +### See also * [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) diff --git a/blazor/sparkline/getting-started.md b/blazor/sparkline/getting-started.md index 880fd2322c..904795da4e 100644 --- a/blazor/sparkline/getting-started.md +++ b/blazor/sparkline/getting-started.md @@ -1,103 +1,112 @@ --- layout: post -title: Getting Started with Blazor Sparkline Component | Syncfusion +title: Getting Started with Blazor Sparkline in Blazor WASM App | Syncfusion description: Checkout and learn about getting started with Blazor Sparkline component in Blazor WebAssembly Application. platform: Blazor control: Sparkline Charts documentation: ug --- -# Getting Started with Blazor Sparkline Component +# Getting Started with Blazor Sparkline in Blazor WASM App -This section briefly explains about how to include [Syncfusion® Blazor Sparkline](https://www.syncfusion.com/blazor-components/blazor-sparkline) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains about how to include [Blazor Sparkline](https://www.syncfusion.com/blazor-components/blazor-sparkline) 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/). + +### Create a new Blazor WASM 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). For detailed instructions, refer to the [Blazor WebAssembly App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. -* [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 -## 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), 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 packages -## Prerequisites +Install [Syncfusion.Blazor.Sparkline](https://www.nuget.org/packages/Syncfusion.Blazor.Sparkline/) 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. -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). +{% tabcontents %} + +{% tabcontent Visual Studio %} + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Sparkline`) and install it. + +Alternatively, you can install the same package using the Package Manager Console with the following command. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet --version +Install-Package Syncfusion.Blazor.Sparkline -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Create a Blazor WebAssembly App using .NET CLI +{% endtabcontent %} -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. +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazorwasm -o BlazorApp -cd BlazorApp +dotnet add package Syncfusion.Blazor.Sparkline -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} - -## Install Syncfusion® Blazor packages - -Install [Syncfusion.Blazor.Sparkline](https://www.nuget.org/packages/Syncfusion.Blazor.Sparkline/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +{% 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 command. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.Sparkline -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Sparkline -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 +### Add import namespaces After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. @@ -110,9 +119,9 @@ After the package is installed, open the **~/_Imports.razor** file and import th {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +### Register the Blazor service -Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor WebAssembly App. +Open the **Program.cs** file in Blazor WebAssembly App and register the Blazor service. {% tabs %} {% highlight C# tabtitle="Program.cs" %} @@ -126,21 +135,23 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% 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 reference in the **~/index.html** file. +### Add script resources -```html +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. +{% tabs %} +{% highlight html tabtitle="index.html" %} + - -``` + +{% endhighlight %} +{% endtabs %} 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 Sparkline component +### Add Blazor Sparkline component -Add the Syncfusion® Blazor Sparkline component in the **~/Pages/Index.razor** file. +Open a Razor file located in the **~/Pages/*Index.razor** and add the [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-sparkline) component inside the razor file. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -152,7 +163,7 @@ Add the Syncfusion® Blazor Sparkline compon {% endhighlight %} {% endtabs %} -## Populate Blazor Sparkline with Data +### Populate Blazor Sparkline with Data To bind data for the Sparkline component, assign a `IEnumerable` object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). @@ -201,11 +212,49 @@ Now map the `Month` and the `Celsius` fields from the datasource to [XName](http {% endhighlight %} {% endtabs %} -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Sparkline 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 Sparkline 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/rjrJXWqjfqKBvkdq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart](./images/blazor-sparkline.webp)" %} -## Blazor Sparkline chart types +### Blazor Sparkline chart types Change the Sparkline type using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_Type) property set to **Line**, **Column**, **WinLoss**, **Pie** or **Area**. Here, the Sparkline type is set to **Area**. @@ -229,7 +278,7 @@ Change the Sparkline type using the [Type](https://help.syncfusion.com/cr/blazor N> Refer to [code block](#populate-sparkline-with-data) to know about the property value of **ClimateData**. -## Adding Data Label +### Adding Data Label Add the Data Labels to improve the readability of the Sparkline component. This can be achieved by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_Visible) property to **true** in the [SparklineDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html). @@ -263,7 +312,7 @@ N> Refer to the [code block](#populate-sparkline-with-data) to know about the pr {% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJXsqtfqzDdTTI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart with Data Label](./images/blazor-sparkline-data-label.webp)" %} -## Enable tooltip +### Enable tooltip When space constraints prevent from displaying information using Data Labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTooltipSettings-1.html#Syncfusion_Blazor_Charts_SparklineTooltipSettings_1_Visible) property to **true** in the [SparklineTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTooltipSettings-1.html). @@ -291,7 +340,7 @@ N> Refer to the [code block](#populate-sparkline-with-data) to know about the pr N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Sparkline). -## See also +### See also * [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)