Angular

Search results

ChartComponent

Chart Component

<ejschart></ejschart>

Properties

accumulationDistributionIndicatorModule
`AccumulationDistributionIndicator`

accumulationDistributionIndicatorModule is used to predict the market trend using Accumulation Distribution approach

allowExport
`boolean`

To enable export feature in blazor chart.

Defaults to false

allowMultiSelection
`boolean`

If set true, enables the multi drag selection in chart. It requires selectionMode to be Dragx | DragY | or DragXY.

Defaults to false

annotationModule
`ChartAnnotation`

annotationModule is used to manipulate and add annotation in chart.

annotations
`ChartAnnotationSettingsModel[]`

The configuration for annotation in chart.

areaSeriesModule
`AreaSeries`

areaSeriesModule is used to add area series in the chart.

atrIndicatorModule
`AtrIndicator`

atrIndicatorModule is used to predict the market trend using ATR approach

axes
`AxisModel[]`

Secondary axis collection for the chart.

background
`string`

The background color of the chart that accepts value in hex and rgba as a valid CSS color string.

Defaults to null

backgroundImage
`string`

The background image of the chart that accepts value in string as url link or location of an image.

Defaults to null

barSeriesModule
`BarSeries`

barSeriesModule is used to add bar series to the chart.

bollingerBandsModule
`BollingerBands`

bollingerBandsModule is used to predict the market trend using Bollinger approach

border
`BorderModel`

Options for customizing the color and width of the chart border.

boxAndWhiskerSeriesModule
`BoxAndWhiskerSeries`

boxAndWhiskerSeriesModule is used to add line series to the chart.

bubbleSeriesModule
`BubbleSeries`

bubbleSeries is used to add bubble series in chart.

candleSeriesModule
`CandleSeries`

‘CandleSeriesModule’ is used to add candle series in the chart.

categoryModule
`Category`

categoryModule is used to manipulate and add category axis to the chart.

chartArea
`ChartAreaModel`

Options for configuring the border and background of the chart area.

columnSeriesModule
`ColumnSeries`

columnSeriesModule is used to add column series to the chart.

columns
`ColumnModel[]`

Options to split chart into multiple plotting areas vertically. Each object in the collection represents a plotting area in the chart.

crosshair
`CrosshairSettingsModel`

Options for customizing the crosshair of the chart.

crosshairModule
`Crosshair`

crosshairModule is used to manipulate and add crosshair to the chart.

dataEditingModule
`DataEditing`

dataEditingModule is used to drag and drop of the point.

dataLabelModule
`DataLabel`

dataLabelModule is used to manipulate and add data label to the series.

dataSource
`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
`DateTimeCategory`

dateTimeCategoryModule is used to manipulate date time and category axis

dateTimeModule
`DateTime`

datetimeModule is used to manipulate and add dateTime axis to the chart.

description
`string`

Description for chart.

Defaults to null

eMAIndicatorModule
`EmaIndicator`

eMAIndicatorModule is used to predict the market trend using EMA approach

enableAnimation
`boolean`

If set true, Animation process will be executed.

Defaults to true

enableAutoIntervalOnBothAxis
`boolean`

If set to true, both axis interval will be calculated automatically with respect to the zoomed range.

Defaults to false

enableCanvas
`boolean`

It specifies whether the chart should be rendered in canvas mode.

Defaults to false

enableExport
`boolean`

To enable export feature in chart.

Defaults to true

enablePersistence
`boolean`

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl
`boolean`

Enable or disable rendering component in right to left direction.

Defaults to false

enableSideBySidePlacement
`boolean`

To enable the side by side placing the points for column type series.

Defaults to true

errorBarModule
`ErrorBar`

errorBarModule is used to manipulate and add errorBar for series.

exportModule
`Export`

Export Module is used to export chart.

height
`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

highlightColor
`string`

Define the color for the data point on highlight.

Defaults to ”

highlightMode
`HighlightMode`

Specifies whether series or data point has to be selected. They are,

none: Disables the highlight.
series: highlight a series.
point: highlight a point.
cluster: highlight a cluster of point

Defaults to None

highlightModule
`Highlight`

highlightModule is used to manipulate and add highlight to the chart.

highlightPattern
`SelectionPattern`

Specifies whether series or data point has to be selected. They are,

