Class Chart
Inheritance
Namespace: Syncfusion.EJ2.Charts
Assembly: Syncfusion.EJ2.dll
Syntax
public class Chart : EJTagHelper
Constructors
Chart()
Declaration
public Chart()
Properties
AfterExport
Triggers after the export is completed.
Declaration
public string AfterExport { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
AllowExport
To enable export feature in blazor chart.
Declaration
public bool AllowExport { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | The default value is false |
AllowMultiSelection
If set to true, enables multi-drag selection in the chart. This feature allows selecting multiple data points by dragging a selection box.
Note that the
selectionMode
to be set toDragX
,DragY
, orDragXY
for this feature to work.
Declaration
public bool AllowMultiSelection { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | The default value is false |
AnimationComplete
Triggers after the animation for the series is completed.
Declaration
public string AnimationComplete { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
AnnotationRender
Triggers before the annotation gets rendered. This event allows for modifications of the annotation content and its location before it is rendered on the chart.
Declaration
public string AnnotationRender { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
Annotations
Annotations are used to highlight specific data points or areas in the chart, providing additional context and information.
Declaration
public List<ChartAnnotation> Annotations { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.List<Syncfusion.EJ2.Charts.ChartAnnotation> | The default value is null |
Axes
Configuration options for the secondary axis in the chart. Each object in the collection represents an additional axis, allowing for the plotting of multiple data series with different scales.
Declaration
public List<ChartAxis> Axes { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.List<ChartAxis> | The default value is null |
AxisLabelClick
Triggers when the x-axis label is clicked.
Declaration
public string AxisLabelClick { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
AxisLabelRender
Triggers before each axis label is rendered. This event allows for the customization of axis label and its font style before rendering on the chart.
Declaration
public string AxisLabelRender { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
AxisMultiLabelRender
Triggers before each axis multi-label is rendered. This event allows modification of multi-labels on the axis before they are rendered.
Declaration
public string AxisMultiLabelRender { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
AxisRangeCalculated
Triggers before each axis range is rendered. This event allows modification of the axis range and interval that are calculated based on data.
Declaration
public string AxisRangeCalculated { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
Background
The background color of the chart accepts values in hex and rgba formats as valid CSS color strings.
Declaration
public string Background { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
BackgroundImage
The background image of the chart accepts a string value as a URL link or the location of an image.
Declaration
public string BackgroundImage { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
BeforeExport
Triggers before the export process begins. This event allows for the customization of export settings before the chart is exported.
Declaration
public string BeforeExport { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
BeforePrint
Triggers before the printing process starts. This event allows for the modification of the chart's HTML content before it is sent to the printer.
Declaration
public string BeforePrint { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
BeforeResize
Triggers before the chart is resized. This event allows for modifications to the chart size before resizing occurs.
Declaration
public string BeforeResize { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
Border
Options for customizing the appearance of the border in the chart by using the color
and width
properties in the border
.
Declaration
public ChartBorder Border { get; set; }
Property Value
Type | Description |
---|---|
ChartBorder | The default value is null |
ChartArea
Configuration options for the chart area's border and background.
Declaration
public ChartArea ChartArea { get; set; }
Property Value
Type | Description |
---|---|
ChartArea | The default value is null |
ChartDoubleClick
Triggers when double-clicking the chart.
Declaration
public string ChartDoubleClick { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
ChartMouseClick
Triggers when clicking on the chart.
Declaration
public string ChartMouseClick { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
ChartMouseDown
Triggers on mouse down.
Declaration
public string ChartMouseDown { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
ChartMouseLeave
Triggers when the cursor leaves the chart.
Declaration
public string ChartMouseLeave { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
ChartMouseMove
Triggers on hovering over the chart.
Declaration
public string ChartMouseMove { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
ChartMouseUp
Triggers on mouse up.
Declaration
public string ChartMouseUp { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
Columns
Options to split the chart into multiple plotting areas vertically. Each object in the collection represents a separate plotting area (column) in the chart, allowing multiple data series to be displayed in distinct vertical sections.
Declaration
public List<ChartColumn> Columns { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.List<Syncfusion.EJ2.Charts.ChartColumn> | The default value is null |
Crosshair
The crosshair displays lines on the chart that follow the mouse cursor and show the axis values of the data points.
Declaration
public ChartCrosshairSettings Crosshair { get; set; }
Property Value
Type | Description |
---|---|
ChartCrosshairSettings | The default value is null |
DataSource
Specifies the data source for the chart. It can be an array of JSON objects, or an instance of DataManager.
Declaration
public object DataSource { get; set; }
Property Value
Type | Description |
---|---|
System.Object | The default value is null |
Description
A description for the chart that provides additional information about its content for screen readers.
Declaration
public string Description { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
Drag
Triggers when the point is being dragged.
Declaration
public string Drag { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
DragComplete
Triggers after the drag selection is completed.
Declaration
public string DragComplete { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
DragEnd
Triggers when the point drag operation ends.
Declaration
public string DragEnd { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
DragStart
Triggers when the drag operation for a point starts.
Declaration
public string DragStart { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
EnableAnimation
If set to true, animation effects will be enabled for chart elements such as axis labels, gridlines, series, markers, and data labels when the legend is clicked, or the data source is updated.
Declaration
public bool EnableAnimation { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | The default value is true |
EnableAutoIntervalOnBothAxis
If set to true, the intervals for all the axes will be calculated automatically based on the zoomed range.
Declaration
public bool EnableAutoIntervalOnBothAxis { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | The default value is false |
EnableCanvas
When set to true, the chart will render using a canvas.
Declaration
public bool EnableCanvas { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | The default value is false |
EnableExport
When set to true, it enables exporting the chart to various formats such as JPEG
, PNG
, SVG
, PDF
, XLSX
, or CSV
.
Declaration
public bool EnableExport { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | The default value is true |
EnablePersistence
Enable or disable persisting component's state between page reloads.
Declaration
public bool EnablePersistence { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | The default value is false |
EnableRtl
Enable or disable rendering component in right to left direction.
Declaration
public bool EnableRtl { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | The default value is false |
EnableSideBySidePlacement
This property controls whether columns for different series appear next to each other in a column chart.
Declaration
public bool EnableSideBySidePlacement { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | The default value is true |
Height
The height of the chart as a string, accepting input such as '100px' or '100%'. If specified as '100%', the chart renders to the full height of its parent element.
Declaration
public string Height { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
HighlightColor
Defines the color used to highlight a data point on mouse hover.
Declaration
public string HighlightColor { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is "" |
HighlightMode
The highlightMode
property determines how a series or individual data points are highlighted in the chart.
The available options are:
'None': Disables highlighting.
'Series': Highlights an entire series of data points.
'Point': Highlights a single data point.
'Cluster': Highlights a group of data points that belong to the same cluster.
Declaration
public HighlightMode HighlightMode { get; set; }
Property Value
Type | Description |
---|---|
HighlightMode | The default value is HighlightMode.None |
HighlightPattern
The highlightPattern
property determines how the data points or series are visually highlighted.
The available options are:
'None': No highlighting pattern.
'Chessboard': Applies a chessboard pattern for highlighting.
'Dots': Applies a dot pattern for highlighting.
'DiagonalForward': Applies a forward diagonal line pattern for highlighting.
'Crosshatch': Applies a crosshatch pattern for highlighting.
'Pacman': Applies a Pacman pattern for highlighting.
'DiagonalBackward': Applies a backward diagonal line pattern for highlighting.
'Grid': Applies a grid pattern for highlighting.
'Turquoise': Applies a turquoise pattern for highlighting.
'Star': Applies a star pattern for highlighting.
'Triangle': Applies a triangle pattern for highlighting.
'Circle': Applies a circle pattern for highlighting.
'Tile': Applies a tile pattern for highlighting.
'HorizontalDash': Applies a horizontal dash pattern for highlighting.
'VerticalDash': Applies a vertical dash pattern for highlighting.
'Rectangle': Applies a rectangle pattern for highlighting.
'Box': Applies a box pattern for highlighting.
'VerticalStripe': Applies a vertical stripe pattern for highlighting.
'HorizontalStripe': Applies a horizontal stripe pattern for highlighting.
'Bubble': Applies a bubble pattern for highlighting.
Declaration
public SelectionPattern HighlightPattern { get; set; }
Property Value
Type | Description |
---|---|
SelectionPattern | The default value is SelectionPattern.None |
HtmlAttributes
Allows additional HTML attributes such as title, name, etc., and accepts n number of attributes in a key-value pair format.
Declaration
public object HtmlAttributes { get; set; }
Property Value
Type |
---|
System.Object |
Indicators
Technical indicators assist in evaluating market conditions and identifying trends for making trading decisions.
Declaration
public List<ChartIndicator> Indicators { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.List<ChartIndicator> | The default value is null |
IsMultiSelect
When set to true, it allows selecting multiple data points, series, or clusters.
Note that the
selectionMode
must be set toPoint
,Series
, orCluster
for multi-selection to be enabled.
Declaration
public bool IsMultiSelect { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | The default value is false |
IsTransposed
When set to true, the chart will render in a transposed manner, where the X and Y axes are interchanged.
Declaration
public bool IsTransposed { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | The default value is false |
LegendClick
Triggers after clicking on a legend item.
Declaration
public string LegendClick { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
LegendRender
Triggers before the legend is rendered. This allows the customization of legend before rendering on the chart.
Declaration
public string LegendRender { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
LegendSettings
The legend provides descriptive information about the data series displayed in the chart, helping to understand what each series represents.
Declaration
public ChartLegendSettings LegendSettings { get; set; }
Property Value
Type | Description |
---|---|
ChartLegendSettings | The default value is null |
Load
Triggers before the chart loads. This event allows for customization and configuration before the chart is rendered.
Declaration
public string Load { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
Loaded
Triggers after the chart has fully loaded.
Declaration
public string Loaded { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
Locale
Overrides the global culture and localization value for this component. Default global culture is 'en-US'.
Declaration
public string Locale { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is "" |
Margin
Options to customize the margins around the chart, including the left, right, top, and bottom margins. These margins refer to the space between the outer edge of the chart and its chart area.
Declaration
public ChartMargin Margin { get; set; }
Property Value
Type | Description |
---|---|
ChartMargin | The default value is null |
MultiLevelLabelClick
Triggers after clicking on a multi-level label.
Declaration
public string MultiLevelLabelClick { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
OnZooming
Triggers when the zoom selection started.
Declaration
public string OnZooming { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
Palettes
The palettes
array defines a set of colors used for rendering the chart's series. Each color in the array is applied to the series in order.
Declaration
public string[] Palettes { get; set; }
Property Value
Type | Description |
---|---|
System.String[] | The default value is null |
PointClick
Triggers on point click.
Declaration
public string PointClick { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
PointDoubleClick
Triggers on point double-click.
Declaration
public string PointDoubleClick { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
PointMove
Triggers when a data point is hovered.
Declaration
public string PointMove { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
PointRender
Triggers before each point in the series is rendered. This allows for the customization of each data point before it is rendered on the chart.
Declaration
public string PointRender { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
PrimaryXAxis
The primaryXAxis
property configures the horizontal axis of the chart, including settings for axis labels, tick marks, grid lines, and axis ranges.
Declaration
public ChartAxis PrimaryXAxis { get; set; }
Property Value
Type | Description |
---|---|
ChartAxis | The default value is null |
PrimaryYAxis
The primaryYAxis
property configures the vertical axis of the chart, including settings for axis labels, tick marks, grid lines, and axis ranges.
Declaration
public ChartAxis PrimaryYAxis { get; set; }
Property Value
Type | Description |
---|---|
ChartAxis | The default value is null |
RangeColorSettings
The rangeColorSettings
property specifies a set of rules for applying different colors to points based on their value ranges.
Declaration
public List<ChartRangeColorSetting> RangeColorSettings { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.List<Syncfusion.EJ2.Charts.ChartRangeColorSetting> | The default value is null |
Resized
Triggers after the chart is resized.
Declaration
public string Resized { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
Rows
Options to split the chart into multiple plotting areas horizontally. Each object in the collection represents a separate plotting area (row) in the chart, allowing multiple data series to be displayed in distinct horizontal sections.
Declaration
public List<ChartRow> Rows { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.List<Syncfusion.EJ2.Charts.ChartRow> | The default value is null |
ScrollChanged
Triggers when the scroll position changes.
Declaration
public string ScrollChanged { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
ScrollEnd
Triggers after the scroll action ends.
Declaration
public string ScrollEnd { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
ScrollStart
Triggers when the scroll action starts.
Declaration
public string ScrollStart { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
SelectedDataIndexes
Specifies the point indexes to be selected when a chart is initially loaded.
Note that
selectionMode
orhighlightMode
must be set toPoint
,Series
, orCluster
for this feature to work.
Declaration
public List<ChartSelectedDataIndex> SelectedDataIndexes { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.List<Syncfusion.EJ2.Charts.ChartSelectedDataIndex> | The default value is null |
SelectionComplete
Triggers after the selection is completed.
Declaration
public string SelectionComplete { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
SelectionMode
The selectionMode
property determines how data points or series can be highlighted or selected.
The available options are:
'None': Disables any form of highlight or selection.
'Series': Highlights or selects an entire series of data points.
'Point': Highlights or selects a single data point.
'Cluster': Highlights or selects a group of data points that belong to the same cluster.
'DragXY': Selects points by dragging with respect to both horizontal and vertical axes.
'DragX': Selects points by dragging with respect to horizontal axis.
'DragY': Selects points by dragging with respect to vertical axis.
'Lasso': Selects points by dragging with respect to free form.
Declaration
public SelectionMode SelectionMode { get; set; }
Property Value
Type | Description |
---|---|
SelectionMode | The default value is SelectionMode.None |
SelectionPattern
The selectionPattern
property determines how the selected data points or series are visually represented.
The available options are:
'None': No selection pattern is applied.
'Chessboard': Applies a chessboard pattern as the selection effect.
'Dots': Applies a dot pattern as the selection effect.
'DiagonalForward': Applies a forward diagonal line pattern as the selection effect.
'Crosshatch': Applies a crosshatch pattern as the selection effect.
'Pacman': Applies a Pacman pattern as the selection effect.
'DiagonalBackward': Applies a backward diagonal line pattern as the selection effect.
'Grid': Applies a grid pattern as the selection effect.
'Turquoise': Applies a turquoise pattern as the selection effect.
'Star': Applies a star pattern as the selection effect.
'Triangle': Applies a triangle pattern as the selection effect.
'Circle': Applies a circle pattern as the selection effect.
'Tile': Applies a tile pattern as the selection effect.
'HorizontalDash': Applies a horizontal dash pattern as the selection effect.
'VerticalDash': Applies a vertical dash pattern as the selection effect.
'Rectangle': Applies a rectangle pattern as the selection effect.
'Box': Applies a box pattern as the selection effect.
'VerticalStripe': Applies a vertical stripe pattern as the selection effect.
'HorizontalStripe': Applies a horizontal stripe pattern as the selection effect.
'Bubble': Applies a bubble pattern as the selection effect.
Declaration
public SelectionPattern SelectionPattern { get; set; }
Property Value
Type | Description |
---|---|
SelectionPattern | The default value is SelectionPattern.None |
Series
Configuration options for the chart's series.
Each object in the series
collection represents a distinct data series displayed in the chart. Customize various aspects of each series such as data, type, and appearance.
Declaration
public List<ChartSeries> Series { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.List<ChartSeries> | The default value is null |
SeriesRender
Triggers before the series is rendered. This event allows for the customization of series properties before they are rendered on the chart.
Declaration
public string SeriesRender { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
SharedTooltipRender
Triggers before the shared tooltip for the series is rendered. This event allows customization of the shared tooltip properties such as text, style, and template before it is rendered on the chart.
Declaration
public string SharedTooltipRender { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
SubTitle
The subtitle is positioned below the main title and provides additional details about the data represented in the chart.
Declaration
public string SubTitle { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is "" |
SubTitleStyle
Options for customizing the appearance of the subtitle, which displays information about the plotted data below the main title.
Use the fontFamily
, size
, fontStyle
, fontWeight
, and color
properties in titleSettings
to adjust the subtitle's appearance.
Declaration
public ChartTitleSettings SubTitleStyle { get; set; }
Property Value
Type | Description |
---|---|
ChartTitleSettings | The default value is null |
TabIndex
The tabIndex
value determines the order in which the chart container receives focus during keyboard navigation.
Declaration
public double TabIndex { get; set; }
Property Value
Type | Description |
---|---|
System.Double | The default value is 1 |
TextRender
Triggers before the data label for the series is rendered. This allows customization of data labels before they are rendered on the chart.
Declaration
public string TextRender { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
Theme
The theme applied to the chart for visual styling. Choose from predefined themes to change the overall look and feel of the chart. The available themes are: Fabric FabricDark Bootstrap4 Bootstrap BootstrapDark HighContrastLight HighContrast Tailwind TailwindDark Bootstrap5 Bootstrap5Dark Fluent FluentDark Fluent2 Fluent2Dark Fluent2HighContrast Material3 Material3Dark Material MaterialDark
Declaration
public ChartTheme Theme { get; set; }
Property Value
Type | Description |
---|---|
ChartTheme | The default value is ChartTheme.Material |
Title
The title is displayed at the top of the chart to provide information about the plotted data.
Declaration
public string Title { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is "" |
TitleStyle
Options for customizing the appearance of the title, which displays information about the plotted data.
Use the fontFamily
, size
, fontStyle
, fontWeight
, and color
properties in titleSettings
to adjust the title's appearance.
Declaration
public ChartTitleSettings TitleStyle { get; set; }
Property Value
Type | Description |
---|---|
ChartTitleSettings | The default value is null |
Tooltip
Configuration options for the chart's tooltip, which displays details about the points when hovering over them.
Declaration
public ChartTooltipSettings Tooltip { get; set; }
Property Value
Type | Description |
---|---|
ChartTooltipSettings | The default value is null |
TooltipRender
Triggers before the tooltip for the series is rendered. This event allows customization of the tooltip properties such as text, style, and template before it is rendered on the chart.
Declaration
public string TooltipRender { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
UseGroupingSeparator
When set to true, a grouping separator will be used for numbers to separate groups of thousands in the chart.
Declaration
public bool UseGroupingSeparator { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | The default value is false |
Width
The width of the chart as a string, accepting input such as '100px' or '100%'. If specified as '100%', the chart renders to the full width of its parent element.
Declaration
public string Width { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
ZoomComplete
Triggers after the zoom selection is completed.
Declaration
public string ZoomComplete { get; set; }
Property Value
Type | Description |
---|---|
System.String | The default value is null |
ZoomSettings
Options to enable and configure the zooming feature in the chart.
Declaration
public ChartZoomSettings ZoomSettings { get; set; }
Property Value
Type | Description |
---|---|
ChartZoomSettings | The default value is null |