Represents react Chart Component
<ChartComponent></ChartComponent>
AccumulationDistributionIndicator
accumulationDistributionIndicatorModule
is used to predict the market trend using Accumulation Distribution approach.
boolean
To enable export feature in blazor chart.
Defaults to false
boolean
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.
Defaults to false
annotationModule
is used to manipulate and add annotation to the chart.
ChartAnnotationSettingsModel[]
Annotations are used to highlight specific data points or areas in the chart, providing additional context and information.
areaSeriesModule
is used to add area series to the chart.
atrIndicatorModule
is used to predict the market trend using ATR approach.
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.
string
The background color of the chart accepts values in hex and rgba formats as valid CSS color strings.
Defaults to null
string
The background image of the chart accepts a string value as a URL link or the location of an image.
Defaults to null
barSeriesModule
is used to add bar series to the chart.
bollingerBandsModule
is used to predict the market trend using Bollinger approach.
Options for customizing the appearance of the border in the chart by using the color
and width
properties in the border
.
boxAndWhiskerSeriesModule
is used to add box and whisker series to the chart.
bubbleSeries
is used to add bubble series to the chart.
‘candleSeriesModule’ is used to add candle series to the chart.
categoryModule
is used to manipulate and add category axis to the chart.
Configuration options for the chart area’s border and background.
columnSeriesModule
is used to add column series to the chart.
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.
The crosshair displays lines on the chart that follow the mouse cursor and show the axis values of the data points.
crosshairModule
is used to manipulate and add crosshair to the chart.
dataEditingModule
is used to drag and drop of the point.
dataLabelModule
is used to manipulate and add data label to the series.
Object
| DataManager
Specifies the data source for the chart. It can be an array of JSON objects, or an instance of DataManager.
<div id='Chart'></div>
let dataManager: DataManager = new DataManager({
url: 'https://services.syncfusion.com/js/production/api/orders'
});
let query: Query = new Query().take(5);
let chart: Chart = new Chart({
...
dataSource: dataManager,
series: [{
type: 'Column',
xName: 'CustomerID',
yName: 'Freight',
query: query
}],
...
});
chart.appendTo('#Chart');
Defaults to ”
dateTimeCategoryModule
is used to manipulate date time and category axis to the chart.
dateTimeModule
is used to manipulate and add date time axis to the chart.
string
A description for the chart that provides additional information about its content for screen readers.
Defaults to null
eMAIndicatorModule
is used to predict the market trend using EMA approach.
boolean
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.
Defaults to true
boolean
If set to true, the intervals for all the axes will be calculated automatically based on the zoomed range.
Defaults to false
boolean
When set to true, the chart will render using a canvas.
Defaults to false
boolean
When set to true, it enables exporting the chart to various formats such as JPEG
, PNG
, SVG
, PDF
, XLSX
, or CSV
.
Defaults to true
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
boolean
This property controls whether columns for different series appear next to each other in a column chart.
Defaults to true
errorBarModule
is used to manipulate and add errorBar for series.
exportModule
is used to export the chart in JPEG
, PNG
, SVG
, PDF
, XLSX
, or CSV
format.
string
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.
Defaults to null
string
Defines the color used to highlight a data point on mouse hover.
Defaults to ”
The highlightMode
property determines how a series or individual data points are highlighted in the chart.
The available options are:
Defaults to None
highlightModule
is used to manipulate and add highlight to the chart.
The highlightPattern
property determines how the data points or series are visually highlighted.
The available options are:
Defaults to None
hiloOpenCloseSeriesModule
is used to add hilo open close series to the chart.
hiloSeriesModule
is used to add hilo series to the chart.
histogramSeriesModule
is used to add histogram series to the chart.
Technical indicators assist in evaluating market conditions and identifying trends for making trading decisions.
boolean
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.
Defaults to false
boolean
When set to true, the chart will render in a transposed manner, where the X and Y axes are interchanged.
Defaults to false
legendModule
is used to manipulate and add legend to the chart.
The legend provides descriptive information about the data series displayed in the chart, helping to understand what each series represents.
lineSeriesModule
is used to add line series to the chart.
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
logarithmicModule
is used to manipulate and add log axis to the chart.
macdIndicatorModule
is used to predict the market trend using Macd approach.
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.
momentumIndicatorModule
is used to predict the market trend using Momentum approach.
multiColoredAreaSeriesModule
is used to add multi colored area series to the chart.
multiColoredLineSeriesModule
is used to add multi colored line series to the chart.
multiLevelLabelModule
is used to manipulate and add multi-level labels to the chart.
string[]
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.
Defaults to []
paretoSeriesModule
is used to add pareto series to the chart.
polarSeriesModule
is used to add polar series to the chart.
The primaryXAxis
property configures the horizontal axis of the chart, including settings for axis labels, tick marks, grid lines, and axis ranges.
The primaryYAxis
property configures the vertical axis of the chart, including settings for axis labels, tick marks, grid lines, and axis ranges.
radarSeriesModule
is used to add radar series to the chart.
rangeAreaSeriesModule
is used to add range area series to the chart.
The rangeColorSettings
property specifies a set of rules for applying different colors to points based on their value ranges.
rangeColumnSeriesModule
is used to add range column series to the chart.
rangeStepAreaSeriesModule
is used to add range step area series to the chart.
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.
rSIIndicatorModule
is used to predict the market trend using RSI approach.
sMAIndicatorModule
is used to predict the market trend using SMA approach.
scatterSeriesModule
is used to add scatter series to the chart.
scrollBarModule
is used to render a scrollbar in the chart while zooming.
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.
<div id='Chart'></div>
let chart: Chart = new Chart({
...
selectionMode: 'Point',
selectedDataIndexes: [ { series: 0, point: 1},
{ series: 2, point: 3} ],
...
});
chart.appendTo('#Chart');
Defaults to []
The selectionMode
property determines how data points or series can be highlighted or selected.
The available options are:
Defaults to None
selectionModule
is used to manipulate and add selection to the chart.
The selectionPattern
property determines how the selected data points or series are visually represented.
The available options are:
Defaults to None
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.
splineAreaSeriesModule
is used to add spline area series to the chart.
splineRangeAreaSeriesModule
is used to add spline range area series to the chart.
splineSeriesModule
is used to add spline series to the chart.
stackingAreaSeriesModule
is used to add stacking area series to the chart.
stackingBarSeriesModule
is used to add stacking bar series to the chart.
stackingColumnSeriesModule
is used to add stacking column series to the chart.
stackingLineSeriesModule
is used to add stacking line series to the chart.
stackingStepAreaSeriesModule
is used to add stacking step area series to the chart.
stepAreaSeriesModule
is used to add step area series to the chart.
stepLineSeriesModule
is used to add step line series to the chart.
stochasticIndicatorModule
is used to predict the market trend using Stochastic approach.
stripLineModule
is used to manipulate and add strip line to the chart.
string
The subtitle is positioned below the main title and provides additional details about the data represented in the chart.
Defaults to ”
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.
tMAIndicatorModule
is used to predict the market trend using TMA approach.
number
The tabIndex
value determines the order in which the chart container receives focus during keyboard navigation.
Defaults to 1
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:
Defaults to ‘Material’
string
The title is displayed at the top of the chart to provide information about the plotted data.
Defaults to ”
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.
Configuration options for the chart’s tooltip, which displays details about the points when hovering over them.
tooltipModule
is used to manipulate and add tooltip to the series.
‘trendlineModule’ is used to predict the market trend using trendlines.
boolean
When set to true, a grouping separator will be used for numbers to separate groups of thousands in the chart.
Defaults to false
waterfallSeries
is used to add waterfall series to the chart.
string
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.
Defaults to null
zoomModule
is used to manipulate and add zooming to the chart.
Options to enable and configure the zooming feature in the chart.
To add secondary axis for the chart
Parameter | Type | Description |
---|---|---|
axisCollection | AxisModel[] |
Defines the axis collection to be added in chart. |
Returns void
To add series for the chart
Parameter | Type | Description |
---|---|---|
seriesCollection | SeriesModel[] |
Defines the series collection to be added in chart. |
Returns void
Clear all series from the chart.
Returns void
To destroy the widget
Returns void
Exports the chart in the specified format.
Parameter | Type | Description |
---|---|---|
type | ExportType |
The file format for the export. Available options are PNG, JPEG, PDF, and SVG. |
fileName | string |
The name of the file to be saved. |
Returns void
Gets the localized label by locale keyword.
Parameter | Type | Description |
---|---|---|
key | string |
key |
Returns string
Get component name
Returns string
Hides a tooltip in the chart.
Returns void
Hides a tooltip in the chart.
Returns void
Prints the chart or specified element.
Parameter | Type | Description |
---|---|---|
id (optional) | string[] | string | Element |
The ID or array of IDs of the elements to print. |
Returns void
Refresh the chart for live data updates.
Returns void
To Remove series for the chart
Parameter | Type | Description |
---|---|---|
index | number |
Defines the series index to be remove in chart series |
Returns void
Sets the content of the annotation dynamically for the chart.
Parameter | Type | Description |
---|---|---|
annotationIndex | number |
The index of the annotation. |
content | string |
The content to set for the annotation. |
Returns void
Displays a crosshair for the chart.
Parameter | Type | Description |
---|---|---|
x | number |
Specifies the x value of the point or x coordinate. |
y | number |
Specifies the x value of the point or y coordinate. |
Returns void
Displays a tooltip for the data points.
Parameter | Type | Description |
---|---|---|
x | number | string | Date |
Specifies the x value of the point or x coordinate. |
y | number |
Specifies the x value of the point or y coordinate. |
isPoint (optional) | boolean |
Specifies whether x and y are data point or chart coordinates. |
Returns void
EmitType<IAfterExportEventArgs>
Triggers after the export is completed.
EmitType<IAnimationCompleteEventArgs>
Triggers after the animation for the series is completed.
EmitType<IAnnotationRenderEventArgs>
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.
EmitType<IAxisLabelClickEventArgs>
Triggers when the x-axis label is clicked.
EmitType<IAxisLabelRenderEventArgs>
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.
EmitType<IAxisMultiLabelRenderEventArgs>
Triggers before each axis multi-label is rendered. This event allows modification of multi-labels on the axis before they are rendered.
EmitType<IAxisRangeCalculatedEventArgs>
Triggers before each axis range is rendered. This event allows modification of the axis range and interval that are calculated based on data.
Triggers before the export process begins. This event allows for the customization of export settings before the chart is exported.
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.
EmitType<IBeforeResizeEventArgs>
Triggers before the chart is resized. This event allows for modifications to the chart size before resizing occurs.
Triggers when double-clicking the chart.
Triggers when clicking on the chart.
Triggers on mouse down.
Triggers when the cursor leaves the chart.
Triggers on hovering over the chart.
Triggers on mouse up.
EmitType<IDataEditingEventArgs>
Triggers when the point is being dragged.
EmitType<IDragCompleteEventArgs>
Triggers after the drag selection is completed.
EmitType<IDataEditingEventArgs>
Triggers when the point drag operation ends.
EmitType<IDataEditingEventArgs>
Triggers when the drag operation for a point starts.
EmitType<ILegendClickEventArgs>
Triggers after clicking on a legend item.
EmitType<ILegendRenderEventArgs>
Triggers before the legend is rendered. This allows the customization of legend before rendering on the chart.
Triggers before the chart loads. This event allows for customization and configuration before the chart is rendered.
Triggers after the chart has fully loaded.
EmitType<IMultiLevelLabelClickEventArgs>
Triggers after clicking on a multi-level label.
Triggers when the zoom selection started.
Triggers on point click.
Triggers on point double-click.
Triggers when a data point is hovered.
EmitType<IPointRenderEventArgs>
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.
Triggers after the chart is resized.
Triggers when the scroll position changes.
Triggers after the scroll action ends.
Triggers when the scroll action starts.
EmitType<ISelectionCompleteEventArgs>
Triggers after the selection is completed.
EmitType<ISeriesRenderEventArgs>
Triggers before the series is rendered. This event allows for the customization of series properties before they are rendered on the chart.
EmitType<ISharedTooltipRenderEventArgs>
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.
EmitType<ITextRenderEventArgs>
Triggers before the data label for the series is rendered. This allows customization of data labels before they are rendered on the chart.
EmitType<ITooltipRenderEventArgs>
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.
EmitType<IZoomCompleteEventArgs>
Triggers after the zoom selection is completed.