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

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.

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).

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.

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.

ChildContent

Gets or sets the child content to be rendered inside the SfChart component.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.RenderFragment representing the child content within the chart component.

Remarks

Use this property to define the content inside the SfChart component, such as additional components, HTML elements, or text.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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).

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.

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.

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.

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".

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.

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).

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.

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.

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.

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.

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.

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.

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

OnAfterRenderAsync(Boolean)

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender

Returns

Type
System.Threading.Tasks.Task

Overrides

SfDataBoundComponent.OnAfterRenderAsync(Boolean)

OnInitialized()

Declaration

protected override void OnInitialized()

OnParametersSet()

Declaration

protected override void OnParametersSet()

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.

ShouldRender()

Declaration

protected override bool ShouldRender()

Returns

Type
System.Boolean

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