Getting started with Blazor Sparkline component

28 Jul 2021 / 4 minutes to read

This section briefly explains how to include a Sparkline component in the Blazor server-side application. Refer to Getting Started with Syncfusion Blazor for server-side in Visual Studio 2019 page for introduction and configuring common specifications.

Importing Syncfusion Blazor Sparkline component in the application

Install Syncfusion.Blazor NuGet package to the application by using the NuGet Package Manager.
Add the client-side resources through CDN or from NuGet package in the HEAD element of the ~/Pages/_Host.cshtml page.

<head>
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
    <!---CDN--->
    @*<link href="https://cdn.syncfusion.com/blazor/19.2.49/styles/bootstrap4.css" rel="stylesheet" />*@
</head>

For the Internet Explorer 11, kindly refer to the polyfills. For more information, refer to the documentation

<head>
    <link href="https://cdn.syncfusion.com/blazor/19.2.49/styles/bootstrap4.css" rel="stylesheet" />
    <script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
</head>

Adding component package to the application

Open the ~/_Imports.razor file and include the Syncfusion.Blazor.Charts namespace.

@using Syncfusion.Blazor.Charts

Adding SyncfusionBlazor service in Startup.cs

Open the Startup.cs file and add services required by the Syncfusion components using services.AddSyncfusionBlazor() method. Add this method in the ConfigureServices function as follows.

using Syncfusion.Blazor;

namespace BlazorApplication
{
public class Startup
{
    ....
    ....
    public void ConfigureServices(IServiceCollection services)
    {
        ....
        ....
        services.AddSyncfusionBlazor();
    }
}
}

To enable the custom client-side source loading from CRG or CDN, please refer to the section about the custom resources in Blazor application.

Adding Sparkline Component

To initialize the Sparkline component, add the below code to the Index.razor view page under ~/Pages folder. In a new application, if Index.razor page has any default content template, then those content can be completely removed and the following code can be added.

@page "/"

<SfSparkline>

</SfSparkline>

Populate Sparkline with Data

To bind data for the Sparkline component, assign a IEnumerable object to the DataSource property. It can also be provided as an instance of the DataManager.

@code {
public class WeatherReport
{
    public string Month { get; set; }
    public double Celsius { get; set; }
};
public List<WeatherReport> ClimateData = new List<WeatherReport> {
    new  WeatherReport { Month= "Jan", Celsius= 34 },
    new  WeatherReport { Month= "Feb", Celsius= 36 },
    new  WeatherReport { Month= "Mar", Celsius= 32 },
    new  WeatherReport { Month= "Apr", Celsius= 35 },
    new  WeatherReport { Month= "May", Celsius= 40 },
    new  WeatherReport { Month= "Jun", Celsius= 38 },
    new  WeatherReport { Month= "Jul", Celsius= 33 },
    new  WeatherReport { Month= "Aug", Celsius= 37 },
    new  WeatherReport { Month= "Sep", Celsius= 34 },
    new  WeatherReport { Month= "Oct", Celsius= 31 },
    new  WeatherReport { Month= "Nov", Celsius= 30 },
    new  WeatherReport { Month= "Dec", Celsius= 29}
};
}

Now map the Month and the Celsius fields from the datasource to XName and YName properties for x-axis and y-axis in the Sparkline and then set the ClimateData to DataSource property. Because the Month field is a value-based category, the ValueType property is used to specify it.

<SfSparkline XName="Month"
         YName="Celsius"
         ValueType="SparklineValueType.Category"
         TValue="WeatherReport"
         DataSource="ClimateData"
         Height="80px"
         Width="150px">
</SfSparkline>

On successful compilation of the application, the Syncfusion Blazor Sparkline component will render in the web browser as following.

Sparkline Sample

Change the type of Sparkline

Change the Sparkline type using the Type property set to Line, Column, WinLoss, Pie or Area. Here, the Sparkline type is set to Area.

<SfSparkline XName="Month"
         YName="Celsius"
         ValueType="SparklineValueType.Category"
         Type="SparklineType.Area"
         TValue="WeatherReport"
         DataSource="ClimateData"
         Height="80px"
         Width="150px">
</SfSparkline>

Sparkline Sample

Refer to code block to know about the property value of ClimateData.

Adding Data Label

Add the Data Labels to improve the readability of the Sparkline component. This can be achieved by setting the Visible property to true in the SparklineDataLabelSettings.

Available types are:

Start
End
All
High
Low
Negative

<SfSparkline DataSource="ClimateData"
          TValue="WeatherReport"
          XName="Month"
          YName="Celsius"
          ValueType="SparklineValueType.Category"
          Height="80px"
          Width="150px">
<SparklineDataLabelSettings Visible="new List<VisibleType> { VisibleType.Start, VisibleType.End }"></SparklineDataLabelSettings>
<SparklinePadding Left="10" Right="10"></SparklinePadding>
</SfSparkline>

Refer to the code block to know about the property value of ClimateData.

Sparkline with data label

When space constraints prevent from displaying information using Data Labels, the tooltip comes in handy. The tooltip can be enabled by setting the Visible property to true in the SparklineTooltipSettings.

<SfSparkline DataSource="ClimateData"
         TValue="WeatherReport"
         XName="Month"
         YName="Celsius"
         ValueType="SparklineValueType.Category"
         Height="80px"
         Width="150px">
<SparklineDataLabelSettings Visible="new List<VisibleType> { VisibleType.Start, VisibleType.End }"></SparklineDataLabelSettings>
<SparklinePadding Left="10" Right="10"></SparklinePadding>
<SparklineTooltipSettings TValue="WeatherReport" Visible="true"></SparklineTooltipSettings>
</SfSparkline>

Refer to the code block to know about the property value of the ClimateData.

Sparkline with tooltip