Class ChartEvents

Handles the events related to chart rendering and customization.

Inheritance

object

ComponentBase

OwningComponentBase

SfOwningComponentBase

ChartSubComponent

ChartEvents

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inherited Members

ComponentBase.Assets

ComponentBase.AssignedRenderMode

ComponentBase.BuildRenderTree(RenderTreeBuilder)

ComponentBase.DispatchExceptionAsync(Exception)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.OnAfterRender(bool)

ComponentBase.OnAfterRenderAsync(bool)

ComponentBase.OnInitialized()

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSet()

ComponentBase.OnParametersSetAsync()

ComponentBase.RendererInfo

ComponentBase.SetParametersAsync(ParameterView)

ComponentBase.ShouldRender()

ComponentBase.StateHasChanged()

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

OwningComponentBase.Dispose(bool)

OwningComponentBase.IsDisposed

OwningComponentBase.ScopedServices

Namespace: Syncfusion.Blazor.Charts

Assembly: Syncfusion.Blazor.dll

Syntax

public class ChartEvents : ChartSubComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Constructors

ChartEvents()

Declaration

public ChartEvents()

Properties

ChartMouseClick

An event that is raised when a mouse click event occurs on the chart.

Declaration

[Parameter]
public EventCallback<ChartMouseEventArgs> ChartMouseClick { get; set; }

Property Value

Type
EventCallback<ChartMouseEventArgs>

Remarks

The Action<T> should accept a ChartMouseEventArgs parameter, providing information about the mouse click event on the chart.

Examples

// This example demonstrates how to use the ChartMouseClick event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents ChartMouseClick="OnMouseEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartZoomSettings EnableSelectionZooming="true"></ChartZoomSettings>
</SfChart>

@code {
    public void OnMouseEvent(ChartMouseEventArgs args)
    {
        // Handle chart mouse click event here.
        // Example: Console.WriteLine($"Clicked at X: {args.X}, Y: {args.Y}");
    }
}

ChartMouseDown

An event that is raised when a mouse down event occurs on the chart.

Declaration

[Parameter]
public Action<ChartMouseEventArgs> ChartMouseDown { get; set; }

Property Value

Type
Action<ChartMouseEventArgs>

Remarks

The Action<T> should accept a ChartMouseEventArgs parameter, providing information about the mouse down event on the chart.

Examples

// This example demonstrates how to use the ChartMouseDown event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents ChartMouseDown="OnMouseEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartZoomSettings EnableSelectionZooming="true"></ChartZoomSettings>
</SfChart>

@code {
    public void OnMouseEvent(ChartMouseEventArgs args)
    {
        // Handle chart mouse down event here.
        // Example: Console.WriteLine($"Mouse down at: X = {args.X}, Y = {args.Y}");
    }
}

ChartMouseMove

An event that is raised when a mouse move event occurs on the chart.

Declaration

[Parameter]
public Action<ChartMouseEventArgs> ChartMouseMove { get; set; }

Property Value

Type
Action<ChartMouseEventArgs>

Remarks

The Action<T> should accept a ChartMouseEventArgs parameter, providing information about the mouse move event on the chart.

Examples

// This example demonstrates how to use the ChartMouseMove event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents ChartMouseMove="OnMouseEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartZoomSettings EnableSelectionZooming="true"></ChartZoomSettings>
</SfChart>

@code {
    public void OnMouseEvent(ChartMouseEventArgs args)
    {
        // Handle chart mouse move event here.
        // Example: Console.WriteLine($"Mouse moved at: X = {args.X}, Y = {args.Y}");
    }
}

ChartMouseUp

An event that is raised when a mouse up event occurs on the chart.

Declaration

[Parameter]
public Action<ChartMouseEventArgs> ChartMouseUp { get; set; }

Property Value

Type
Action<ChartMouseEventArgs>

Remarks

The Action<T> should accept a ChartMouseEventArgs parameter, providing information about the mouse up event on the chart.

Examples

// This example demonstrates how to use the ChartMouseUp event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents ChartMouseUp="OnMouseEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartZoomSettings EnableSelectionZooming="true"></ChartZoomSettings>
</SfChart>

@code {
    public void OnMouseEvent(ChartMouseEventArgs args)
    {
        // Handle chart mouse up event here.
        // Example: Console.WriteLine($"Mouse up at: X = {args.X}, Y = {args.Y}");
    }
}

