Blazor
Demos
Support
Forum
Download
Search results

Events in Blazor Chart component

In this section, we have provided the list of events of the Chart component which will be triggered for appropriate Chart actions.

The events should be provided to the Chart using ChartEvents component.

From v17.2.*, we have added only the limited number of events for the Chart component. The event names are different from the previous releases and also removed several events. The following are the event name changes from v17.1.* to v17.2.*

Event Name(v17.1.*) Event Name(v17.2.*)
animationComplete OnAnimationComplete
beforePrint OnPrint
chartMouseClick OnChartMouseClick
chartMouseDown OnChartMouseDown
chartMouseLeave OnChartMouseLeave
chartMouseMove OnChartMouseMove
chartMouseUp OnChartMouseUp
dragComplete OnDragComplete
loaded Loaded
pointClick OnPointClick
pointMove PointMoved
resized Resized
scrollChanged ScrollChanged
scrollEnd OnScrollEnd
scrollStart OnScrollStart

OnAnimationComplete

OnAnimationComplete event is triggers after animation is completed for the series.

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartEvents OnAnimationComplete="@AnimationHandler"></ChartEvents>

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class SalesInfo
    {
        public string Month;
        public double SalesValue;
    }
    public List<SalesInfo> Sales = new List<SalesInfo>
{
        new SalesInfo { Month = "Jan", SalesValue = 35 },
        new SalesInfo { Month = "Feb", SalesValue = 28 },
        new SalesInfo { Month = "Mar", SalesValue = 34 },
        new SalesInfo { Month = "Apr", SalesValue = 32 },
        new SalesInfo { Month = "May", SalesValue = 40 },
        new SalesInfo { Month = "Jun", SalesValue = 32 },
        new SalesInfo { Month = "Jul", SalesValue = 35 }
    };

    public void AnimationHandler(IAnimationCompleteEventArgs args)
    {
        // Here you can customize your code
    }
}

OnPrint

OnPrint event is triggers before the prints gets started.

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartEvents OnPrint="@PrintHandler"></ChartEvents>

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class SalesInfo
    {
        public string Month;
        public double SalesValue;
    }
    public List<SalesInfo> Sales = new List<SalesInfo>
{
        new SalesInfo { Month = "Jan", SalesValue = 35 },
        new SalesInfo { Month = "Feb", SalesValue = 28 },
        new SalesInfo { Month = "Mar", SalesValue = 34 },
        new SalesInfo { Month = "Apr", SalesValue = 32 },
        new SalesInfo { Month = "May", SalesValue = 40 },
        new SalesInfo { Month = "Jun", SalesValue = 32 },
        new SalesInfo { Month = "Jul", SalesValue = 35 }
    };

    public void PrintHandler(IPrintEventArgs args)
    {
        // Here you can customize your code
    }
}

OnChartMouseClick

OnChartMouseClick event is triggers on clicking the chart.

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartEvents OnChartMouseClick="@ChartMouseClickHandler"></ChartEvents>

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class SalesInfo
    {
        public string Month;
        public double SalesValue;
    }
    public List<SalesInfo> Sales = new List<SalesInfo>
{
        new SalesInfo { Month = "Jan", SalesValue = 35 },
        new SalesInfo { Month = "Feb", SalesValue = 28 },
        new SalesInfo { Month = "Mar", SalesValue = 34 },
        new SalesInfo { Month = "Apr", SalesValue = 32 },
        new SalesInfo { Month = "May", SalesValue = 40 },
        new SalesInfo { Month = "Jun", SalesValue = 32 },
        new SalesInfo { Month = "Jul", SalesValue = 35 }
    };

    public void ChartMouseClickHandler(IMouseEventArgs args)
    {
        // Here you can customize your code
    }
}

OnChartMouseDown

