Data labels are used to display values of data points to improve the readability.
To enable data label for Sparkline Charts series, provide Visible
of the SparklineDataLabelSettings
as following possible values:
The following example shows enabling Sparkline Charts data label for all points.
@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="@dataLabelSettings"></SparklineDataLabelSettings>
</SfSparkline>
@code {
private List<VisibleType> dataLabelSettings = new List<VisibleType> { VisibleType.All };
}
Following data label properties can be customized using SparklineDataLabelSettings
tag.
Fill
- Specifies fill color for data labelOpacity
- Specifies opacity of fill color for data label.EdgeLabelMode
- Specifies controlling option when label comes in edge. Available options are ‘Shift’, ‘None’ and ‘Hide’SparklineFont
- To customize data label font family, style, weight, color, opacity and sizeSparklineDataLabelBorder
- To customize data label border width and colorSparklineDataLabelOffset
- Specifies label offset position from its default position.The following code example shows customizing data label border, text color, and fill color.
@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="@dataLabelSettings"
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>
@code {
private List<VisibleType> dataLabelSettings = new List<VisibleType> { VisibleType.All };
}
The text of data labels can be formatted using the Format
API in the Sparkline Charts SparklineDataLabelSettings
. By default, data label shows the y-value of point. The following code example shows how to display x and y-values for points.
@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;
public double Celsius;
};
private 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}
};
}