Blazor
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Data Labels in Blazor Sparkline component

03 Aug 2021 / 3 minutes to read

To improve readability, the Data Labels are used to display the value of data points.

Enable Data Label

The Visible property in the SparklineDataLabelSettings can be used to enable the Data Label by specifying a collection of special points. The following special points are applicable for the Sparkline Data Label.

  • All - Data label for all points are enabled.
  • Start - Data label for start points are enabled.
  • End - Data label for end points are enabled.
  • High - Data label for high points are enabled.
  • Low - Data label for low points are enabled.
  • Negative - Data label for negative points are enabled.
  • None - Data label for all points are disabled.

The following code examples shows how to enable Data Label for all points.

Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="new int[]{ 0, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Line" Height="200px" Width="350px">
<SparklineAxisSettings MinX="-1" MaxX="7" MaxY="7" MinY="-1"></SparklineAxisSettings>
<SparklineDataLabelSettings Visible="new List<VisibleType>() { VisibleType.All }"></SparklineDataLabelSettings>
</SfSparkline>

Sparkline with Data Label

Data Label customization

The following properties can be used to customize the Sparkline Data Label:

  • Fill - Specifies color for the Data Label.
  • Opacity - Specifies opacity of Fill color for the Data Label.
  • EdgeLabelMode - Specifies controlling option when the label comes in the edge. Available options are the Shift, the None and the Hide.
  • SparklineFont - To customize the Data Label font family, font style, font weight, color, opacity and size.
  • SparklineDataLabelBorder - Specifies the color and the width for the Data Label border.
  • SparklineDataLabelOffset - Specifies the label offset position from its default position.
Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="new int[]{ 0, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Line" Height="200px" Width="350px">
<SparklineAxisSettings MinX="-1" MaxX="7" MaxY="7" MinY="-1"></SparklineAxisSettings>
<SparklineDataLabelSettings Visible="new List<VisibleType>() { VisibleType.All }" Fill="yellow" Opacity="0.4" EdgeLabelMode="EdgeLabelMode.Shift">
    <SparklineFont Color="blue" FontStyle="italic" FontWeight="bold" Size="15" Opacity="0.8">
    </SparklineFont>
    <SparklineDataLabelBorder Color="green" Width="1">
    </SparklineDataLabelBorder>
</SparklineDataLabelSettings>
</SfSparkline>

Sparkline with data label customization

Format

The Data Label text can be formatted by specifying the property name from the datasource to the Format property in the SparklineDataLabelSettings. By default, Data Label text will be based on YName property.

Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="ClimateData" TValue="WeatherReport" XName="Month" YName="Celsius" ValueType="SparklineValueType.Category" Height="200px" Width="500px">
<SparklineDataLabelSettings Visible="new List<VisibleType> { VisibleType.All}" Format="${Month} - ${Celsius}" EdgeLabelMode="EdgeLabelMode.Shift">
</SparklineDataLabelSettings>
<SparklinePadding Top="25"></SparklinePadding>
</SfSparkline>

@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}
};
}

Sparkline with custom data label

Previous
Next