OnChartMouseDown event is triggers on mouse down.

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartEvents OnChartMouseDown="@ChartMouseDownHandler"></ChartEvents>

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class SalesInfo
    {
        public string Month;
        public double SalesValue;
    }
    public List<SalesInfo> Sales = new List<SalesInfo>
{
        new SalesInfo { Month = "Jan", SalesValue = 35 },
        new SalesInfo { Month = "Feb", SalesValue = 28 },
        new SalesInfo { Month = "Mar", SalesValue = 34 },
        new SalesInfo { Month = "Apr", SalesValue = 32 },
        new SalesInfo { Month = "May", SalesValue = 40 },
        new SalesInfo { Month = "Jun", SalesValue = 32 },
        new SalesInfo { Month = "Jul", SalesValue = 35 }
    };

    public void ChartMouseDownHandler(IMouseEventArgs args)
    {
        // Here you can customize your code
    }
}

OnChartMouseLeave

OnChartMouseLeave event is triggers when cursor leaves the chart.

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartEvents OnChartMouseLeave="@ChartMouseLeaveHandler"></ChartEvents>

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class SalesInfo
    {
        public string Month;
        public double SalesValue;
    }
    public List<SalesInfo> Sales = new List<SalesInfo>
{
        new SalesInfo { Month = "Jan", SalesValue = 35 },
        new SalesInfo { Month = "Feb", SalesValue = 28 },
        new SalesInfo { Month = "Mar", SalesValue = 34 },
        new SalesInfo { Month = "Apr", SalesValue = 32 },
        new SalesInfo { Month = "May", SalesValue = 40 },
        new SalesInfo { Month = "Jun", SalesValue = 32 },
        new SalesInfo { Month = "Jul", SalesValue = 35 }
    };

    public void ChartMouseLeaveHandler(IMouseEventArgs args)
    {
        // Here you can customize your code
    }
}

OnChartMouseMove

OnChartMouseMove event is triggers on hovering the chart.

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartEvents OnChartMouseMove="@ChartMouseMoveHandler"></ChartEvents>

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class SalesInfo
    {
        public string Month;
        public double SalesValue;
    }
    public List<SalesInfo> Sales = new List<SalesInfo>
{
        new SalesInfo { Month = "Jan", SalesValue = 35 },
        new SalesInfo { Month = "Feb", SalesValue = 28 },
        new SalesInfo { Month = "Mar", SalesValue = 34 },
        new SalesInfo { Month = "Apr", SalesValue = 32 },
        new SalesInfo { Month = "May", SalesValue = 40 },
        new SalesInfo { Month = "Jun", SalesValue = 32 },
        new SalesInfo { Month = "Jul", SalesValue = 35 }
    };

    public void ChartMouseMoveHandler(IMouseEventArgs args)
    {
        // Here you can customize your code
    }
}

OnChartMouseUp

OnChartMouseUp event is triggers on mouse up.

@using Syncfusion.Blazor.Charts

<Sfchart>
    <ChartEvents OnChartMouseUp="@ChartMouseUpHandler"></ChartEvents>

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</Sfchart>

@code{
    public class SalesInfo
    {
        public string Month;
        public double SalesValue;
    }
    public List<SalesInfo> Sales = new List<SalesInfo>
    {
        new SalesInfo { Month = "Jan", SalesValue = 35 },
        new SalesInfo { Month = "Feb", SalesValue = 28 },
        new SalesInfo { Month = "Mar", SalesValue = 34 },
        new SalesInfo { Month = "Apr", SalesValue = 32 },
        new SalesInfo { Month = "May", SalesValue = 40 },
        new SalesInfo { Month = "Jun", SalesValue = 32 },
        new SalesInfo { Month = "Jul", SalesValue = 35 }
    };

    public void ChartMouseUpHandler(IMouseEventArgs args)
    {
        // Here you can customize your code
    }
}

OnDragComplete

OnDragComplete event is triggers after the drag selection is completed.

@using Syncfusion.Blazor.Charts

<Sfchart>
    <ChartEvents OnDragComplete="@DragCompleteHandler"></ChartEvents>

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</Sfchart>