none: sets none as highlighting pattern.
chessboard: sets chess board as highlighting pattern.
dots: sets dots as highlighting pattern.
diagonalForward: sets diagonal forward as highlighting pattern.
crosshatch: sets crosshatch as highlighting pattern.
pacman: sets pacman highlighting pattern.
diagonalbackward: sets diagonal backward as highlighting pattern.
grid: sets grid as highlighting pattern.
turquoise: sets turquoise as highlighting pattern.
star: sets star as highlighting pattern.
triangle: sets triangle as highlighting pattern.
circle: sets circle as highlighting pattern.
tile: sets tile as highlighting pattern.
horizontaldash: sets horizontal dash as highlighting pattern.
verticaldash: sets vertical dash as highlighting pattern.
rectangle: sets rectangle as highlighting pattern.
box: sets box as highlighting pattern.
verticalstripe: sets vertical stripe as highlighting pattern.
horizontalstripe: sets horizontal stripe as highlighting pattern.
bubble: sets bubble as highlighting pattern.

Defaults to None

hiloOpenCloseSeriesModule
`HiloOpenCloseSeries`

hiloOpenCloseSeriesModule is used to add hilo series in chart

hiloSeriesModule
`HiloSeries`

hiloSeriesModule is used to add hilo series in chart

histogramSeriesModule
`HistogramSeries`

histogramSeriesModule is used to add histogram series in chart

indicators
`TechnicalIndicatorModel[]`

Defines the collection of technical indicators, that are used in financial markets.

isMultiSelect
`boolean`

If set true, enables the multi selection in chart. It requires selectionMode to be Point | Series | or Cluster.

Defaults to false

isTransposed
`boolean`

It specifies whether the chart should be render in transposed manner or not.

Defaults to false

legendModule
`Legend`

legendModule is used to manipulate and add legend to the chart.

legendSettings
`LegendSettingsModel`

Options for customizing the legend of the chart.

lineSeriesModule
`LineSeries`

lineSeriesModule is used to add line series to the chart.

locale
`string`

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

logarithmicModule
`Logarithmic`

logarithmicModule is used to manipulate and add log axis to the chart.

macdIndicatorModule
`MacdIndicator`

macdIndicatorModule is used to predict the market trend using Macd approach

margin
`MarginModel`

Options to customize left, right, top and bottom margins of the chart.

momentumIndicatorModule
`MomentumIndicator`

momentumIndicatorModule is used to predict the market trend using Momentum approach

multiColoredAreaSeriesModule
`MultiColoredAreaSeries`

multiColoredAreaSeriesModule is used to add multi colored area series to the chart.

multiColoredLineSeriesModule
`MultiColoredLineSeries`

multiColoredLineSeriesModule is used to add multi colored line series to the chart.

multiLevelLabelModule
`MultiLevelLabel`

multiLevelLabelModule is used to manipulate and add multiLevelLabel in chart.

palettes
`string[]`

Palette for the chart series.

Defaults to []

paretoSeriesModule
`ParetoSeries`

ParetoSeriesModule is used to add pareto series in the chart.

polarSeriesModule
`PolarSeries`

polarSeriesModule is used to add polar series in the chart.

primaryXAxis
`AxisModel`

Options to configure the horizontal axis.

primaryYAxis
`AxisModel`

Options to configure the vertical axis.

radarSeriesModule
`RadarSeries`

radarSeriesModule is used to add radar series in the chart.

rangeAreaSeriesModule
`RangeAreaSeries`

rangeAreaSeriesModule is used to add rangeArea series in chart.

rangeColorSettings
`RangeColorSettingModel[]`

Options for customizing the points fill color based on condition.

rangeColumnSeriesModule
`RangeColumnSeries`

rangeColumnSeriesModule is used to add rangeColumn series to the chart.

rangeStepAreaSeriesModule
`RangeStepAreaSeries`

rangeStepAreaSeriesModule is used to add rangeStepArea series in chart.

rows
`RowModel[]`

Options to split Chart into multiple plotting areas horizontally. Each object in the collection represents a plotting area in the Chart.

rsiIndicatorModule
`RsiIndicator`

rSIIndicatorModule is used to predict the market trend using RSI approach

sMAIndicatorModule
`SmaIndicator`

sMAIndicatorModule is used to predict the market trend using SMA approach

scatterSeriesModule
`ScatterSeries`

scatterSeriesModule is used to add scatter series to the chart.

scrollBarModule
`ScrollBar`

ScrollBar Module is used to render scrollbar in chart while zooming.

selectedDataIndexes
`IndexesModel[]`

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 []

selectionMode
`SelectionMode`

Specifies whether series or data point has to be selected. They are,

none: Disables the selection.
series: selects a series.
point: selects a point.
cluster: selects a cluster of point
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.

Defaults to None

selectionModule
`Selection`

selectionModule is used to manipulate and add selection to the chart.

selectionPattern
`SelectionPattern`

Specifies whether series or data point has to be selected. They are,

