Class SfChart

Handles the events related to chart rendering and customization.

Inheritance
System.Object
SfBaseComponent
Syncfusion.Blazor.Toolkit.Data.SfDataBoundComponent
SfChart
Implements
System.IAsyncDisposable
Microsoft.AspNetCore.Components.IHandleEvent
Inherited Members
Namespace: Syncfusion.Blazor.Toolkit.Charts
Assembly: Syncfusion.Blazor.Toolkit.dll
Syntax
public class SfChart : SfDataBoundComponent, IAsyncDisposable, ISubcomponentTracker, IHandleEvent

Constructors

SfChart()

Declaration
public SfChart()

Properties

AccessibilityDescription

Gets or sets the accessibility description for the SfChart component.

Declaration
public string AccessibilityDescription { get; set; }
Property Value
Type Description
System.String

Accepts a string that defines the accessibility description for the SfChart component. The default value is an empty string.
Remarks

Use this property to provide an accessibility description for the SfChart component.

Examples
// This example demonstrates how to set the accessibility description for a Syncfusion Blazor Chart.
<SfChart AccessibilityDescription="Chart Description">
</SfChart>

AccessibilityRole

Gets or sets the accessibility role for the SfChart component.

Declaration
public string AccessibilityRole { get; set; }
Property Value
Type Description
System.String

Accepts a string that defines the accessibility role for the SfChart component. The default value is null.
Remarks

Use this property to provide an accessibility role for the SfChart component.

Examples
// This example demonstrates how to set the accessibility role for a Syncfusion Blazor Chart.
<SfChart AccessibilityRole="Chart Description">
</SfChart>

AllowMultiSelection

Gets or sets a value indicating whether multiple selection is enabled in the chart.

Declaration
public bool AllowMultiSelection { get; set; }
Property Value
Type Description
System.Boolean

true if multiple selection can be enabled; otherwise, false. The default value is false.
Remarks

This property is applicable only when ChartSelectionMode is applied. Enabling this property allows the selection of multiple points or series (based on the ChartSelectionMode applied).

Examples
// This example demonstrates how to enable multiple series selection with a triangle pattern in a Syncfusion Blazor Chart.
<SfChart SelectionMode="ChartSelectionMode.Series" SelectionPattern="SelectionPattern.Triangle" AllowMultiSelection="true">
    <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
</SfChart>

Background

Gets or sets the background color of the chart.

Declaration
public string Background { get; set; }
Property Value
Type Description
System.String

A string value specifying the background color of the chart. The default background color is determined by the chart's theme. By default, the theme is set to Fluent with a background color of #FFFFFF.
Remarks

The value can be specified in hex or rgba format, following valid CSS color string conventions.

Examples
// This example demonstrates how to set the background color of the chart.
<SfChart Background="red"></SfChart>

BackgroundImage

Gets or sets the background image for the chart.

Declaration
public string BackgroundImage { get; set; }
Property Value
Type Description
System.String

A string representing the URL or path to the background image. The default value is an empty string.
Remarks

This property is used to set a background image for the chart to enhance the visual representation of the data.

Examples
// This example demonstrates how to set a background image in a Syncfusion Blazor Chart.
<SfChart BackgroundImage="https://example.com/image.png">
</SfChart>

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 ChartMouseClick="OnMouseEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
    </ChartSeries>
    <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 ChartMouseDown="OnMouseEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
    </ChartSeries>
    <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 ChartMouseMove="OnMouseEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
    </ChartSeries>
    <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 ChartMouseUp="OnMouseEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
    </ChartSeries>
    <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}");
    }
}

CustomClass

Gets or sets the custom class for the chart.

Declaration
public string CustomClass { get; set; }
Property Value
Type Description
System.String

A string representing the custom class. The default value is an empty string.
Remarks

The provided custom class will be appended to the chart element, allowing customization of the element style.

Examples

The following example demonstrates how to customize the chart element style using a custom class:

 