Exporting

Occurs when the chart export process is initiated.

Declaration

[Parameter]
public Action<ChartExportEventArgs> Exporting { get; set; }

Property Value

Type	Description
Action<ChartExportEventArgs>	An instance of the ChartExportEventArgs class.

Remarks

This event is triggered when the export process begins. The ChartExportEventArgs class provides options for customizing the exported file.

Examples

// This example demonstrates how to export a Syncfusion Blazor Chart and handle the export event.
<button class="btn-success" @onclick="Export">Export</button>
<SfChart @ref="chart">
    <ChartEvents Exporting="Exporting" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public SfChart chart;

    public void Export()
    {
        chart.ExportAsync(ExportType.JPEG, "Charts");
    }

    public void Exporting(ChartExportEventArgs args)
    {
        // Here, you can customize your code.
    }
}

Loaded

An event that is raised when the chart rendering is completed.

Declaration

[Parameter]
public Action<LoadedEventArgs> Loaded { get; set; }

Property Value

Type
Action<LoadedEventArgs>

Remarks

The Action<T> should accept a LoadedEventArgs parameter, providing information about the completion of the chart rendering.

Examples

// This example demonstrates how to handle the Loaded event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents Loaded="LoadedEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public void LoadedEvent(LoadedEventArgs args)
    {
        // Example: Perform an action after the chart is fully loaded
        // Console.WriteLine("Chart loaded.");
    }
}

OnAxisActualRangeCalculated

An event that is raised before each axis range is rendered.

Declaration

[Parameter]
public Action<AxisRangeCalculatedEventArgs> OnAxisActualRangeCalculated { get; set; }

Property Value

Type
Action<AxisRangeCalculatedEventArgs>

Remarks

The Action<T> should accept a AxisRangeCalculatedEventArgs parameter, providing information about the axis range calculation event.

Examples

// This example demonstrates how to handle the AxisActualRangeCalculated event in the chart.
<SfChart>
    <ChartEvents OnAxisActualRangeCalculated="AxisActualRangeEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
            <ChartMarker Visible="true">
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public void AxisActualRangeEvent(AxisRangeCalculatedEventArgs args)
    {
        // You can modify the actual axis range here.
        // For example: args.Maximum = 100;
    }
}

OnAxisLabelClick

An event that is raised when any chart axis label is clicked.

Declaration

[Parameter]
public Action<AxisLabelClickEventArgs> OnAxisLabelClick { get; set; }

Property Value

Type
Action<AxisLabelClickEventArgs>

Remarks

The Action<T> should accept an AxisLabelClickEventArgs parameter, providing information about the click event on a chart axis label.

Examples

// This example demonstrates how to handle the AxisLabelClick event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents OnAxisLabelClick="AxisLabelClickEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public void AxisLabelClickEvent(AxisLabelClickEventArgs args)
    {
        // Example: Perform an action when an axis label is clicked
        // Console.WriteLine($"Axis label clicked: {args.AxisLabel}");
    }
}

OnAxisLabelRender

An event that is raised before each axis label is rendered.

Declaration

[Parameter]
public Action<AxisLabelRenderEventArgs> OnAxisLabelRender { get; set; }

Property Value

Type
Action<AxisLabelRenderEventArgs>

Remarks

You can customize the axis label through AxisLabelRenderEventArgs event argument. This event is raised to customize the axis labels.

Examples

// This example demonstrates how to customize axis labels using the OnAxisLabelRender event.
<SfChart>
    <ChartEvents OnAxisLabelRender="AxisLabelEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" />
    </ChartSeriesCollection>
</SfChart>

@code {
    public void AxisLabelEvent(AxisLabelRenderEventArgs args)
    {
        // Customize axis label text
    }
}

OnAxisMultiLevelLabelRender

An event that is raised while rendering multi-level labels on the axis.

Declaration

[Parameter]
public Action<AxisMultiLabelRenderEventArgs> OnAxisMultiLevelLabelRender { get; set; }

Property Value

Type
Action<AxisMultiLabelRenderEventArgs>

Remarks

The Action<T> should accept an AxisMultiLabelRenderEventArgs parameter, providing information about the rendering event for multi-level labels on the axis.

Examples