@code{
    public class SalesInfo
    {
        public string Month;
        public double SalesValue;
    }
    public List<SalesInfo> Sales = new List<SalesInfo>
    {
        new SalesInfo { Month = "Jan", SalesValue = 35 },
        new SalesInfo { Month = "Feb", SalesValue = 28 },
        new SalesInfo { Month = "Mar", SalesValue = 34 },
        new SalesInfo { Month = "Apr", SalesValue = 32 },
        new SalesInfo { Month = "May", SalesValue = 40 },
        new SalesInfo { Month = "Jun", SalesValue = 32 },
        new SalesInfo { Month = "Jul", SalesValue = 35 }
    };

    public void DragCompleteHandler(IDragCompleteEventArgs args)
    {
        // Here you can customize your code
    }
}

Loaded

Loaded event is triggers after chart load.

@using Syncfusion.Blazor.Charts

<Sfchart>
    <ChartEvents Loaded="@LoadedHandler"></ChartEvents>

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</Sfchart>

@code{
    public class SalesInfo
    {
        public string Month;
        public double SalesValue;
    }
    public List<SalesInfo> Sales = new List<SalesInfo>
    {
        new SalesInfo { Month = "Jan", SalesValue = 35 },
        new SalesInfo { Month = "Feb", SalesValue = 28 },
        new SalesInfo { Month = "Mar", SalesValue = 34 },
        new SalesInfo { Month = "Apr", SalesValue = 32 },
        new SalesInfo { Month = "May", SalesValue = 40 },
        new SalesInfo { Month = "Jun", SalesValue = 32 },
        new SalesInfo { Month = "Jul", SalesValue = 35 }
    };

    public void LoadedHandler(ILoadedEventArgs args)
    {
        // Here you can customize your code
    }
}

OnPointClick

OnPointClick event is triggers on point click.

@using Syncfusion.Blazor.Charts

<Sfchart>
    <ChartEvents OnPointClick="@PointClickHandler"></ChartEvents>

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</Sfchart>

@code{
    public class SalesInfo
    {
        public string Month;
        public double SalesValue;
    }
    public List<SalesInfo> Sales = new List<SalesInfo>
    {
        new SalesInfo { Month = "Jan", SalesValue = 35 },
        new SalesInfo { Month = "Feb", SalesValue = 28 },
        new SalesInfo { Month = "Mar", SalesValue = 34 },
        new SalesInfo { Month = "Apr", SalesValue = 32 },
        new SalesInfo { Month = "May", SalesValue = 40 },
        new SalesInfo { Month = "Jun", SalesValue = 32 },
        new SalesInfo { Month = "Jul", SalesValue = 35 }
    };

    public void PointClickHandler(IPointEventArgs args)
    {
        // Here you can customize your code
    }
}

PointMoved

PointMoved event is triggers on point move.

@using Syncfusion.Blazor.Charts

<Sfchart>
    <ChartEvents PointMoved="@PointMovedHandler"></ChartEvents>

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</Sfchart>

@code{
    public class SalesInfo
    {
        public string Month;
        public double SalesValue;
    }
    public List<SalesInfo> Sales = new List<SalesInfo>
    {
        new SalesInfo { Month = "Jan", SalesValue = 35 },
        new SalesInfo { Month = "Feb", SalesValue = 28 },
        new SalesInfo { Month = "Mar", SalesValue = 34 },
        new SalesInfo { Month = "Apr", SalesValue = 32 },
        new SalesInfo { Month = "May", SalesValue = 40 },
        new SalesInfo { Month = "Jun", SalesValue = 32 },
        new SalesInfo { Month = "Jul", SalesValue = 35 }
    };

    public void PointMovedHandler(IPointEventArgs args)
    {
        // Here you can customize your code
    }
}

Resized

Resized event is triggers after resizing of chart.

@using Syncfusion.Blazor.Charts