<SfChart CustomClass="@customClass"> 
    <!-- Other chart configurations -->  
</SfChart> 
<style> 
   .chartcustomclass { 
       width: 100%; 
   } 
</style> 
@code {  
    string customClass = "chartcustomclass"; 
}

DataSource

Gets or sets the data source for the chart.

Declaration
public IEnumerable<object> DataSource { get; set; }
Property Value
Type Description
System.Collections.Generic.IEnumerable<System.Object>

An IEnumerable<object> collection representing the data source for the chart.
Remarks

Accepts a collection of objects such as JSON objects, ExpandoObject, DynamicDictionary, ObservableCollection, or an instance of DataManager.

Examples
// This example demonstrates how to bind a data source directly to the SfChart component in a Syncfusion Blazor Chart.
<SfChart DataSource="@WeatherReports">
    <ChartSeries XName="X" YName="Y" Type="ChartSeriesType.Column" />
</SfChart>

EnableAdaptiveRendering

Gets or sets a value indicating whether adaptive rendering is enabled for the SfChart component.

Declaration
public bool EnableAdaptiveRendering { get; set; }
Property Value
Type Description
System.Boolean

A boolean value that enables or disables adaptive rendering for the SfChart component. The default value is false.
Remarks

When adaptive rendering is enabled, the chart will render with optimized elements based on the device resolution. This setting may override certain chart element properties such as titles, axis labels, axis titles, data labels, and legends. For example, when the screen size is 300x300, axis labels may move inside, axis titles may be hidden, and the legend position may adjust to fit the screen size, among other changes.

Examples
// This example demonstrates how to enable adaptive rendering in a Syncfusion Blazor Chart.
<SfChart EnableAdaptiveRendering="true" Height="300" Width="300" Title="chart">
    <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
</SfChart>

EnableAnimation

Gets or sets the value that indicates whether animation is enabled for the chart.

Declaration
public bool EnableAnimation { get; set; }
Property Value
Type Description
System.Boolean

true if animation is enabled; otherwise, false. The default value is true.
Remarks

If set to true, chart elements such as series, axis, axis labels, major and minor gridlines, major and minor ticklines will be animated.

Examples
// This example demonstrates how to enable animation in a Syncfusion Blazor Chart.
<SfChart EnableAnimation="true">
    <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
</SfChart>

EnableAutoIntervalOnBothAxis

Gets or sets whether both axis intervals should be calculated automatically with respect to the zoomed range.

Declaration
public bool EnableAutoIntervalOnBothAxis { get; set; }
Property Value
Type Description
System.Boolean

true if the intervals for both axes should be calculated automatically based on the zoom range; otherwise, false. The default value is false.
Remarks

This property affects axis intervals only when the chart is zoomed.

Examples
// This example demonstrates how to enable automatic interval adjustment on both axes.
<SfChart EnableAutoIntervalOnBothAxis="true">
    <ChartZoomSettings ToolbarDisplayMode="ToolbarMode.Always"></ChartZoomSettings>
    <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
</SfChart>

EnableSideBySidePlacement

Gets or sets a value indicating whether to enable side-by-side placement of series.

Declaration
public bool EnableSideBySidePlacement { get; set; }
Property Value
Type Description
System.Boolean

true if side-by-side placement can be enabled; otherwise, false. The default value is true.
Remarks

This property is applicable only for the below mentioned chart series types:

  • Column
  • Range Column
  • Bar
  • Box and Whisker
  • Waterfall
  • Histogram
Examples
// This example demonstrates how to disable side-by-side placement for column series in a chart.
<SfChart EnableSideBySidePlacement="false">
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" Type="ChartSeriesType.Column" />
    <ChartSeries DataSource="@Data" XName="XValue" YName="Y1Value" Type="ChartSeriesType.Column" />
</SfChart>

Focusable

Gets or sets the accessibility keyboard navigation focus option for the SfChart component.

Declaration
public bool Focusable { get; set; }
Property Value
Type Description
System.Boolean

