Blazor
Demos
Support
Forum
Download
Search results

Data Labels in Blazor Sparkline Charts component

Data labels are used to display values of data points to improve the readability.

Enable data label

To enable data label for Sparkline Charts series, provide Visible of the SparklineDataLabelSettings as following possible values:

  • All - Enables data label of all points.
  • Start - Enables data label of the start point.
  • End - Enables data label of the end point.
  • High - Enables data label of the high point.
  • Low - Enables data label of the low point.
  • Negative - Enables data labels of the negative points.

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

Sparkline Charts with DataLabel Sample

Customize data label

Following data label properties can be customized using SparklineDataLabelSettings tag.

  • Fill - Specifies fill color for data label
  • Opacity - 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 size
  • SparklineDataLabelBorder - To customize data label border width and color
  • SparklineDataLabelOffset - 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 };
}

Sparkline Charts with DataLabel border Sample

Format data label text

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

Sparkline Charts with custom data label

Previous
Next