Events in Blazor Charts Component
17 Feb 202224 minutes to read
In this section, we have provided a list of chart component events that will be triggered for appropriate chart actions.
The events should be provided to the chart using ChartEvents component.
From
v18.4.*
, we have added few additional events for the chart component
Event Name |
---|
OnZoomStart |
OnZoomEnd |
OnLegendItemRender |
OnDataLabelRender |
OnPointRender |
OnAxisLabelRender |
OnAxisLabelClick |
OnAxisActualRangeCalculated |
OnAxisMultiLevelLabelRender |
From
v18.4.*
, some event names are different from the previous releases. The following are the event name changes fromv18.3.*
tov18.4.*
Event Name(v18.3.* ) |
Event Name(v18.4.* ) |
---|---|
Resized | SizeChanged |
ScrollChanged | OnScrollChanged |
OnScrollEnd | OnScrollChanged |
OnScrollStart | OnScrollChanged |
AfterExport | OnExportComplete |
OnPrint | OnPrintComplete |
DragStart | OnDataEdit |
DragEnd | OnDataEditCompleted |
LegendClick | OnLegendClick |
MultiLevelLabelClick | OnMultiLevelLabelClick |
OnSelectionComplete | OnSelectionChanged |
OnDragComplete | OnSelectionChanged |
From
v18.4.*
, We have removed the following previous release events from chart component
Event Name |
---|
OnAnimationComplete |
OnChartMouseClick |
OnChartMouseDown |
OnChartMouseLeave |
OnChartMouseMove |
OnChartMouseUp |
PointMoved |
BeforeExport |
Load |
OnPointDoubleClick |
PointMoved |
OnZoomStart
After the zoom selection is made, the OnZoomStart event is triggered.
Arguments
The following property is available in the ZoomingEventArgs.
- AxisCollection – Specifies the collection of the axis.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartEvents OnZoomStart="OnZoomingEvent"></ChartEvents>
<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 class SalesInfo
{
public string Month { get; set; }
public double SalesValue { get; set; }
}
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 OnZoomingEvent(ZoomingEventArgs args)
{
// Here, you can customize your code.
}
}
OnZoomEnd
OnZoomEnd event triggers after the zoom selection is completed.
Arguments
The following property is available in the ZoomingEventArgs.
- AxisCollection – Specifies the collection of the axis.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartEvents OnZoomEnd="OnZoomingEvent"></ChartEvents>
<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 class SalesInfo
{
public string Month { get; set; }
public double SalesValue { get; set; }
}
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 OnZoomingEvent(ZoomingEventArgs args)
{
// Here, you can customize your code.
}
}
OnZooming
OnZooming event triggers after the zoom selection is completed.
Arguments
The following property is available in the ZoomingEventArgs.
- AxisCollection – Specifies the collection of the axis.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartEvents OnZooming="OnZoomingEvent"></ChartEvents>
<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 class SalesInfo
{
public string Month { get; set; }
public double SalesValue { get; set; }
}
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 OnZoomingEvent(ZoomingEventArgs args)
{
// Here, you can customize your code.
}
}
OnLegendItemRender
OnLegendItemRender event triggers before the legend is rendered.
Arguments
The following properties are available in the LegendRenderEventArgs.
- Fill – Specifies the fill color of the legend item’s icon.
- MarkerShape – Specifies the shape of the marker.
- Shape – Specifies the shape of the legend item’s icon.
- Text – Specifies the text to be displayed in the legend item.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartEvents OnLegendItemRender="LegendEvent"></ChartEvents>
<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 class SalesInfo
{
public string Month { get; set; }
public double SalesValue { get; set; }
}
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 LegendEvent(LegendRenderEventArgs args)
{
// Here, you can customize your code.
}
}
OnDataLabelRender
OnDataLabelRender event triggers before the data label for series is rendered.
Arguments
The following properties are available in the TextRenderEventArgs.
- Border – Specifies the color and the width of the data label border.
- Color – Specifies the text color of the data label.
- Font – Specifies the font information of the data label.
- Template – Provides information about the data point to be used in the data label template.
- Text – Specifies the text to be displayed in the data label.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartEvents OnDataLabelRender="DataLabelEvent"></ChartEvents>
<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 class SalesInfo
{
public string Month { get; set; }
public double SalesValue { get; set; }
}
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 DataLabelEvent(TextRenderEventArgs args)
{
// Here, you can customize your code.
}
}
OnPointRender
OnPointRender event triggers before each point for the series is rendered.
Arguments
The following properties are available in the PointRenderEventArgs.
- Border – Specifies the color and the width of the point border.
- Fill – Specifies the fill color of the point.
- Height – Specifies the current point’s height.
- Shape – Specifies the marker shape of the point.
- Width – Specifies the current point’s width.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartEvents OnPointRender="PointRenderEvent"></ChartEvents>
<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 class SalesInfo
{
public string Month { get; set; }
public double SalesValue { get; set; }
}
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 PointRenderEvent(PointRenderEventArgs args)
{
// Here, you can customize your code.
}
}
OnAxisLabelRender
OnAxisLabelRender event triggers before each axis label is rendered.
Arguments
The following properties are available in the AxisLabelRenderEventArgs.
- LabelStyle – Specifies the font information of the axis label.
- Text – Specifies the text to be displayed in the axis label.
- Value – Specifies the value of the axis label.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartEvents OnAxisLabelRender="AxisLabelEvent"></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 { get; set; }
public double SalesValue { get; set; }
}
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 AxisLabelEvent(AxisLabelRenderEventArgs args)
{
// Here, you can customize your code.
}
}
OnAxisLabelClick
OnAxisLabelClick event triggers when x axis label is clicked.
Arguments
The following fields are available in the AxisLabelClickEventArgs.
- Axis – Specifies the current axis.
- Chart – Specifies the chart instance.
- Index – Specifies the index of the axis label.
- LabelID – Specifies the current axis label’s element id.
- Location – Specifies the location of the axis label.
- Text – Specifies the text of the axis label.
- Value – Specifies the value of the axis label.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartEvents OnAxisLabelClick="AxisLabelClickEvent"></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 { get; set; }
public double SalesValue { get; set; }
}
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 AxisLabelClickEvent(AxisLabelClickEventArgs args)
{
// Here, you can customize your code.
}
}
OnAxisActualRangeCalculated
OnAxisActualRangeCalculated event triggers before each axis range is calculated.
Arguments
The following properties are available in the AxisRangeCalculatedEventArgs.
- Interval – Specifies the current interval of the axis.
- Maximum – Specifies the current maximum value of the axis.
- Minimum – Specifies current minimum value of the axis.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartEvents OnAxisActualRangeCalculated="AxisActualRangeEvent"></ChartEvents>
<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 class SalesInfo
{
public string Month { get; set; }
public double SalesValue { get; set; }
}
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 AxisActualRangeEvent(AxisRangeCalculatedEventArgs args)
{
// Here, you can customize your code.
}
}
OnAxisMultiLevelLabelRender
OnAxisMultiLevelLabelRender event triggers while rendering multilevellabels.
Arguments
The following properties are available in the AxisMultiLabelRenderEventArgs.
- Alignment – Specifies the alignment of the axis label.
- Text – Specifies the text to be displayed in the axis label.
- TextStyle – Specifies the text style of the axis label.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartEvents OnAxisMultiLevelLabelRender="AxisMultiLevelLabelEvent"></ChartEvents>
<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 class SalesInfo
{
public string Month { get; set; }
public double SalesValue { get; set; }
}
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 AxisMultiLevelLabelEvent(AxisMultiLabelRenderEventArgs args)
{
// Here, you can customize your code.
}
}
SizeChanged
SizeChanged event triggers after resizing the chart.
Arguments
The following fields are available in the ResizeEventArgs.
- CurrentSize – Specifies the current size of the chart.
- PreviousSize – Specifies the previous size of the chart.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartEvents SizeChanged="@SizeChangedEvent"></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 { get; set; }
public double SalesValue { get; set; }
}
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 SizeChangedEvent(ResizeEventArgs args)
{
// Here, you can customize your code.
}
}
OnScrollChanged
OnScrollChanged event triggers while scrolling the chart.
Arguments
The following properties are available in the ScrollEventArgs.
- Axis – Specifies the current axis that is scrolled.
- CurrentRange – Specifies the current range of the axis.
- PreviousAxisRange – Specifies the current axis.
- PreviousRange – Specifies the previous range of the axis.
- PreviousZoomFactor – Specifies the previous zoom factor value.
- PreviousZoomPosition – Specifies the previous zoom position value.
- Range – Specifies the range of the axis.
- ZoomFactor – Specifies the current zoom factor value.
- ZoomPosition – Specifies the current zoom position value.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartEvents OnScrollChanged="ScrollChangeEvent"></ChartEvents>
<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 class SalesInfo
{
public string Month { get; set; }
public double SalesValue { get; set; }
}
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 ScrollChangeEvent(ScrollEventArgs args)
{
// Here, you can customize your code.
}
}
OnExportComplete
OnExportComplete event triggers after exporting the chart.
Arguments
The following field is available in the ExportEventArgs.
- DataUrl – Specifies the DataUrl of the exported file.
@using Syncfusion.Blazor.Charts
<button class="btn-success" @onclick="Export">Export</button>
<SfChart @ref="chart">
<ChartEvents OnExportComplete="ExportCompleteEvent"></ChartEvents>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
</ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code{
SfChart chart;
public class SalesInfo
{
public string Month { get; set; }
public double SalesValue { get; set; }
}
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 Export()
{
chart.Export(ExportType.JPEG, "Charts");
}
public void ExportCompleteEvent(ExportEventArgs args)
{
// Here, you can customize your code.
}
}
OnDataEdit
OnDataEdit event triggers while dragging the data point.
Arguments
The following fields are available in the DataEditingEventArgs.
- NewValue – Specifies the new value of the current point.
- OldValue – Specifies the previous value of the current point.
- Point – Specifies the current point which is being edited.
- PointIndex – Specifies the index of the current point.
- Series – Specifies the current chart series whose point is being edited.
- SeriesIndex – Specifies the index of the current series.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartEvents OnDataEdit="DataEditEvent"></ChartEvents>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
</ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
<ChartDataEditSettings Enable="true"></ChartDataEditSettings>
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code{
public class SalesInfo
{
public string Month { get; set; }
public double SalesValue { get; set; }
}
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 DataEditEvent(DataEditingEventArgs arg)
{
// Here, you can customize your code.
}
}
OnDataEditCompleted
OnDataEditCompleted event triggers when the point drag is completed.
Arguments
The following fields are available in the DataEditingEventArgs.
- NewValue – Specifies the new value of the current point.
- OldValue – Specifies the previous value of the current point.
- Point – Specifies the current point which is being edited.
- PointIndex – Specifies the index of the current point.
- Series – Specifies the current chart series whose point is being edited.
- SeriesIndex – Specifies the index of the current series.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartEvents OnDataEditCompleted="DataEditEvent"></ChartEvents>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
</ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
<ChartDataEditSettings Enable="true"></ChartDataEditSettings>
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code{
public class SalesInfo
{
public string Month { get; set; }
public double SalesValue { get; set; }
}
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 DataEditEvent(DataEditingEventArgs arg)
{
// Here you can customize your code
}
}
OnLegendClick
OnLegendClick event triggers after legend click.
Arguments
The following properties are available in the LegendClickEventArgs.
- LegendShape – Specifies the shape of the legend item.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartEvents OnLegendClick="LegendClickEvent"></ChartEvents>
<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 class SalesInfo
{
public string Month { get; set; }
public double SalesValue { get; set; }
}
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 LegendClickEvent(LegendClickEventArgs args)
{
// Here, you can customize your code.
}
}
OnMultiLevelLabelClick
OnMultiLevelLabelClick event triggers after clicking on multilevellabelclick.
Arguments
The following fields are available in the MultiLevelLabelClickEventArgs.
- Axis – Specifies the axis of the clicked label.
- CustomAttributes – Specifies the custom objects for multi level labels.
- End – Specifies the end value of the multi level labels.
- Level – Specifies the current level of the label.
- Start – Specifies the start value of the multi level labels
- Text – Specifies the text of the current label.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartEvents OnMultiLevelLabelClick="MultiLabelClickEvent"></ChartEvents>
<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 class SalesInfo
{
public string Month { get; set; }
public double SalesValue { get; set; }
}
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 MultiLabelClickEvent(MultiLevelLabelClickEventArgs args)
{
// Here, you can customize your code.
}
}
OnSelectionChanged
OnSelectionChanged event triggers after the selection is completed.
Arguments
The following property is available in the SelectionCompleteEventArgs.
- SelectedDataValues – Specifies the selected Data X, Y values.
@using Syncfusion.Blazor.Charts
<SfChart SelectionMode="SelectionMode.Point">
<ChartEvents OnSelectionChanged="SelectionChangedEvent"></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 { get; set; }
public double SalesValue { get; set; }
}
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 SelectionChangedEvent(SelectionCompleteEventArgs args)
{
// Here, you can customize your code.
}
}
Loaded
Loaded
event triggers after chart load.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartEvents Loaded="LoadedEvent"></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 { get; set; }
public double SalesValue { get; set; }
}
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 LoadedEvent(LoadedEventArgs args)
{
// Here, you can customize your code.
}
}
OnPointClick
OnPointClick event triggers on point click.
Arguments
The following fields are available in the PointEventArgs.
- Chart – Specifies the current chart instance.
- PageX – Specifies the current window page x location.
- PageY – Specifies the current window page y location.
- Point – Specifies the current point which is clicked.
- PointIndex – Specifies the index of the current point.
- Series – Specifies the current series.
- SeriesIndex – Specifies the current series index.
- X – Specifies the x coordinate of the current mouse click.
- Y – Specifies the y coordinate of the current mouse click.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartEvents OnPointClick="PointClickEvent"></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 { get; set; }
public double SalesValue { get; set; }
}
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 PointClickEvent(PointEventArgs args)
{
// Here, you can customize your code.
}
}
TooltipRender
TooltipRender event triggers before the tooltip for series is rendered.
Arguments
The following properties are available in the TooltipRenderEventArgs.
- HeaderText – Specifies the header text for the tooltip.
- Text – Specifies the text for the tooltip.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartEvents TooltipRender="TooltipEvent"></ChartEvents>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
</ChartSeries>
</ChartSeriesCollection>
<ChartTooltipSettings Enable="true"></ChartTooltipSettings>
</SfChart>
@code{
public class SalesInfo
{
public string Month { get; set; }
public double SalesValue { get; set; }
}
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 TooltipEvent(TooltipRenderEventArgs args)
{
// Here, you can customize your code.
}
}
SharedTooltipRender
SharedTooltipRender event triggers before the sharedtooltip for series is rendered.
Arguments
The following properties are available in the SharedTooltipRenderEventArgs.
- HeaderText – Specifies the header text for the tooltip.
- Text – Specifies the text for the tooltip.
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartEvents SharedTooltipRender="SharedTooltipEvent"></ChartEvents>
<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 class SalesInfo
{
public string Month { get; set; }
public double SalesValue { get; set; }
}
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 SharedTooltipEvent(SharedTooltipRenderEventArgs args)
{
// Here, you can customize your code.
}
}
Refer to our Blazor Charts feature tour page for its groundbreaking feature representations and also explore our Blazor Chart Example to know various chart types and how to represent time-dependent data, showing trends at equal intervals.