Accepts the boolean value to enable or disable the keyboard navigation for the SfChart component. The default value is true.
Remarks

Use this property to toggle the keyboard navigation focus for the SfChart component.

Examples
// This example demonstrates how to set the accessibility keyboard navigation focus for a Syncfusion Blazor Chart.
<SfChart Focusable="true">
</SfChart>

FocusBorderColor

Gets or sets the focus border color for the SfChart component.

Declaration
public string FocusBorderColor { get; set; }
Property Value
Type Description
System.String

Accepts a string that defines the focus border color for the SfChart component. The default value is null.
Remarks

Use this property to customize the focus border color for the SfChart component. By default, the focus border color is set based on the theme. This FocusBorderColor property is only applicable when the Focusable property is set to true.

Examples
// This example demonstrates how to enable focus and customize the focus border color in a Syncfusion Blazor Chart.
<SfChart Focusable="true" FocusBorderWidth="2" FocusBorderColor="red" />

FocusBorderMargin

Gets or sets the focus border margin for the SfChart component.

Declaration
public double FocusBorderMargin { get; set; }
Property Value
Type Description
System.Double

Accepts a double value in pixels that defines the focus border margin for the SfChart component. The default value is 0.
Remarks

Use this property to customize the focus border margin for the SfChart component. This FocusBorderMargin property is only applicable when the Focusable property is set to true.

Examples
// This example demonstrates how to set focus border margin in a Syncfusion Blazor Chart.
<SfChart Focusable="true" FocusBorderMargin="5" />

FocusBorderWidth

Gets or sets the focus border width for the SfChart component.

Declaration
public double FocusBorderWidth { get; set; }
Property Value
Type Description
System.Double

Accepts a double value in pixels that defines the focus border width for the SfChart component. The default value is 1.5.
Remarks

Use this property to customize the focus border width for the SfChart component. This FocusBorderWidth property is only applicable when the Focusable property is set to true.

Examples
// This example demonstrates how to enable focus and customize the focus border width in a Syncfusion Blazor Chart.
<SfChart Focusable="true" FocusBorderWidth="2" FocusBorderColor="red" />

Height

Gets or sets the height of the chart as a string.

Declaration
public string Height { get; set; }
Property Value
Type Description
System.String

The height of the chart as a string value. The default value is ”100%”.
Remarks

Accepts input as either pixel or percentage. If specified as '100%', the chart renders to the full height of its parent element.

Examples
// This example demonstrates how to set the height of a Syncfusion Blazor Chart.
<SfChart Height="400px">
</SfChart>

HighlightColor

Gets or sets the highlight color for the chart.

Declaration
public string HighlightColor { get; set; }
Property Value
Type Description
System.String

A string representing the highlight color. Accepts valid CSS color string values.
Remarks

Applicable only when HighlightMode is applied. Chart points, series or a cluster of points (based on the HighlightMode applied and chart series type) will be displayed in the provided HighlightColor when the user hovers over them.

Examples
// This example demonstrates how to enable series highlight color in a Syncfusion Blazor Chart.
<SfChart HighlightColor="blue" HighlightMode="HighlightMode.Series">
    <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
</SfChart>

HighlightMode

Gets or sets the highlight mode of the chart component.

Declaration
public HighlightMode HighlightMode { get; set; }
Property Value
Type Description
HighlightMode

One of the HighlightMode enumeration that specifies the highlight mode of the chart component. The options include:

  • None: No highlighting will occur.
  • Series: Series will be highlighted when hovered.
  • Point: Point will be highlighted when hovered.
  • Cluster: A cluster of points in all series that correspond to the same index will be highlighted when hovered.
    The default value is HighlightMode.None.
Remarks

This property determines how the chart elements will be highlighted based on user interaction, enhancing the visual feedback during data exploration.

Examples
// This example demonstrates how to enable series highlighting in a Syncfusion Blazor Chart.
<SfChart HighlightColor="true" HighlightMode="HighlightMode.Series">
    <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
