Class SfChart

Represents the SfChart component which is used to render various types of charts in a Blazor application.

Inheritance

System.Object

SfBaseComponent

SfDataBoundComponent

SfChart

Implements

Microsoft.AspNetCore.Components.IHandleEvent

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

SfDataBoundComponent.DataManager

SfDataBoundComponent.MainParent

SfDataBoundComponent.OnAfterRenderAsync(Boolean)

SfDataBoundComponent.OnInitializedAsync()

SfDataBoundComponent.OnParametersSetAsync()

SfDataBoundComponent.SetDataManager<T>(Object)

Namespace: Syncfusion.Blazor.Charts

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfChart : SfDataBoundComponent, 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 SelectionMode is applied. Enabling this property allows the selection of multiple points or series (based on the SelectionMode applied).

Examples

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

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">
    <ChartSeriesCollection>
        <ChartSeries XName="X" YName="Y" Type="ChartSeriesType.Column" />
    </ChartSeriesCollection>
</SfChart>

Description

Gets or sets the description used for accessibility purposes, particularly when focused on the chart element by screen readers.

Declaration

public string Description { get; set; }

Property Value

Type	Description
System.String	A string representing the descriptive text for accessibility.

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">
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
    </ChartSeriesCollection>
</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">
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
    </ChartSeriesCollection>
</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>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
    </ChartSeriesCollection>
</SfChart>

EnableRtl

Gets or sets a value indicating whether the right-to-left (RTL) direction is enabled.

Declaration

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	true if the right-to-left direction is enabled for the chart; otherwise, false. The default value is false.

Remarks

If enabled, the chart user interface (UI) elements are rendered in the right-to-left direction.

Examples

// This example demonstrates how to enable RTL (Right-to-Left) rendering in the chart.
<SfChart EnableRtl="true"></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">
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" Type="ChartSeriesType.Column" />
        <ChartSeries DataSource="@Data" XName="XValue" YName="Y1Value" Type="ChartSeriesType.Column" />
    </ChartSeriesCollection>
</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 teh 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">
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
    </ChartSeriesCollection>
</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">
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
    </ChartSeriesCollection>
</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">
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
    </ChartSeriesCollection>
</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">
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" Type="ChartSeriesType.Column" />
    </ChartSeriesCollection>
</SfChart>

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"}'>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" />
    </ChartSeriesCollection>
</SfChart>

Query

Gets or sets a query to select data from DataSource.

Declaration

public Query Query { get; set; }

Property Value

Type	Description
Query	An object of the type Query that represents the query to select the data from the data source.

Remarks

Applicable only when the DataSource is an instance of "SfDataManager".

Examples

// This example demonstrates how to bind remote data using SfDataManager in a Syncfusion Blazor Chart.
<SfChart Query="ChartQuery">
    <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Orders"
                   Adaptor="Syncfusion.Blazor.Adaptors.ODataV4Adaptor">
    </SfDataManager>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
    <ChartSeriesCollection>
        <ChartSeries XName="OrderID" YName="Freight" Type="ChartSeriesType.Column"></ChartSeries>
    </ChartSeriesCollection>
</SfChart>

SelectionMode

Gets or sets the selection mode of the chart component.

Declaration

public SelectionMode SelectionMode { get; set; }

Property Value

Type	Description
SelectionMode	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 SelectionMode.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="SelectionMode.DragXY">
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
    </ChartSeriesCollection>
</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 SelectionMode applied).

Examples

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

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">
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
    </ChartSeriesCollection>
</SfChart>

Theme

Gets or sets the theme for the chart.

Declaration

public Theme Theme { get; set; }

Property Value

Type	Description
Theme	One of the Theme enumerations that specifies the theme of the chart component. The default value is Theme.Material.

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.

Examples

// This example demonstrates how to set a theme for the Syncfusion Blazor Chart.
<SfChart Theme="Syncfusion.Blazor.Theme.Material" />

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>

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">
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
    </ChartSeriesCollection>
</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 SelectionMode.

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();
}
}  

ExportAsync(ExportType, String, Nullable<PdfPageOrientation>, Boolean, Boolean)

The method is used to perform the export functionality for the rendered chart.

Declaration

public Task ExportAsync(ExportType type, string fileName, Nullable<PdfPageOrientation> orientation = null, bool allowDownload = true, bool isBase64 = false)

Parameters

Type	Name	Description
ExportType	type	Specifies the export type for the rendered chart.
System.String	fileName	Specifies the filename.
System.Nullable<Syncfusion.PdfExport.PdfPageOrientation>	orientation	Specifies the portrait or landscape orientation of the page.
System.Boolean	allowDownload	Specifies whether to download or not.
System.Boolean	isBase64	Specify whether to obtain the chart image as a base64 string or not.

Returns

Type	Description
System.Threading.Tasks.Task	Export the chart with sepcifies export type.

Remarks

This method is used to export the chart in various formats such as PDF, Excel, or image files, allowing users to save or share the chart as needed. This method allows the users to choose whether to download the exported chart directly or to receive it as a base64 string for further processing.

HideCrosshair()

Hides the crosshair for the chart.

Declaration

public void HideCrosshair()

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.HideCrosshair();
    }
}

HideTooltip()

Hides the tooltip for data points.

Declaration

public void HideTooltip()

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.HideTooltip();
    }
}

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.

PrintAsync(ElementReference)

The method is used to perform the print functionality in chart.

Declaration

public Task PrintAsync(ElementReference elementRef = null)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.ElementReference	elementRef	This parameter is used to reference the chart element. It is an optional parameter.

Returns

Type	Description
System.Threading.Tasks.Task	Print the chart.

Remarks

This method is used to initiate the print functionality for the chart.

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.

ShowCrosshair(Double, Double)

Displays a crosshair based on the coordinates of the SfChart.

Declaration

public void ShowCrosshair(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.

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.ShowCrosshair(100, 40);
    }
}

ShowTooltip(Object, Double, Boolean)

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

Declaration

public void ShowTooltip(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.)

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.ShowTooltip("Gold", 40);
    }
}

Sort(String, ListSortDirection)

Sorts the chart data based on the property name and direction specified.

Declaration

public void Sort(string propertyName, ListSortDirection direction)

Parameters

Type	Name	Description
System.String	propertyName	Specifies property name for the sorting.
ListSortDirection	direction	Specifies sorting direction for the chart data .

Examples

This example shows how to sort a chart by the "Y" property in descending order.

<SfButton OnClick="SortChart" IsToggle="true" IsPrimary="true">SortChart</SfButton>  
<SfChart @ref=”Chart” DataSource=”Data”>  
<ChartSorting PropertyName ="X" Direction ="ListSortDirection.Ascending "/> 
…  
</SfChart>

@code{  
public SfChart Chart; 
public void SortChart() 
{ 
    Chart.Sort(‘Y’, ListSortDirection.Descending);  
}
}  

Implements

Microsoft.AspNetCore.Components.IHandleEvent