// This example demonstrates how to use the OnAxisMultiLevelLabelRender event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents OnAxisMultiLevelLabelRender="AxisMultiLevelLabelEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
        <ChartMultiLevelLabels>
            <ChartMultiLevelLabel>
                <ChartCategories>
                    <ChartCategory Start="0" End="3" Text="First_Half"></ChartCategory>
                    <ChartCategory Start="3" End="6" Text="Second_Half"></ChartCategory>
                </ChartCategories>
            </ChartMultiLevelLabel>
        </ChartMultiLevelLabels>
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
            <ChartMarker Visible="true">
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public void AxisMultiLevelLabelEvent(AxisMultiLabelRenderEventArgs args)
    {
        // Example: Change label text
        // args.Text = args.Text.Replace("_", " ");

        // Example: Apply custom style
        // args.TextStyle.Color = "blue";
    }
}

OnCrosshairMove

An event that is raised when the crosshair is moved.

Declaration

[Parameter]
public Action<CrosshairMoveEventArgs> OnCrosshairMove { get; set; }

Property Value

Type
Action<CrosshairMoveEventArgs>

Remarks

The Action<T> should accept a CrosshairMoveEventArgs parameter, providing information about the event when the crosshair moves along the axis.

Examples

// This example demonstrates how to handle the OnCrosshairMove event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents OnCrosshairMove="OnCrosshairMove" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
        <ChartAxisCrosshairTooltip Enable="true" Fill="red">
            <ChartCrosshairTextStyle Size="14px" Color="white"> </ChartCrosshairTextStyle>
        </ChartAxisCrosshairTooltip>
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartAxisCrosshairTooltip Enable="true" Fill="red">
            <ChartCrosshairTextStyle Size="14px" Color="white"> </ChartCrosshairTextStyle>
        </ChartAxisCrosshairTooltip>
    </ChartPrimaryYAxis>
    <ChartCrosshairSettings Enable="true">
        <ChartCrosshairLine Width="2" Color="green"></ChartCrosshairLine>
    </ChartCrosshairSettings>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@SalesDetails" XName="X" YName="Y" Type="ChartSeriesType.Line">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public void OnCrosshairMove(CrosshairMoveEventArgs args)
    {
        // Example: Implement custom logic when the crosshair moves.
        // args is the event argument containing information about the crosshair's position.
    }
}

OnDataEdit

An event that is raised when the point drag starts during data editing.

Declaration

[Parameter]
public Action<DataEditingEventArgs> OnDataEdit { get; set; }

Property Value

Type
Action<DataEditingEventArgs>

Remarks

The Action<T> should accept a DataEditingEventArgs parameter, providing information about the event when the user starts dragging a data point.

Examples

// This example demonstrates how to handle the OnDataEditCompleted event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents OnDataEdit="OnDataEdit" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" />
    <ChartPrimaryYAxis LabelFormat="{value}%" RangePadding="ChartRangePadding.None" Minimum="0" Maximum="100" Interval="20" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@ConsumerDetails" XName="XValue" Width="2"
                     Opacity="1" YName="YValue" Type="ChartSeriesType.Column">
            <ChartMarker Visible="true" Width="10" Height="10">
            </ChartMarker>
            <ChartDataEditSettings Enable="true"></ChartDataEditSettings>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public void OnDataEdit(DataEditingEventArgs args)
    {
        // Example: Implement custom logic when data editing is completed.
        // args contains information about the edited data.
    }
}

OnDataEditCompleted

An event that is raised when the point drag ends during data editing.

Declaration

[Parameter]
public Action<DataEditingEventArgs> OnDataEditCompleted { get; set; }

Property Value

Type
Action<DataEditingEventArgs>

Remarks

The Action<T> should accept a DataEditingEventArgs parameter, providing information about the event when the user completes dragging a data point.

Examples

// This example demonstrates how to handle the OnDataEditCompleted event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents OnDataEditCompleted="OnDataEditCompleted" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" />
    <ChartPrimaryYAxis LabelFormat="{value}%" RangePadding="ChartRangePadding.None" Minimum="0" Maximum="100" Interval="20" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@ConsumerDetails" XName="XValue" Width="2"
                     Opacity="1" YName="YValue" Type="ChartSeriesType.Column">
            <ChartMarker Visible="true" Width="10" Height="10">
            </ChartMarker>
            <ChartDataEditSettings Enable="true"></ChartDataEditSettings>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public void OnDataEditCompleted(DataEditingEventArgs args)
    {
        // Example: Implement custom logic when data editing is completed.
        // args contains information about the edited data.
    }
}

