Search results

Chart

Represents the Chart control.

<div id="chart"/>
<script>
  var chartObj = new Chart({ isResponsive : true });
  chartObj.appendTo("#chart");
</script>

Properties

accumulationDistributionIndicatorModule

AccumulationDistributionIndicator

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

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

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.

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

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.

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

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 undefined

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.

rangeColumnSeriesModule

RangeColumnSeries

rangeColumnSeriesModule is used to add rangeColumn series to the 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.

selectedDataIndexes

IndexesModel[]

Specifies the point indexes to be selected while loading a chart. It requires selectionMode 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

string

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.

Defaults to None

selectionModule

Selection

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

series

SeriesModel[]

The configuration for series in the chart.

splineAreaSeriesModule

SplineAreaSeries

splineAreaSeriesModule is used to add spline area series to the 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.

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

FontModel

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

string

Specifies the theme for the chart.

Defaults to ‘Material’

title

string

Title of the chart

Defaults to

titleStyle

FontModel

Options for customizing the title of the Chart.

tooltip

TooltipSettingsModel

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

addEventListener

Adds the handler to the given event listener.

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

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

createChartSvg

Method to create SVG element.

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

To destroy the widget

Returns void

export

Handles the export method for chart control.

Returns void

getLocalizedLabel

Gets the localized label by locale keyword.

Returns string

getModuleName

Get component name

Returns string

print

Handles the print method for chart control.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

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

Inject

Dynamically injects the required modules to the component.

Returns void

Events

animationComplete

EmitType<IAnimationCompleteEventArgs>

Triggers after animation is completed for the series.

annotationRender

EmitType<IAnnotationRenderEventArgs>

Triggers before the annotation gets rendered.

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.

beforePrint

EmitType<IPrintEventArgs>

Triggers before the prints gets started.

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.

dragComplete

EmitType<IDragCompleteEventArgs>

Triggers after the drag selection is completed.

legendRender

EmitType<ILegendRenderEventArgs>

Triggers before the legend is rendered.

load

EmitType<ILoadedEventArgs>

Triggers before chart load.

loaded

EmitType<ILoadedEventArgs>

Triggers after chart load.

pointClick

EmitType<IPointEventArgs>

Triggers on point 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.

seriesRender

EmitType<ISeriesRenderEventArgs>

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