</SfChart>

HighlightPattern

Gets or sets the highlight pattern of the chart component.

Declaration
public SelectionPattern HighlightPattern { get; set; }
Property Value
Type Description
SelectionPattern

One of the SelectionPattern enumeration that specifies the highlighting patterns. The default value is SelectionPattern.None.
Remarks

The provided pattern will be displayed on points, series, or a cluster of points (based on the HighlightMode applied).

Examples
// This example demonstrates how to highlight a series with a triangle pattern in a Syncfusion Blazor Chart.
<SfChart HighlightMode="HighlightMode.Series" HighlightPattern="SelectionPattern.Triangle">
    <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
</SfChart>

ID

Gets or sets the ID of the chart component.

Declaration
public string ID { get; set; }
Property Value
Type Description
System.String

A string representing the ID of the chart component.
Remarks

This property is used to uniquely identify the chart component in the DOM.

Examples
// This example demonstrates how to set an ID for a Syncfusion Blazor Chart.
<SfChart ID="Chart" />

IsTransposed

Gets or sets whether the chart should be rendered in a transposed manner.

Declaration
public bool IsTransposed { get; set; }
Property Value
Type Description
System.Boolean

true if transposing can be enabled; otherwise, false. The default value is false.
Remarks

If set to true, the chart will be rendered in a transposed manner with the horizontal axis placed as the vertical axis and vice versa.

Examples
// This example demonstrates how to render a transposed column chart.
<SfChart IsTransposed="true">
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" Type="ChartSeriesType.Column" />
</SfChart>

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 Loaded="LoadedEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
    </ChartSeries>
</SfChart>

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

NoDataTemplate

Specifies the template to be displayed when the chart has no data.

Declaration
public RenderFragment NoDataTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment

Accepts a Microsoft.AspNetCore.Components.RenderFragment that allows rendering custom content when the chart has no data.
Remarks

This template enables users to display customized messages, images, or other UI elements in place of an empty chart. It provides a better user experience by offering context when no data points are available.

Examples
<SfChart>
    <NoDataTemplate>
        <div>No data available to display.</div>
    </NoDataTemplate>
</SfChart>

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 OnAxisActualRangeCalculated="AxisActualRangeEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        <ChartMarker Visible="true">
        </ChartMarker>
    </ChartSeries>
</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 OnAxisLabelClick="AxisLabelClickEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
    </ChartSeries>
</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 OnAxisLabelRender="AxisLabelEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category" />
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" />
</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 OnAxisMultiLevelLabelRender="AxisMultiLevelLabelEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.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>
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        <ChartMarker Visible="true">
        </ChartMarker>
    </ChartSeries>
</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 OnCrosshairMove="OnCrosshairMove">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.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>
    <ChartSeries DataSource="@SalesDetails" XName="X" YName="Y" Type="ChartSeriesType.Line">
    </ChartSeries>
</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 OnDataEdit="OnDataEdit">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.DateTime" />
    <ChartPrimaryYAxis LabelFormat="{value}%" RangePadding="ChartRangePadding.None" Minimum="0" Maximum="100" Interval="20" />
    <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>
</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 OnDataEditCompleted="OnDataEditCompleted">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.DateTime" />
    <ChartPrimaryYAxis LabelFormat="{value}%" RangePadding="ChartRangePadding.None" Minimum="0" Maximum="100" Interval="20" />
    <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>
</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 OnDataLabelRender="DataLabelEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        <ChartMarker>
            <ChartDataLabel Visible="true"></ChartDataLabel>
        </ChartMarker>
    </ChartSeries>
</SfChart>

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

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 OnLegendClick="LegendClickEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <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>
</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 OnLegendItemRender="LegendEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <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>
</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 OnMultiLevelLabelClick="MultiLabelClickEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.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>
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        <ChartMarker Visible="true"></ChartMarker>
    </ChartSeries>
