Events in Blazor Sparkline Component

5 Aug 20217 minutes to read

This section describes the Sparkline component’s events that will be triggered when appropriate actions are performed. The events should be provided to the Sparkline through the SparklineEvents.

Loaded

The Loaded event triggers after the Sparkline component has been loaded.

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="new int[]{ 0, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Line" Height="200px" Width="450px">
    <SparklineEvents OnLoaded="@LoadedHandler"></SparklineEvents>
</SfSparkline>

@code{
    public void LoadedHandler(System.EventArgs args)
    {
        // Here you can customize the code.
    }
}

OnPointRendering

The OnPointRendering event triggers before the point rendering.

Argument name Description
PointIndex Specifies the current point index.
Fill Specifies the point index color.
Border Specifies the color and the width of the point border.
Cancel Specifies the event cancel status.
@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="new int[]{ 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Column" Height="200px" Width="450px">
    <SparklineMarkerSettings Visible="new List<VisibleType>() { VisibleType.All }"></SparklineMarkerSettings>
    <SparklineEvents OnPointRendering="@PointRenderHandler"></SparklineEvents>
</SfSparkline>

@code{
    public void PointRenderHandler(SparklinePointEventArgs args)
    {
        // Here you can customize the code.
    }
}

OnPointRegionMouseClick

The OnPointRegionMouseClick event triggers when the mouse click on the point region.

Argument name Description
PointerIndex Specifies the Sparkline point index region.
Cancel Specifies the event cancel status.
@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="new int[]{ 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Column" Height="200px" Width="450px">
    <SparklineMarkerSettings Visible="new List<VisibleType>() { VisibleType.All }"></SparklineMarkerSettings>
    <SparklineEvents OnPointRegionMouseClick="@PointRegionMouseClickHandler"></SparklineEvents>
</SfSparkline>

@code{
    public void PointRegionMouseClickHandler(PointRegionEventArgs args)
    {
        // Here you can customize the code.
    }
}

OnResizing

The OnResizing event triggers while resizing the window.

Argument name Description
CurrentSize Specifies the size of Sparkline.
PreviousSize Specifies the previous size of Sparkline.
Cancel Specifies the event cancel status.
@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="new int[]{ 0, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Line" Height="200px" Width="450px">
    <SparklineEvents OnResizing="@ResizeHandler"></SparklineEvents>
</SfSparkline>

@code{
    public void ResizeHandler(SparklineResizeEventArgs args)
    {
        // Here you can customize the code.
    }
}

OnSeriesRendering

The OnSeriesRendering event triggers before rendering on each Sparkline series.

Argument name Description
Border Specifies the color and width of the series border.
Fill Specifies the series fill color.
LineWidth Specifies the series line width.
Cancel Specifies the event cancel status.
@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="new int[]{ 0, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Line" Height="200px" Width="450px">
    <SparklineEvents OnSeriesRendering="@SeriesRenderingHandler"></SparklineEvents>
</SfSparkline>

@code{
    public void SeriesRenderingHandler(SeriesRenderingEventArgs args)
    {
        // Here you can customize the code.
    }
}

OnMarkerRendering

The OnMarkerRendering event triggers before rendering the Sparkline marker render.

Argument name Description
Border Specifies the color and the width of the marker border.
Fill Specifies the marker fill color.
PointIndex Specifies the marker point index.
X Specifies the x axis of the marker.
Y Specifies the y axis of the marker.
Size Specifies the size of the marker.
Cancel Specifies the event cancel status.
@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="new int[]{ 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Line" Height="200px" Width="450px">
    <SparklineMarkerSettings Visible="new List<VisibleType>() { VisibleType.All }"></SparklineMarkerSettings>
    <SparklineEvents OnMarkerRendering="@MarkerRenderingHandler"></SparklineEvents>
</SfSparkline>

@code{
    public void MarkerRenderingHandler(MarkerRenderingEventArgs args)
    {
        // Here you can customize the code.
    }
}

OnDataLabelRendering

The OnDataLabelRendering event triggers before rendering the Sparkline data label render.

Argument name Description
Border Specifies the color and the width of the data label border.
Fill Specifies the series fill color of the data label.
PointIndex Specifies the data label point index.
X Specifies the x axis of the data label.
Y Specifies the y axis of the data label.
Text Specifies the content of the data label.
Color Specifies the content color.
Cancel Specifies the event cancel status.
@using Syncfusion.Blazor.Charts

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

@code{
    public void DataLabelRenderingHandler(DataLabelRenderingEventArgs args)
    {
        // Here you can customize the code.
    }
}