Search results

ChartComponent

Represents react Chart Component

<ChartComponent></ChartComponent>

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, accepting input as both ‘100px’ or ‘100%‘. If specified as ‘100%’, the chart renders to the full height of its parent element.

Defaults to null

highlightColor

string

Defines the color for the highlighted data point.

Defaults to

highlightMode

HighlightMode

Specifies whether a series or data point should be highlighted. The options are:

  • ‘none’: Disables the highlight
  • ‘series’: Highlights a series
  • ‘point’: Highlights a single data point.
  • ‘cluster’: Highlights a cluster of data points.

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 to true, enables multi-selection in the chart. It requires the 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

The chart legend configuration options.

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

Configuration options for the horizontal axis.

primaryYAxis

AxisModel

Configuration options for 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 a series or data point should be highlighted. The options are:

  • ‘none’: Disables the highlight.
  • ‘series’: Highlights a series.
  • ‘point’: Highlights a single data point.
  • ‘cluster’: Highlights a cluster of data points.
  • ‘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[]

Configuration options for the chart’s series.

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

The 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

The title of the chart.

Defaults to

titleStyle

titleSettingsModel

Options for customizing the title of the Chart.

tooltip

TooltipSettingsModel

The chart tooltip configuration options.

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

Defaults to false

waterfallSeriesModule

WaterfallSeries

waterfallSeries is used to add waterfall series in chart.

width

string

The width of the chart as a string, accepting input as both ‘100px’ or ‘100%‘. If specified as ‘100%’, the 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.

Returns void

Events

afterExport

EmitType<IAfterExportEventArgs>

Triggers after the export completed.

animationComplete

EmitType<IAnimationCompleteEventArgs>

Triggers after animation is completed for the series.

annotationRender

EmitType<IAnnotationRenderEventArgs>

Triggers before the annotation gets rendered.

axisLabelClick

EmitType<IAxisLabelClickEventArgs>

Triggers when x axis label clicked.

axisLabelRender

EmitType<IAxisLabelRenderEventArgs>

Triggers before each axis label is rendered.

axisMultiLabelRender

EmitType<IAxisMultiLabelRenderEventArgs>

Triggers before each axis multi label is rendered.

axisRangeCalculated

EmitType<IAxisRangeCalculatedEventArgs>

Triggers before each axis range is rendered.

beforeExport

EmitType<IExportEventArgs>

Triggers before the export gets started.

beforePrint

EmitType<IPrintEventArgs>

Triggers before the prints gets started.

beforeResize

EmitType<IBeforeResizeEventArgs>

Triggers before resizing of chart

chartDoubleClick

EmitType<IMouseEventArgs>

Triggers on double clicking the chart.

chartMouseClick

EmitType<IMouseEventArgs>

Triggers on clicking the chart.

chartMouseDown

EmitType<IMouseEventArgs>

Triggers on mouse down.

chartMouseLeave

EmitType<IMouseEventArgs>

Triggers when cursor leaves the chart.

chartMouseMove

EmitType<IMouseEventArgs>

Triggers on hovering the chart.

chartMouseUp

EmitType<IMouseEventArgs>

Triggers on mouse up.

drag

EmitType<IDataEditingEventArgs>

Triggers when the point is dragging.

dragComplete

EmitType<IDragCompleteEventArgs>

Triggers after the drag selection is completed.

dragEnd

EmitType<IDataEditingEventArgs>

Triggers when the point drag end.

dragStart

EmitType<IDataEditingEventArgs>

Triggers when the point drag start.

legendClick

EmitType<ILegendClickEventArgs>

Triggers after click on legend.

legendRender

EmitType<ILegendRenderEventArgs>

Triggers before the legend is rendered.

load

EmitType<ILoadedEventArgs>

Triggers before chart load.

loaded

EmitType<ILoadedEventArgs>

Triggers after chart load.

multiLevelLabelClick

EmitType<IMultiLevelLabelClickEventArgs>

Triggers after click on multiLevelLabelClick.

onZooming

EmitType<IZoomingEventArgs>

Triggers after the zoom selection is triggered.

pointClick

EmitType<IPointEventArgs>

Triggers on point click.

pointDoubleClick

EmitType<IPointEventArgs>

Triggers on point double click.

pointMove

EmitType<IPointEventArgs>

Triggers on point move.

pointRender

EmitType<IPointRenderEventArgs>

Triggers before each points for the series is rendered.

resized

EmitType<IResizeEventArgs>

Triggers after resizing of chart.

scrollChanged

EmitType<IScrollEventArgs>

Triggers when change the scroll.

scrollEnd

EmitType<IScrollEventArgs>

Triggers after the scroll end.

scrollStart

EmitType<IScrollEventArgs>

Triggers when start the scroll.

selectionComplete

EmitType<ISelectionCompleteEventArgs>

Triggers after the selection is completed.

seriesRender

EmitType<ISeriesRenderEventArgs>

Triggers before the series is rendered.

sharedTooltipRender

EmitType<ISharedTooltipRenderEventArgs>

Triggers before the shared tooltip for series is rendered.

textRender

EmitType<ITextRenderEventArgs>

Triggers before the data label for series is rendered.

tooltipRender

EmitType<ITooltipRenderEventArgs>

Triggers before the tooltip for series is rendered.

zoomComplete

EmitType<IZoomCompleteEventArgs>

Triggers after the zoom selection is completed.

Contents
Contents