Events in Blazor Sparkline Component

13 Oct 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.
    }
}