none: sets none as selecting pattern.
chessboard: sets chess board as selecting pattern.
dots: sets dots as selecting pattern.
diagonalForward: sets diagonal forward as selecting pattern.
crosshatch: sets crosshatch as selecting pattern.
pacman: sets pacman selecting pattern.
diagonalbackward: sets diagonal backward as selecting pattern.
grid: sets grid as selecting pattern.
turquoise: sets turquoise as selecting pattern.
star: sets star as selecting pattern.
triangle: sets triangle as selecting pattern.
circle: sets circle as selecting pattern.
tile: sets tile as selecting pattern.
horizontaldash: sets horizontal dash as selecting pattern.
verticaldash: sets vertical dash as selecting pattern.
rectangle: sets rectangle as selecting pattern.
box: sets box as selecting pattern.
verticalstripe: sets vertical stripe as selecting pattern.
horizontalstripe: sets horizontal stripe as selecting pattern.
bubble: sets bubble as selecting pattern.

Defaults to None

series
`SeriesModel[]`

The configuration for series in the chart.

splineAreaSeriesModule
`SplineAreaSeries`

splineAreaSeriesModule is used to add spline area series to the chart.

splineRangeAreaSeriesModule
`SplineRangeAreaSeries`

splineRangeAreaSeriesModule is used to add splineRangeArea series in chart.

splineSeriesModule
`SplineSeries`

splineSeriesModule is used to add spline series to the chart.

stackingAreaSeriesModule
`StackingAreaSeries`

stackingAreaSeriesModule is used to add stacking area series to the chart.

stackingBarSeriesModule
`StackingBarSeries`

stackingBarSeriesModule is used to add stacking bar series to the chart.

stackingColumnSeriesModule
`StackingColumnSeries`

stackingColumnSeriesModule is used to add stacking column series in the chart.

stackingLineSeriesModule
`StackingLineSeries`

stackingLineSeriesModule is used to add stacking line series to the chart.

stackingStepAreaSeriesModule
`StackingStepAreaSeries`

stackingStepAreaSeriesModule is used to add stacking step area series to the chart.

stepAreaSeriesModule
`StepAreaSeries`

stepAreaSeriesModule is used to add step area series to the chart.

stepLineSeriesModule
`StepLineSeries`

stepLineSeriesModule is used to add step line series to the chart.

stochasticIndicatorModule
`StochasticIndicator`

stochasticIndicatorModule is used to predict the market trend using Stochastic approach

stripLineModule
`StripLine`

stripLineModule is used to manipulate and add stripLine in chart.

subTitle
`string`

SubTitle of the chart.

Defaults to ”

subTitleStyle
`titleSettingsModel`

Options for customizing the Subtitle of the Chart.

tMAIndicatorModule
`TmaIndicator`

tMAIndicatorModule is used to predict the market trend using TMA approach

tabIndex
`number`

TabIndex value for the chart.

Defaults to 1

theme
`ChartTheme`

Specifies the theme for the chart.

Defaults to ‘Material’

title
`string`

Title of the chart

Defaults to ”

titleStyle
`titleSettingsModel`

Options for customizing the title of the Chart.

Options for customizing the tooltip of the chart.

tooltipModule
`Tooltip`

tooltipModule is used to manipulate and add tooltip to the series.

trendLineModule
`Trendlines`

‘TrendlineModule’ is used to predict the market trend using trendlines

useGroupingSeparator
`boolean`

Specifies whether a grouping separator should be used for a number.

Defaults to false

waterfallSeriesModule
`WaterfallSeries`

waterfallSeries is used to add waterfall series in chart.

width
`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
`Zoom`

zoomModule is used to manipulate and add zooming to the chart.

zoomSettings
`ZoomSettingsModel`

Options to enable the zooming feature in the chart.

Methods

addAxes

To add secondary axis for the chart

Parameter	Type	Description
axisCollection	`AxisModel[]`	Defines the axis collection to be added in chart.

Returns void

addSeries

To add series for the chart

Parameter	Type	Description
seriesCollection	`SeriesModel[]`	Defines the series collection to be added in chart.

Returns void

clearSeries

To Clear all series for the chart

Returns void

createChartSvg

Method to create SVG element.

Returns void

destroy

To destroy the widget

Returns void

export

Export method for the chart.

Returns void

getLocalizedLabel

Gets the localized label by locale keyword.

Parameter	Type	Description
key	`string`	key

Returns string

getModuleName

Get component name

Returns string

hideCrosshair

Hides a tooltip in the chart.

Returns void

hideTooltip

Hides a tooltip in the chart.

Returns void

print

Handles the print method for chart control.

Returns void

refreshLiveData

Fix for live data update flicker issue

Returns void

removeAxis

To remove secondary axis for the chart

Parameter	Type	Description
index	`number`	Defines the axis collection to be removed in chart.

Returns void

removeSeries

To Remove series for the chart

Parameter	Type	Description
index	`number`	Defines the series index to be remove in chart series

Returns void

setAnnotationValue

Method to set the annotation content dynamically for chart.

Returns void

showCrosshair

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

showTooltip

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.