OnDataLabelRender

An event that is raised before the data label for a series is rendered.

Declaration

[Parameter]
public Action<TextRenderEventArgs> OnDataLabelRender { get; set; }

Property Value

Type
Action<TextRenderEventArgs>

Remarks

The Action<T> should accept a TextRenderEventArgs parameter, providing information about the rendering event for a data label.

Examples

// This example demonstrates how to use the DataLabelRender event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents OnDataLabelRender="DataLabelEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
            <ChartMarker>
                <ChartDataLabel Visible="true"></ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public void DataLabelEvent(TextRenderEventArgs args)
    {
        // Customize the data label text or style.
        // Example: args.Text = "$" + args.Text;
    }
}

OnExportComplete

A callback that will be invoked when the chart is being exported.

Declaration

[Parameter]
public Action<ExportEventArgs> OnExportComplete { get; set; }

Property Value

Type
Action<ExportEventArgs>

Remarks

You can customize the exporting operation through the ExportEventArgs event argument.

Examples

// This example demonstrates how to export a Syncfusion Blazor Chart and handle the export complete event.
<button class="btn-success" @onclick="Export">Export</button>
<SfChart @ref="chart">
    <ChartEvents OnExportComplete="ExportCompleteEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public SfChart chart;

    public void Export()
    {
        chart.ExportAsync(ExportType.JPEG, "Charts");
    }

    public void ExportCompleteEvent(ExportEventArgs args)
    {
        // Here, you can customize your code.
    }
}

OnLegendClick

An event that is raised when a legend item is clicked.

Declaration

[Parameter]
public EventCallback<LegendClickEventArgs> OnLegendClick { get; set; }

Property Value

Type
EventCallback<LegendClickEventArgs>

Remarks

The Action<T> should accept a LegendClickEventArgs parameter, providing information about the click event on the legend item.

Examples

// This example demonstrates how to handle the OnLegendClick event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents OnLegendClick="LegendClickEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" Name="Column" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
        <ChartSeries DataSource="@Sales" Name="Line" XName="Month" YName="SalesValue" Type="ChartSeriesType.Line">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public void LegendClickEvent(LegendClickEventArgs args)
    {
        // Example: Implement custom logic when a legend item is clicked
        // args.Series is the clicked legend's associated chart series.
    }
}

OnLegendItemRender

An event that is raised before each legend item is rendered.

Declaration

[Parameter]
public Action<LegendRenderEventArgs> OnLegendItemRender { get; set; }

Property Value

Type
Action<LegendRenderEventArgs>

Remarks

The Action<T> should accept a LegendRenderEventArgs parameter, providing information about the rendering event for a legend item.

Examples

// This example demonstrates how to use the OnLegendItemRender event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents OnLegendItemRender="LegendEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" Name="Column" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
        <ChartSeries DataSource="@Sales" Name="Line" XName="Month" YName="SalesValue" Type="ChartSeriesType.Line">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public void LegendEvent(LegendRenderEventArgs args)
    {
        // Customize legend item appearance.
        // Example: args.Text = "Modified " + args.Text;
        // Example: args.Shape = LegendShape.Diamond;
    }
}

OnMultiLevelLabelClick

An event that is raised after a click on a multi-level label.

Declaration

[Parameter]
public Action<MultiLevelLabelClickEventArgs> OnMultiLevelLabelClick { get; set; }

Property Value

Type
Action<MultiLevelLabelClickEventArgs>

Remarks

The Action<T> should accept a MultiLevelLabelClickEventArgs parameter, providing information about the click event on a multi-level label.

Examples

// This example demonstrates how to handle the OnMultiLevelLabelClick event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents OnMultiLevelLabelClick="MultiLabelClickEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
        <ChartMultiLevelLabels>
            <ChartMultiLevelLabel>
                <ChartCategories>
                    <ChartCategory Start="0" End="3" Text="First_Half"></ChartCategory>
                    <ChartCategory Start="3" End="6" Text="Second_Half"></ChartCategory>
                </ChartCategories>
            </ChartMultiLevelLabel>
        </ChartMultiLevelLabels>
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
            <ChartMarker Visible="true"></ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public void MultiLabelClickEvent(MultiLevelLabelClickEventArgs args)
    {
        // Example: Get the clicked label text
        // var labelText = args.Text;
    }
}

OnPointClick