</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 OnPointClick="PointClickEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
    </ChartSeries>
</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 OnPointRender="PointRenderEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
        <ChartMarker Visible="true">
        </ChartMarker>
    </ChartSeries>
</SfChart>

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

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 OnScrollChanged="ScrollChangeEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category" ZoomFactor="0.5" ZoomPosition="0.2">
        <ChartAxisScrollbarSettings Enable="true"></ChartAxisScrollbarSettings>
    </ChartPrimaryXAxis>
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
    </ChartSeries>
</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" OnSelectionChanged="OnSelectionChanged">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category">
    </ChartPrimaryXAxis>
    <ChartLegendSettings Visible="true" ToggleVisibility="true">
    </ChartLegendSettings>
    <ChartSeries DataSource="@MedalDetails" XName="Country" YName="Gold"
                 Type="ChartSeriesType.Column" SelectionStyle="chartSelection1" />
</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 OnSeriesRender="OnSeriesRenderEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
    </ChartSeries>
    <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 OnZoomEnd="OnZoomingEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
    </ChartSeries>
    <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 OnZoomStart="OnZoomingEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
    </ChartSeries>
    <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 OnZoomStart="OnZoomingEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
    </ChartSeries>
    <ChartZoomSettings EnableSelectionZooming="true"></ChartZoomSettings>
</SfChart>

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

Palettes

Gets or sets the palette for the chart series.

Declaration
public string[] Palettes { get; set; }
Property Value
Type Description
System.String[]

Accepts a string array that specifies the palette for chart series. The default value is an empty string array.
Remarks

Multiple series will be applied with fill color based on the order of values in the palette array.

Examples
// This example demonstrates how to apply a custom color palette to a Syncfusion Blazor Chart.
<SfChart Palettes='new string[]{"red", "blue"}'>
   <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
   <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" />
</SfChart>

SelectionMode

Gets or sets the selection mode of the chart component.

Declaration
public ChartSelectionMode SelectionMode { get; set; }
Property Value
Type Description
ChartSelectionMode

One of the SelectionMode enumerations that specifies the selection mode of the chart component. The options include:

  • None: No selection will occur.
  • Series: Selects a series.
  • Point: Selects a single point.
  • Cluster: Selects the points in all series that correspond to the same index.
    The default value is ChartSelectionMode.None.
Remarks

This property determines how the user can select elements within the chart, which can enhance user interaction and data analysis.

Examples
// This example demonstrates how to enable drag-to-select functionality in a Syncfusion Blazor Chart.
<SfChart SelectionMode="ChartSelectionMode.DragXY">
    <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
</SfChart>

SelectionPattern

Gets or sets the selection pattern of the chart component.

Declaration
public SelectionPattern SelectionPattern { get; set; }
Property Value
Type Description
SelectionPattern

One of the SelectionPattern enumerations that specifies the selecting patterns. The default value is SelectionPattern.None.
Remarks

The provided pattern will be displayed on points, series, or a cluster of points (based on the ChartSelectionMode applied).

Examples
// This example demonstrates how to apply a triangle selection pattern to a series in a Syncfusion Blazor Chart.
<SfChart SelectionMode="ChartSelectionMode.Series" SelectionPattern="SelectionPattern.Triangle">
    <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
</SfChart>

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 SharedTooltipRender="SharedTooltipEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
    </ChartSeries>
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
    </ChartSeries>
    <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 SizeChanged="@SizeChangedEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
    </ChartSeries>
</SfChart>

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

SubTitle

Gets or sets the subtitle of the chart component.

Declaration
public string SubTitle { get; set; }
Property Value
Type Description
System.String

A string representing the subtitle of the chart. The default value is an empty string.
Remarks

Applicable only when Title is provided.

Examples
// This example demonstrates how to set the subtitle of a Syncfusion Blazor Chart.
<SfChart Title="Chart Title" SubTitle="Chart SubTitle">
</SfChart>