<Sfchart>
    <ChartEvents Resized="@ResizeHandler"></ChartEvents>

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</Sfchart>

@code{
    public class SalesInfo
    {
        public string Month;
        public double SalesValue;
    }
    public List<SalesInfo> Sales = new List<SalesInfo>
    {
        new SalesInfo { Month = "Jan", SalesValue = 35 },
        new SalesInfo { Month = "Feb", SalesValue = 28 },
        new SalesInfo { Month = "Mar", SalesValue = 34 },
        new SalesInfo { Month = "Apr", SalesValue = 32 },
        new SalesInfo { Month = "May", SalesValue = 40 },
        new SalesInfo { Month = "Jun", SalesValue = 32 },
        new SalesInfo { Month = "Jul", SalesValue = 35 }
    };

    public void ResizeHandler(IResizeEventArgs args)
    {
        // Here you can customize your code
    }
}

ScrollChanged

ScrollChanged event is triggers when change the scroll.

@using Syncfusion.Blazor.Charts

<Sfchart>
    <ChartEvents ScrollChanged="@ScrollChangeHandler"></ChartEvents>

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</Sfchart>

@code{
    public class SalesInfo
    {
        public string Month;
        public double SalesValue;
    }
    public List<SalesInfo> Sales = new List<SalesInfo>
    {
        new SalesInfo { Month = "Jan", SalesValue = 35 },
        new SalesInfo { Month = "Feb", SalesValue = 28 },
        new SalesInfo { Month = "Mar", SalesValue = 34 },
        new SalesInfo { Month = "Apr", SalesValue = 32 },
        new SalesInfo { Month = "May", SalesValue = 40 },
        new SalesInfo { Month = "Jun", SalesValue = 32 },
        new SalesInfo { Month = "Jul", SalesValue = 35 }
    };

    public void ScrollChangeHandler(IScrollEventArgs args)
    {
        // Here you can customize your code
    }
}

OnScrollStart

OnScrollStart event is triggers when start the scroll.

@using Syncfusion.Blazor.Charts

<Sfchart>
    <ChartEvents OnScrollStart="@ScrollStartHandler"></ChartEvents>

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</Sfchart>

@code{
    public class SalesInfo
    {
        public string Month;
        public double SalesValue;
    }
    public List<SalesInfo> Sales = new List<SalesInfo>
    {
        new SalesInfo { Month = "Jan", SalesValue = 35 },
        new SalesInfo { Month = "Feb", SalesValue = 28 },
        new SalesInfo { Month = "Mar", SalesValue = 34 },
        new SalesInfo { Month = "Apr", SalesValue = 32 },
        new SalesInfo { Month = "May", SalesValue = 40 },
        new SalesInfo { Month = "Jun", SalesValue = 32 },
        new SalesInfo { Month = "Jul", SalesValue = 35 }
    };

    public void ScrollStartHandler(IScrollEventArgs args)
    {
        // Here you can customize your code
    }
}

OnScrollEnd

OnScrollEnd event is triggers after the scroll end.

@using Syncfusion.Blazor.Charts

<Sfchart>
    <ChartEvents OnScrollEnd="@ScrollEndHandler"></ChartEvents>

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</Sfchart>

@code{
    public class SalesInfo
    {
        public string Month;
        public double SalesValue;
    }
    public List<SalesInfo> Sales = new List<SalesInfo>
    {
        new SalesInfo { Month = "Jan", SalesValue = 35 },
        new SalesInfo { Month = "Feb", SalesValue = 28 },
        new SalesInfo { Month = "Mar", SalesValue = 34 },
        new SalesInfo { Month = "Apr", SalesValue = 32 },
        new SalesInfo { Month = "May", SalesValue = 40 },
        new SalesInfo { Month = "Jun", SalesValue = 32 },
        new SalesInfo { Month = "Jul", SalesValue = 35 }
    };

    public void ScrollEndHandler(IScrollEventArgs args)
    {
        // Here you can customize your code
    }
}
Previous
Next