Class ChartEvents

Handles the events related to chart rendering and customization.

Inheritance

System.Object

ChartSubComponent

ChartEvents

Namespace: Syncfusion.Blazor.Charts

Assembly: Syncfusion.Blazor.dll

Syntax

public class ChartEvents : ChartSubComponent, ISubcomponentTracker

Constructors

ChartEvents()

Declaration

public ChartEvents()

Properties

ChartMouseClick

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

Declaration

public EventCallback<ChartMouseEventArgs> ChartMouseClick { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<ChartMouseEventArgs>

Remarks

The System.Action<> 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

public Action<ChartMouseEventArgs> ChartMouseDown { get; set; }

Property Value

Type
System.Action<ChartMouseEventArgs>

Remarks

The System.Action<> 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

public Action<ChartMouseEventArgs> ChartMouseMove { get; set; }

Property Value

Type
System.Action<ChartMouseEventArgs>

Remarks

The System.Action<> 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

public Action<ChartMouseEventArgs> ChartMouseUp { get; set; }

Property Value

Type
System.Action<ChartMouseEventArgs>

Remarks

The System.Action<> 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

public Action<ChartExportEventArgs> Exporting { get; set; }

Property Value

Type	Description
System.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

public Action<LoadedEventArgs> Loaded { get; set; }

Property Value

Type
System.Action<LoadedEventArgs>

Remarks

The System.Action<> 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

public Action<AxisRangeCalculatedEventArgs> OnAxisActualRangeCalculated { get; set; }

Property Value

Type
System.Action<AxisRangeCalculatedEventArgs>

Remarks

The System.Action<> 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

public Action<AxisLabelClickEventArgs> OnAxisLabelClick { get; set; }

Property Value

Type
System.Action<AxisLabelClickEventArgs>

Remarks

The System.Action<> 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

public Action<AxisLabelRenderEventArgs> OnAxisLabelRender { get; set; }

Property Value

Type
System.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

public Action<AxisMultiLabelRenderEventArgs> OnAxisMultiLevelLabelRender { get; set; }

Property Value

Type
System.Action<AxisMultiLabelRenderEventArgs>

Remarks

The System.Action<> 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

public Action<CrosshairMoveEventArgs> OnCrosshairMove { get; set; }

Property Value

Type
System.Action<CrosshairMoveEventArgs>

Remarks

The System.Action<> 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

public Action<DataEditingEventArgs> OnDataEdit { get; set; }

Property Value

Type
System.Action<DataEditingEventArgs>

Remarks

The System.Action<> 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

public Action<DataEditingEventArgs> OnDataEditCompleted { get; set; }

Property Value

Type
System.Action<DataEditingEventArgs>

Remarks

The System.Action<> 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

public Action<TextRenderEventArgs> OnDataLabelRender { get; set; }

Property Value

Type
System.Action<TextRenderEventArgs>

Remarks

The System.Action<> 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

public Action<ExportEventArgs> OnExportComplete { get; set; }

Property Value

Type
System.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

public EventCallback<LegendClickEventArgs> OnLegendClick { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<LegendClickEventArgs>

Remarks

The System.Action<> 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

public Action<LegendRenderEventArgs> OnLegendItemRender { get; set; }

Property Value

Type
System.Action<LegendRenderEventArgs>

Remarks

The System.Action<> 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

public Action<MultiLevelLabelClickEventArgs> OnMultiLevelLabelClick { get; set; }

Property Value

Type
System.Action<MultiLevelLabelClickEventArgs>

Remarks

The System.Action<> 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

public EventCallback<PointEventArgs> OnPointClick { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<PointEventArgs>

Remarks

The System.Action<> 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

public Action<PointRenderEventArgs> OnPointRender { get; set; }

Property Value

Type
System.Action<PointRenderEventArgs>

Remarks

The System.Action<> 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

public Action OnPrintComplete { get; set; }

Property Value

Type
System.Action

Remarks

The System.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

public Action<ScrollEventArgs> OnScrollChanged { get; set; }

Property Value

Type
System.Action<ScrollEventArgs>

Remarks

The System.Action<> 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

public Action<SelectionCompleteEventArgs> OnSelectionChanged { get; set; }

Property Value

Type
System.Action<SelectionCompleteEventArgs>

Remarks

The System.Action<> 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

public Action<SeriesRenderEventArgs> OnSeriesRender { get; set; }

Property Value

Type
System.Action<SeriesRenderEventArgs>

Remarks

The System.Action<> 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

public Action<ZoomingEventArgs> OnZoomEnd { get; set; }

Property Value

Type
System.Action<ZoomingEventArgs>

Remarks

The System.Action<> 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
    }
}

OnZooming

An event that is raised during the zooming operation.

Declaration

public Action<ZoomingEventArgs> OnZooming { get; set; }

Property Value

Type
System.Action<ZoomingEventArgs>

Remarks

The System.Action<> 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;
    }
}

OnZoomStart

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

Declaration

public Action<ZoomingEventArgs> OnZoomStart { get; set; }

Property Value

Type
System.Action<ZoomingEventArgs>

Remarks

The System.Action<> 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;
    }
}

SharedTooltipRender

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

Declaration

public Action<SharedTooltipRenderEventArgs> SharedTooltipRender { get; set; }

Property Value

Type
System.Action<SharedTooltipRenderEventArgs>

Remarks

The System.Action<> 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

public Action<ResizeEventArgs> SizeChanged { get; set; }

Property Value

Type
System.Action<ResizeEventArgs>

Remarks

The System.Action<> 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

public Action<TooltipRenderEventArgs> TooltipRender { get; set; }

Property Value

Type
System.Action<TooltipRenderEventArgs>

Remarks

The System.Action<> 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";}
}