Chart Component
<ejschart></ejschart> 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 true, enables the multi drag selection in chart. It requires selectionMode to be Dragx | DragY | or DragXY.
Defaults to false
annotationModule is used to manipulate and add annotation in chart.
ChartAnnotationSettingsModel[]
The configuration for annotation in chart.
areaSeriesModule is used to add area series in the chart.
atrIndicatorModule is used to predict the market trend using ATR approach
Secondary axis collection for the chart.
string
The background color of the chart that accepts value in hex and rgba as a valid CSS color string.
Defaults to null
string
The background image of the chart that accepts value in string as url link or 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 color and width of the chart border.
boxAndWhiskerSeriesModule is used to add line series to the chart.
bubbleSeries is used to add bubble series in chart.
‘CandleSeriesModule’ is used to add candle series in the chart.
categoryModule is used to manipulate and add category axis to the chart.
Options for configuring the border and background of the chart area.
columnSeriesModule is used to add column series to the chart.
Options to split chart into multiple plotting areas vertically. Each object in the collection represents a plotting area in the chart.
Options for customizing the crosshair of the chart.
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 DataSource 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: 'http://mvc.syncfusion.com/Services/Northwnd.svc/Tasks/'
});
let query: Query = new Query().take(50).where('Estimate', 'greaterThan', 0, false);
let chart: Chart = new Chart({
...
dataSource:dataManager,
series: [{
xName: 'Id',
yName: 'Estimate',
query: query
}],
...
});
chart.appendTo('#Chart');Defaults to ”
dateTimeCategoryModule is used to manipulate date time and category axis
datetimeModule is used to manipulate and add dateTime axis to the chart.
string
Description for chart.
Defaults to null
eMAIndicatorModule is used to predict the market trend using EMA approach
boolean
If set true, Animation process will be executed.
Defaults to true
boolean
If set to true, both axis interval will be calculated automatically with respect to the zoomed range.
Defaults to false
boolean
It specifies whether the chart should be rendered in canvas mode.
Defaults to false
boolean
To enable export feature in chart.
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
To enable the side by side placing the points for column type series.
Defaults to true
errorBarModule is used to manipulate and add errorBar for series.
Export Module is used to export chart.
string
The height of the chart as a string accepts input both as ‘100px’ or ‘100%‘. If specified as ‘100%, chart renders to the full height of its parent element.
Defaults to null
string
Define the color for the data point on highlight.
Defaults to ”
Specifies whether series or data point has to be selected. They are,
Defaults to None
highlightModule is used to manipulate and add highlight to the chart.
Specifies whether series or data point has to be selected. They are,
Defaults to None
hiloOpenCloseSeriesModule is used to add hilo series in chart
hiloSeriesModule is used to add hilo series in chart
histogramSeriesModule is used to add histogram series in chart
Defines the collection of technical indicators, that are used in financial markets.
boolean
If set true, enables the multi selection in chart. It requires selectionMode to be Point | Series | or Cluster.
Defaults to false
boolean
It specifies whether the chart should be render in transposed manner or not.
Defaults to false
legendModule is used to manipulate and add legend to the chart.
Options for customizing the legend of the chart.
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 left, right, top and bottom margins of the chart.
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 multiLevelLabel in chart.
string[]
Palette for the chart series.
Defaults to []
ParetoSeriesModule is used to add pareto series in the chart.
polarSeriesModule is used to add polar series in the chart.
Options to configure the horizontal axis.
Options to configure the vertical axis.
radarSeriesModule is used to add radar series in the chart.
rangeAreaSeriesModule is used to add rangeArea series in chart.
Options for customizing the points fill color based on condition.
rangeColumnSeriesModule is used to add rangeColumn series to the chart.
rangeStepAreaSeriesModule is used to add rangeStepArea series in chart.
Options to split Chart into multiple plotting areas horizontally. Each object in the collection represents a plotting area in the Chart.
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.
ScrollBar Module is used to render scrollbar in chart while zooming.
Specifies the point indexes to be selected while loading a chart.
It requires selectionMode or highlightMode to be Point | Series | or Cluster.
<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 []
Specifies whether series or data point has to be selected. They are,
Defaults to None
selectionModule is used to manipulate and add selection to the chart.
Specifies whether series or data point has to be selected. They are,
Defaults to None
The configuration for series in the chart.
splineAreaSeriesModule is used to add spline area series to the chart.
splineRangeAreaSeriesModule is used to add splineRangeArea series in 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 in 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 stripLine in chart.
string
SubTitle of the chart.
Defaults to ”
Options for customizing the Subtitle of the Chart.
tMAIndicatorModule is used to predict the market trend using TMA approach
number
TabIndex value for the chart.
Defaults to 1
Specifies the theme for the chart.
Defaults to ‘Material’
string
Title of the chart
Defaults to ”
Options for customizing the title of the Chart.
Options for customizing the tooltip of the chart.
tooltipModule is used to manipulate and add tooltip to the series.
‘TrendlineModule’ is used to predict the market trend using trendlines
boolean
Specifies whether a grouping separator should be used for a number.
Defaults to false
waterfallSeries is used to add waterfall series in chart.
string
The width of the chart as a string accepts input as both like ‘100px’ or ‘100%‘. If specified as ‘100%, 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 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
To Clear all series for the chart
Returns void
Method to create SVG element.
Returns void
To destroy the widget
Returns void
Export method for the chart.
Returns void
Gets the localized label by locale keyword.
| Parameter | Type | Description |
|---|---|---|
| key | string |
key |
Returns string
Get component name
Returns string
Handles the print method for chart control.
Returns void
Fix for live data update flicker issue
Returns void
To remove secondary axis for the chart
| Parameter | Type | Description |
|---|---|---|
| index | number |
Defines the axis collection to be removed in chart. |
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
Method to set the annotation content dynamically for chart.
Returns void
EmitType<IAfterExportEventArgs>
Triggers after the export completed.
EmitType<IAnimationCompleteEventArgs>
Triggers after animation is completed for the series.
EmitType<IAnnotationRenderEventArgs>
Triggers before the annotation gets rendered.
EmitType<IAxisLabelClickEventArgs>
Triggers when x axis label clicked.
EmitType<IAxisLabelRenderEventArgs>
Triggers before each axis label is rendered.
EmitType<IAxisMultiLabelRenderEventArgs>
Triggers before each axis multi label is rendered.
EmitType<IAxisRangeCalculatedEventArgs>
Triggers before each axis range is rendered.
Triggers before the export gets started.
Triggers before the prints gets started.
EmitType<IBeforeResizeEventArgs>
Triggers before resizing of chart
Triggers on double clicking the chart.
Triggers on clicking the chart.
Triggers on mouse down.
Triggers when cursor leaves the chart.
Triggers on hovering the chart.
Triggers on mouse up.
EmitType<IDataEditingEventArgs>
Triggers when the point is dragging.
EmitType<IDragCompleteEventArgs>
Triggers after the drag selection is completed.
EmitType<IDataEditingEventArgs>
Triggers when the point drag end.
EmitType<IDataEditingEventArgs>
Triggers when the point drag start.
EmitType<ILegendClickEventArgs>
Triggers after click on legend.
EmitType<ILegendRenderEventArgs>
Triggers before the legend is rendered.
Triggers before chart load.
Triggers after chart load.
EmitType<IMultiLevelLabelClickEventArgs>
Triggers after click on multiLevelLabelClick.
Triggers after the zoom selection is triggered.
Triggers on point click.
Triggers on point double click.
Triggers on point move.
EmitType<IPointRenderEventArgs>
Triggers before each points for the series is rendered.
Triggers after resizing of chart.
Triggers when change the scroll.
Triggers after the scroll end.
Triggers when start the scroll.
EmitType<ISelectionCompleteEventArgs>
Triggers after the selection is completed.
EmitType<ISeriesRenderEventArgs>
Triggers before the series is rendered.
EmitType<ISharedTooltipRenderEventArgs>
Triggers before the shared tooltip for series is rendered.
EmitType<ITextRenderEventArgs>
Triggers before the data label for series is rendered.
EmitType<ITooltipRenderEventArgs>
Triggers before the tooltip for series is rendered.
EmitType<IZoomCompleteEventArgs>
Triggers after the zoom selection is completed.