TabIndex

Gets or sets the tabindex of the chart title for accessibility purposes.

Declaration
public double TabIndex { get; set; }
Property Value
Type Description
System.Double

A double value representing the tab index of the chart title. The default value is 0.
Remarks

This property determines the order in which the chart title receives focus when navigating through the chart elements.

Examples
// This example demonstrates how to set the tab index of a Syncfusion Blazor Chart component.
<SfChart TabIndex="1">
    <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
</SfChart>

Theme

Gets or sets the theme for the chart.

Declaration
public Theme Theme { get; set; }
Property Value
Type
Theme
Remarks

Chart element's color and text get modified, such as fill, font size, font family, and font style, which enhances the overall chart appearance based on the predefined theme applied.

Title

Gets or sets the title of the chart component.

Declaration
public string Title { get; set; }
Property Value
Type Description
System.String

A string representing the title of the chart. The default value is an empty string.
Remarks

This property is used to provide a title for the chart component, which will be displayed above the chart by default.

Examples
// This example demonstrates how to set the title of a Syncfusion Blazor Chart.
<SfChart Title="Chart Title">
</SfChart>

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 TooltipRender="TooltipEvent">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category" />
    <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
    </ChartSeries>
    <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
</SfChart>

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

UseGroupingSeparator

Gets or sets the option to enable the grouping separator for the numeric axis labels.

Declaration
public bool UseGroupingSeparator { get; set; }
Property Value
Type Description
System.Boolean

true if the grouping separator can be enabled; otherwise, false. The default value is false.
Remarks

If set to true, numeric axis labels will be rendered with a grouping separator. For example, 2000 will be rendered as 2,000.

Examples
// This example demonstrates how to use grouping separators for numeric values in a Syncfusion Blazor Chart.
<SfChart UseGroupingSeparator="true">
    <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
</SfChart>

Width

Gets or sets the width of the chart as a string.

Declaration
public string Width { get; set; }
Property Value
Type Description
System.String

The width of chart as string value.
Remarks

Accepts input as either pixel or percentage. If specified as '100%', the chart renders to the full width of its parent element.

Examples
// This example demonstrates how to set the Width of a Syncfusion Blazor Chart.
<SfChart Width="400px">
</SfChart>

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

ClearSelection()

Clears the selection applied to the chart.

Declaration
public void ClearSelection()
Remarks

This method clears all selections applied to the chart for all types of ChartSelectionMode.

Examples
<SfButton OnClick="ClearSelection" IsToggle="true" IsPrimary="true">ClearSelection</SfButton>
<SfChart @ref ="Chart">
   <ChartSelectedDataIndexes>
       @foreach(SelectedDataPoint data in SelectionData)
       {
           <ChartSelectedDataIndex Series="@data.seriesIndex" Point="@data.pointIndex">
           </ChartSelectedDataIndex>
       }
   </ChartSelectedDataIndexes>
   ...
</SfChart>
@code
{
   public SfChart Chart;
   public List<SelectedDataPoint> SelectionData = new List<SelectedDataPoint>
   {
       new SelectedDataPoint { seriesIndex = 0, pointIndex = 1 },
       new SelectedDataPoint { seriesIndex = 1, pointIndex = 3 }
   };
   public class SelectedDataPoint
   {
       public int seriesIndex { get; set; }
       public int pointIndex { get; set; }
   }
   public void ClearSelection()
   {
       Chart.ClearSelection();
   }
}

ClearSort()

Clears the sorting applied to the chart.

Declaration
public void ClearSort()
Examples
<SfButton OnClick="ClearSort" IsToggle="true" IsPrimary="true">ClearSort</SfButton>  
<SfChart @ref=”Chart” DataSource=”Data”>  
<ChartSorting PropertyName ="X" Direction ="ListSortDirection.Ascending "/> 
…  
</SfChart>

@code {  
public SfChart Chart; 
public void ClearSort() 
{ 
    Chart.ClearSort();
}
}