An event that is raised on a point click event.

Declaration

[Parameter]
public EventCallback<PointEventArgs> OnPointClick { get; set; }

Property Value

Type
EventCallback<PointEventArgs>

Remarks

The Action<T> should accept a PointEventArgs parameter, providing information about the click event on a data point.

Examples

// This example demonstrates how to handle the OnPointClick event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents OnPointClick="PointClickEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public void PointClickEvent(PointEventArgs args)
    {
        // Here, you can customize your response to point click.
    }
}

OnPointRender

An event that is raised before each data point for the series is rendered.

Declaration

[Parameter]
public Action<PointRenderEventArgs> OnPointRender { get; set; }

Property Value

Type
Action<PointRenderEventArgs>

Remarks

The Action<T> should accept a PointRenderEventArgs parameter, providing information about the rendering event for a data point in the series.

Examples

// This example demonstrates how to use the PointRender event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents OnPointRender="PointRenderEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
            <ChartMarker Visible="true">
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public void PointRenderEvent(PointRenderEventArgs args)
    {
        // Customize the appearance of each point.
        // For example: args.Fill = "red";
    }
}

OnPrintComplete

An event that is raised after the print operation is completed.

Declaration

[Parameter]
public Action OnPrintComplete { get; set; }

Property Value

Type
Action

Remarks

The Action should be used to handle events after the completion of the print operation.

Examples

// This example demonstrates how to print a Syncfusion Blazor Chart and handle the print complete event.
<button class="btn-success" @onclick="Print">Export</button>
<SfChart @ref="chart">
    <ChartEvents OnPrintComplete="OnPrintComplete" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public SfChart chart;

    public void Print()
    {
        chart.PrintAsync();
    }

    public void OnPrintComplete()
    {
        // Here, you can customize your code.
    }
}

OnScrollChanged

An event that is raised when the scroll changes.

Declaration

[Parameter]
public Action<ScrollEventArgs> OnScrollChanged { get; set; }

Property Value

Type
Action<ScrollEventArgs>

Remarks

The Action<T> should accept a ScrollEventArgs parameter, providing information about the event when the scroll is changed.

Examples

// This example demonstrates how to handle the OnScrollChanged event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents OnScrollChanged="ScrollChangeEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" ZoomFactor="0.5" ZoomPosition="0.2">
        <ChartAxisScrollbarSettings Enable="true"></ChartAxisScrollbarSettings>
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public void ScrollChangeEvent(ScrollEventArgs args)
    {
        // Example: Log the new zoom factor and position
        // Console.WriteLine($"ZoomFactor: {args.CurrentZoomFactor}, ZoomPosition: {args.CurrentZoomPosition}");
    }
}

OnSelectionChanged

An event that is raised after the selection is completed.

Declaration

[Parameter]
public Action<SelectionCompleteEventArgs> OnSelectionChanged { get; set; }

Property Value

Type
Action<SelectionCompleteEventArgs>

Remarks

The Action<T> should accept a SelectionCompleteEventArgs parameter, providing information about the event when the selection operation is completed.

Examples

// This example demonstrates how to handle the OnSelectionChanged event in a Syncfusion Blazor Chart.
<SfChart Title="Olympic Medals" SelectionMode="SelectionMode.Point">
    <ChartEvents OnSelectionChanged="OnSelectionChanged" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
    </ChartPrimaryXAxis>
    <ChartLegendSettings Visible="true" ToggleVisibility="true">
    </ChartLegendSettings>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="Country" YName="Gold"
                     Type="ChartSeriesType.Column" SelectionStyle="chartSelection1" />
    </ChartSeriesCollection>
</SfChart>

<style>
    .chartSelection1 {
        fill: red;
    }
</style>

@code {
    public void OnSelectionChanged(SelectionCompleteEventArgs args)
    {
        // Example: Implement custom logic when a selection changes.
        // args contains information about the selected data points.
    }
}

OnSeriesRender

An event that is raised before each series is rendered.

Declaration

[Parameter]
public Action<SeriesRenderEventArgs> OnSeriesRender { get; set; }

Property Value

Type
Action<SeriesRenderEventArgs>

Remarks

The Action<T> should accept a SeriesRenderEventArgs parameter, providing information about the rendering event for a series.

Examples

// This example demonstrates how to use the OnSeriesRender event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents OnSeriesRender="OnSeriesRenderEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartZoomSettings EnableSelectionZooming="true"></ChartZoomSettings>
</SfChart>

