User Interaction in Blazor Sparkline Component

17 Dec 20225 minutes to read

The Sparkline’s user interaction features include the tooltip and the tracker line.

Tooltip

When the mouse is hovered over a data point, the Sparkline provides the option to display details about the value of the data point via a tooltip. The following code example shows how to enable Sparkline’s tooltip with a custom format.

@using Syncfusion.Blazor.Charts

<SfSparkline Width="500" Height="200" TValue="WorkLog" DataSource="WorkLogs" XName="Day" YName="Hour" Fill="blue" ValueType="SparklineValueType.Category">
    <SparklineAxisSettings MinX="-1" MaxX="7" MaxY="8" MinY="-1">
    </SparklineAxisSettings>
    <SparklineTooltipSettings TValue="WorkLog" Visible="true" Format="${Day} : ${Hour}">
    </SparklineTooltipSettings>
</SfSparkline>

@code {
    public class WorkLog
    {
        public string Day { get; set; }
        public double Hour { get; set; }
    };
    public List<WorkLog> WorkLogs = new List<WorkLog> {
        new WorkLog {Day= "Mon", Hour= 3 },
        new WorkLog {Day= "Tue", Hour= 5 },
        new WorkLog {Day= "Wed", Hour= 2 },
        new WorkLog {Day= "Thu", Hour= 4 },
        new WorkLog {Day= "Fri", Hour= 6 }
    };
}

Blazor Sparkline Chart with Tooltip

Tooltip Customization

The following properties can be used to customize the Sparkline tooltip:

  • Fill - Specifies fill color for the tooltip.
  • Format - Specifies custom content of tooltip by assigning the properties from the datasource.
  • SparklineTooltipTextStyle - Specifies font family, font style, font weight, color, opacity and size of the tooltip content.
  • SparklineTooltipBorder - To customize border width and color of the tooltip.

The following code example shows customizing tooltip format, text color and fill color.

@using Syncfusion.Blazor.Charts

<SfSparkline Width="500" Height="200" TValue="WorkLog" DataSource="WorkLogs" XName="Day" YName="Hour" Fill="blue" ValueType="SparklineValueType.Category">
    <SparklineAxisSettings MinX="-1" MaxX="7" MaxY="8" MinY="-1">
    </SparklineAxisSettings>
    <SparklineTooltipSettings TValue="WorkLog" Visible="true" Format="${Day} : ${Hour}" Fill="lightgray">
        <SparklineTooltipTextStyle Color="darkblue"></SparklineTooltipTextStyle>
        <SparklineTooltipBorder Color="red" Width="1"></SparklineTooltipBorder>
    </SparklineTooltipSettings>
</SfSparkline>

NOTE

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

Blazor Sparkline Chart with Custom Tooltip

Tooltip Template

The tooltip can be rendered as a custom component by specifying the Template property in the SparklineTooltipSettings that accepts one or more UI elements as an input and renders them as a part of the tooltip rendering.

@using Syncfusion.Blazor.Charts

<SfSparkline Width="500" Height="200" TValue="WorkLog" DataSource="WorkLogs" XName="Day" YName="Hour" Fill="blue" ValueType="SparklineValueType.Category">
    <SparklineAxisSettings MinX="-1" MaxX="7" MaxY="8" MinY="-1">
    </SparklineAxisSettings>
    <SparklineTooltipSettings TValue="WorkLog" Visible="true" Fill="lightgray">
        <Template>
            @{
                <table style="width:100%; background-color: #ffffff; border-spacing: 0px; border-collapse:separate; border: 1px solid grey; border-radius:10px; padding-top: 5px; padding-bottom:5px">
                    <tr>
                        <td style="font-weight:bold; color:black; padding-left: 5px;padding-top: 2px;padding-bottom: 2px;">Worklog</td>
                    </tr>
                    <tr>
                        <td style="padding-left: 5px; color:black; padding-right: 5px; padding-bottom: 2px;">Day : @context.Day  </td>
                    </tr>
                    <tr>
                        <td style="padding-left: 5px; color:black; padding-right: 5px">Hour : @context.Hour hrs </td>
                    </tr>
                </table>
            }
        </Template>
    </SparklineTooltipSettings>
</SfSparkline>

NOTE

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

Blazor Sparkline Chart with Tooltip Template

Track Line

The track line tracks data points that are closest to the mouse position or touch interaction, and it can be enabled by setting the Visible property to true in the SparklineTrackLineSettings. The track line color and width can be customized using the Color and the Width properties in the SparklineTrackLineSettings.

@using Syncfusion.Blazor.Charts

<SfSparkline Width="500px" Height="200px"
             DataSource="new int[]{ 5, 3, 4, 6, 8, 7, 9, 1, 3, 5, 3, 4, 6, 8, 7, 9, 1, 3, 5, 2, 4, 6, 7, 9, 5, 8, 3, 6, 1, 7, 4, 2, 5, 2, 4, 6, 7, 9, 5, 8, 3, 6, 1, 7, 4, 2 }">
    <SparklineAxisSettings MinX="-1" MaxX="46" MaxY="10" MinY="-1">
    </SparklineAxisSettings>
    <SparklineTooltipSettings TValue="int" Visible="true">
        <SparklineTrackLineSettings Visible="true" Color="#033e96" Width="1">
        </SparklineTrackLineSettings>
    </SparklineTooltipSettings>
</SfSparkline>

Blazor Sparkline Chart with Track Line