HideCrosshairAsync()

Hides the crosshair for the chart.

Declaration
public Task HideCrosshairAsync()
Returns
Type
System.Threading.Tasks.Task
Examples

This example demonstrates how to hide the crosshair.

<SfButton OnClick="HideCrosshair">Hide Crosshair</SfButton>
<SfChart @ref="Chart">
    <!-- Chart configuration -->
</SfChart>
@code {
    public SfChart Chart;

    void HideCrosshair()
    {
        Chart.HideCrosshairAsync();
    }
}

HideTooltipAsync()

Hides the tooltip for data points.

Declaration
public Task HideTooltipAsync()
Returns
Type
System.Threading.Tasks.Task
Examples

This example demonstrates how to hide the tooltip.

<SfButton OnClick="HideTooltip">Hide Tooltip</SfButton>
<SfChart @ref="Chart">
    <!-- Chart configuration -->
</SfChart>
@code {
    public SfChart Chart;
    void HideTooltip()
    {
        Chart.HideTooltipAsync();
    }
}

PreventRender(Boolean)

Prevents the Chart render. This method will internally sets value to be returned from ShouldRender method.

Declaration
public void PreventRender(bool preventRender = true)
Parameters
Type Name Description
System.Boolean preventRender

Default value is true. Once PreventRender(true) called, component won't re-render until PreventRender(false) called.

RefreshAsync(Boolean)

The method is used to re-render the chart.

Declaration
public Task RefreshAsync(bool shouldAnimate = true)
Parameters
Type Name Description
System.Boolean shouldAnimate

Specifies whether the chart should animate during refresh.
Returns
Type Description
System.Threading.Tasks.Task

An asynchronous task.
Remarks

This method is used to update the chart with new data and settings.

ShowCrosshairAsync(Double, Double)

Displays a crosshair based on the coordinates of the SfChart.

Declaration
public Task ShowCrosshairAsync(double x, double y)
Parameters
Type Name Description
System.Double x

Specifies the x-coordinate on the chart.
System.Double y

Specifies the y-coordinate on the chart.
Returns
Type
System.Threading.Tasks.Task
Remarks

If the parameter values for 'x' and 'y' are not provided, this method will be unable to determine the position of the crosshair, and the crosshair will not be displayed. It is essential to provide valid 'x' and 'y' coordinates for this method to work as expected and show the crosshair at the specified location.

Examples

This example demonstrates how to display a crosshair.

<SfButton OnClick="ShowCrosshair">Show Crosshair</SfButton>
<SfChart @ref="Chart">
...
</SfChart>  
@code {
    public SfChart Chart;
    void ShowCrosshair()
    {
        Chart.ShowCrosshairAsync(100, 40);
    }
}

ShowTooltipAsync(Object, Double, Boolean)

Displays a tooltip based on the data points or coordinates of the SfChart.

Declaration
public Task ShowTooltipAsync(object x, double y, bool isPoint = true)
Parameters
Type Name Description
System.Object x

Specifies the x-value of the point or x-coordinate on the chart.
System.Double y

Specifies the y-value of the point or y-coordinate on the chart.
System.Boolean isPoint

Specifies whether x and y are data point or chart coordinates. (Optional, default value is true.)
Returns
Type
System.Threading.Tasks.Task
Remarks

If the parameter values for 'x' and 'y' are not provided, this method will be unable to determine the position of the tooltip and will not display any tooltip. It is essential to provide valid 'x' and 'y' values for this method to work as expected.

Examples

This example demonstrates how to display a tooltip.

<SfButton OnClick="ShowTooltip">ShowTooltip</SfButton>
<SfChart @ref="Chart">
...
</SfChart>
@code {
    public SfChart Chart;
    void ShowTooltip()
    {
        Chart.ShowTooltipAsync("Gold", 40);
    }
}

Implements

System.IAsyncDisposable
Microsoft.AspNetCore.Components.IHandleEvent