@code {
    public void OnSeriesRenderEvent(SeriesRenderEventArgs args)
    {
        // Customize series appearance or behavior.
        // Example: args.Series.Fill = "orange";
    }
}

OnZoomEnd

An event that is raised after the zooming operation is completed.

Declaration

[Parameter]
public Action<ZoomingEventArgs> OnZoomEnd { get; set; }

Property Value

Type
Action<ZoomingEventArgs>

Remarks

The Action<T> should accept a ZoomingEventArgs parameter, providing information about the event when the zooming operation is completed.

Examples

// This example demonstrates how to handle the OnZoomEnd event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents OnZoomEnd="OnZoomingEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartZoomSettings EnableSelectionZooming="true"></ChartZoomSettings>
</SfChart>

@code {
    public void OnZoomingEvent(ZoomingEventArgs args)
    {
        // Example: Implement custom logic when zooming ends
    }
}

OnZoomStart

An event that is raised at the start of the zooming operation.

Declaration

[Parameter]
public Action<ZoomingEventArgs> OnZoomStart { get; set; }

Property Value

Type
Action<ZoomingEventArgs>

Remarks

The Action<T> should accept a ZoomingEventArgs parameter, providing information about the event at the beginning of the zooming operation.

Examples

// This example demonstrates how to handle the OnZoomStart event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents OnZoomStart="OnZoomingEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartZoomSettings EnableSelectionZooming="true"></ChartZoomSettings>
</SfChart>

@code {
    public void OnZoomingEvent(ZoomingEventArgs args)
    {
        // Example: Cancel zooming if necessary
        // args.Cancel = true;
    }
}

OnZooming

An event that is raised during the zooming operation.

Declaration

[Parameter]
public Action<ZoomingEventArgs> OnZooming { get; set; }

Property Value

Type
Action<ZoomingEventArgs>

Remarks

The Action<T> should accept a ZoomingEventArgs parameter, providing information about the event that occurs during the zooming operation.

Examples

// This example demonstrates how to handle the OnZoomStart event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents OnZoomStart="OnZoomingEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartZoomSettings EnableSelectionZooming="true"></ChartZoomSettings>
</SfChart>

@code {
    public void OnZoomingEvent(ZoomingEventArgs args)
    {
        // Example: Cancel zooming if necessary
        // args.Cancel = true;
    }
}

SharedTooltipRender

An event that is raised before the tooltip for a series is rendered.

Declaration

[Parameter]
public Action<SharedTooltipRenderEventArgs> SharedTooltipRender { get; set; }

Property Value

Type
Action<SharedTooltipRenderEventArgs>

Remarks

The Action<T> should accept a SharedTooltipRenderEventArgs parameter, providing information about the rendering event for the shared tooltip of a series.

Examples

// This example demonstrates how to handle the SharedTooltipRender event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents SharedTooltipRender="SharedTooltipEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>
</SfChart>

@code {
    public void SharedTooltipEvent(SharedTooltipRenderEventArgs args)
    {
        // Here, you can customize your tooltip.
    }
}

SizeChanged

An event that is raised after the chart has been resized.

Declaration

[Parameter]
public Action<ResizeEventArgs> SizeChanged { get; set; }

Property Value

Type
Action<ResizeEventArgs>

Remarks

The Action<T> should accept a ResizeEventArgs parameter, providing information about the event that occurs after the chart is resized.

Examples

// This example demonstrates how to handle the SizeChanged event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents SizeChanged="@SizeChangedEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public void SizeChangedEvent(ResizeEventArgs args)
    {
        // Here, you can customize your code.
    }
}

TooltipRender

An event that is raised before the tooltip for a series is rendered.

Declaration

[Parameter]
public Action<TooltipRenderEventArgs> TooltipRender { get; set; }

Property Value

Type
Action<TooltipRenderEventArgs>

Remarks

The Action<T> should accept a TooltipRenderEventArgs parameter, providing information about the rendering event for the tooltip of a series.

Examples

// This example demonstrates how to handle the TooltipRender event in a Syncfusion Blazor Chart.
<SfChart>
    <ChartEvents TooltipRender="TooltipEvent" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
</SfChart>

@code {
    public void TooltipEvent(TooltipRenderEventArgs args){ args.TextStyle.Color = "red";}
}

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable