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 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 to DragX, DragY, or DragXY for this feature to work.

Defaults to false

annotationModule

ChartAnnotation

annotationModule is used to manipulate and add annotation to the chart.

annotations

ChartAnnotationSettingsModel[]

Annotations are used to highlight specific data points or areas in the chart, providing additional context and information.

areaSeriesModule

AreaSeries

areaSeriesModule is used to add area series to the chart.

atrIndicatorModule

AtrIndicator

atrIndicatorModule is used to predict the market trend using ATR approach.

axes

AxisModel[]

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.

background

string

The background color of the chart accepts values in hex and rgba formats as valid CSS color strings.

Defaults to null

backgroundImage

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

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 appearance of the border in the chart by using the color and width properties in the border.

boxAndWhiskerSeriesModule

BoxAndWhiskerSeries

boxAndWhiskerSeriesModule is used to add box and whisker series to the chart.

bubbleSeriesModule

BubbleSeries

bubbleSeries is used to add bubble series to the chart.

candleSeriesModule

CandleSeries

‘candleSeriesModule’ is used to add candle series to the chart.

categoryModule

Category

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

chartArea

ChartAreaModel

Configuration options for the chart area’s border and background.

columnSeriesModule

ColumnSeries

columnSeriesModule is used to add column series to the chart.

columns

ColumnModel[]

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.

crosshair

CrosshairSettingsModel

The crosshair displays lines on the chart that follow the mouse cursor and show the axis values of the data points.

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

DateTimeCategory

dateTimeCategoryModule is used to manipulate date time and category axis to the chart.

dateTimeModule

DateTime

dateTimeModule is used to manipulate and add date time axis to the chart.

description

string

A description for the chart that provides additional information about its content for screen readers.

Defaults to null

eMAIndicatorModule

EmaIndicator

eMAIndicatorModule is used to predict the market trend using EMA approach.

enableAnimation

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

enableAutoIntervalOnBothAxis

boolean

If set to true, the intervals for all the axes will be calculated automatically based on the zoomed range.

Defaults to false

enableCanvas

boolean

When set to true, the chart will render using a canvas.

Defaults to false

enableExport

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

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

This property controls whether columns for different series appear next to each other in a column chart.

Defaults to true

errorBarModule

ErrorBar

errorBarModule is used to manipulate and add errorBar for series.

exportModule

Export

exportModule is used to export the chart in JPEG, PNG, SVG, PDF, XLSX, or CSV format.

height

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

highlightColor

string

Defines the color used to highlight a data point on mouse hover.

Defaults to

highlightMode

HighlightMode

The highlightMode property determines how a series or individual data points are highlighted in the chart. The available options are:

  • ‘None’: Disables highlighting.
  • ‘Series’: Highlights an entire series of data points.
  • ‘Point’: Highlights a single data point.
  • ‘Cluster’: Highlights a group of data points that belong to the same cluster.

Defaults to None

highlightModule

Highlight

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

highlightPattern

SelectionPattern

The highlightPattern property determines how the data points or series are visually highlighted. The available options are:

  • ‘None’: No highlighting pattern.
  • ‘Chessboard’: Applies a chessboard pattern for highlighting.
  • ‘Dots’: Applies a dot pattern for highlighting.
  • ‘DiagonalForward’: Applies a forward diagonal line pattern for highlighting.
  • ‘Crosshatch’: Applies a crosshatch pattern for highlighting.
  • ‘Pacman’: Applies a Pacman pattern for highlighting.
  • ‘DiagonalBackward’: Applies a backward diagonal line pattern for highlighting.
  • ‘Grid’: Applies a grid pattern for highlighting.
  • ‘Turquoise’: Applies a turquoise pattern for highlighting.
  • ‘Star’: Applies a star pattern for highlighting.
  • ‘Triangle’: Applies a triangle pattern for highlighting.
  • ‘Circle’: Applies a circle pattern for highlighting.
  • ‘Tile’: Applies a tile pattern for highlighting.
  • ‘HorizontalDash’: Applies a horizontal dash pattern for highlighting.
  • ‘VerticalDash’: Applies a vertical dash pattern for highlighting.
  • ‘Rectangle’: Applies a rectangle pattern for highlighting.
  • ‘Box’: Applies a box pattern for highlighting.
  • ‘VerticalStripe’: Applies a vertical stripe pattern for highlighting.
  • ‘HorizontalStripe’: Applies a horizontal stripe pattern for highlighting.
  • ‘Bubble’: Applies a bubble pattern for highlighting.

Defaults to None

hiloOpenCloseSeriesModule

HiloOpenCloseSeries

hiloOpenCloseSeriesModule is used to add hilo open close series to the chart.

hiloSeriesModule

HiloSeries

hiloSeriesModule is used to add hilo series to the chart.

histogramSeriesModule

HistogramSeries

histogramSeriesModule is used to add histogram series to the chart.

indicators

TechnicalIndicatorModel[]

Technical indicators assist in evaluating market conditions and identifying trends for making trading decisions.

isMultiSelect

boolean

When set to true, it allows selecting multiple data points, series, or clusters.

Note that the selectionMode must be set to Point, Series, or Cluster for multi-selection to be enabled.

Defaults to false

isTransposed

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

Legend

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

legendSettings

LegendSettingsModel

The legend provides descriptive information about the data series displayed in the chart, helping to understand what each series represents.

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

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 multi-level labels to the chart.

palettes

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

ParetoSeries

paretoSeriesModule is used to add pareto series to the chart.

polarSeriesModule

PolarSeries

polarSeriesModule is used to add polar series to the chart.

primaryXAxis

AxisModel

The primaryXAxis property configures the horizontal axis of the chart, including settings for axis labels, tick marks, grid lines, and axis ranges.

primaryYAxis

AxisModel

The primaryYAxis property configures the vertical axis of the chart, including settings for axis labels, tick marks, grid lines, and axis ranges.

radarSeriesModule

RadarSeries

radarSeriesModule is used to add radar series to the chart.

rangeAreaSeriesModule

RangeAreaSeries

rangeAreaSeriesModule is used to add range area series to the chart.

rangeColorSettings

RangeColorSettingModel[]

The rangeColorSettings property specifies a set of rules for applying different colors to points based on their value ranges.

rangeColumnSeriesModule

RangeColumnSeries

rangeColumnSeriesModule is used to add range column series to the chart.

rangeStepAreaSeriesModule

RangeStepAreaSeries

rangeStepAreaSeriesModule is used to add range step area series to the chart.

rows

RowModel[]

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

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

scrollBarModule is used to render a scrollbar in the chart while zooming.

selectedDataIndexes

IndexesModel[]

Specifies the point indexes to be selected when a chart is initially loaded.

Note that selectionMode or highlightMode must be set to Point, Series, or Cluster 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 []

selectionMode

SelectionMode

The selectionMode property determines how data points or series can be highlighted or selected. The available options are:

  • ‘None’: Disables any form of highlight or selection.
  • ‘Series’: Highlights or selects an entire series of data points.
  • ‘Point’: Highlights or selects a single data point.
  • ‘Cluster’: Highlights or selects a group of data points that belong to the same cluster.
  • ‘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

The selectionPattern property determines how the selected data points or series are visually represented. The available options are:

  • ‘None’: No selection pattern is applied.
  • ‘Chessboard’: Applies a chessboard pattern as the selection effect.
  • ‘Dots’: Applies a dot pattern as the selection effect.
  • ‘DiagonalForward’: Applies a forward diagonal line pattern as the selection effect.
  • ‘Crosshatch’: Applies a crosshatch pattern as the selection effect.
  • ‘Pacman’: Applies a Pacman pattern as the selection effect.
  • ‘DiagonalBackward’: Applies a backward diagonal line pattern as the selection effect.
  • ‘Grid’: Applies a grid pattern as the selection effect.
  • ‘Turquoise’: Applies a turquoise pattern as the selection effect.
  • ‘Star’: Applies a star pattern as the selection effect.
  • ‘Triangle’: Applies a triangle pattern as the selection effect.
  • ‘Circle’: Applies a circle pattern as the selection effect.
  • ‘Tile’: Applies a tile pattern as the selection effect.
  • ‘HorizontalDash’: Applies a horizontal dash pattern as the selection effect.
  • ‘VerticalDash’: Applies a vertical dash pattern as the selection effect.
  • ‘Rectangle’: Applies a rectangle pattern as the selection effect.
  • ‘Box’: Applies a box pattern as the selection effect.
  • ‘VerticalStripe’: Applies a vertical stripe pattern as the selection effect.
  • ‘HorizontalStripe’: Applies a horizontal stripe pattern as the selection effect.
  • ‘Bubble’: Applies a bubble pattern as the selection effect.

Defaults to None

series

SeriesModel[]

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

SplineAreaSeries

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

splineRangeAreaSeriesModule

SplineRangeAreaSeries

splineRangeAreaSeriesModule is used to add spline range 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 to 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 strip line to the chart.

subTitle

string

The subtitle is positioned below the main title and provides additional details about the data represented in the chart.

Defaults to

subTitleStyle

titleSettingsModel

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

TmaIndicator

tMAIndicatorModule is used to predict the market trend using TMA approach.

tabIndex

number

The tabIndex value determines the order in which the chart container receives focus during keyboard navigation.

Defaults to 1

theme

ChartTheme

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:

  • Fabric
  • FabricDark
  • Bootstrap4
  • Bootstrap
  • BootstrapDark
  • HighContrastLight
  • HighContrast
  • Tailwind
  • TailwindDark
  • Bootstrap5
  • Bootstrap5Dark
  • Fluent
  • FluentDark
  • Fluent2
  • Fluent2Dark
  • Fluent2HighContrast
  • Material3
  • Material3Dark
  • Material
  • MaterialDark

Defaults to ‘Material’

title

string

The title is displayed at the top of the chart to provide information about the plotted data.

Defaults to

titleStyle

titleSettingsModel

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.

tooltip

TooltipSettingsModel

Configuration options for the chart’s tooltip, which displays details about the points when hovering over them.

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

When set to true, a grouping separator will be used for numbers to separate groups of thousands in the chart.

Defaults to false

waterfallSeriesModule

WaterfallSeries

waterfallSeries is used to add waterfall series to the chart.

width

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

Zoom

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

zoomSettings

ZoomSettingsModel

Options to enable and configure 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

Clear all series from the chart.

Returns void

destroy

To destroy the widget

Returns void

export

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

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

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

refreshLiveData

Refresh the chart for live data updates.

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

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

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 is completed.

animationComplete

EmitType<IAnimationCompleteEventArgs>

Triggers after the animation for the series is completed.

annotationRender

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.

axisLabelClick

EmitType<IAxisLabelClickEventArgs>

Triggers when the x-axis label is clicked.

axisLabelRender

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.

axisMultiLabelRender

EmitType<IAxisMultiLabelRenderEventArgs>

Triggers before each axis multi-label is rendered. This event allows modification of multi-labels on the axis before they are rendered.

axisRangeCalculated

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.

beforeExport

EmitType<IExportEventArgs>

Triggers before the export process begins. This event allows for the customization of export settings before the chart is exported.

beforePrint

EmitType<IPrintEventArgs>

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.

beforeResize

EmitType<IBeforeResizeEventArgs>

Triggers before the chart is resized. This event allows for modifications to the chart size before resizing occurs.

chartDoubleClick

EmitType<IMouseEventArgs>

Triggers when double-clicking the chart.

chartMouseClick

EmitType<IMouseEventArgs>

Triggers when clicking on the chart.

chartMouseDown

EmitType<IMouseEventArgs>

Triggers on mouse down.

chartMouseLeave

EmitType<IMouseEventArgs>

Triggers when the cursor leaves the chart.

chartMouseMove

EmitType<IMouseEventArgs>

Triggers on hovering over the chart.

chartMouseUp

EmitType<IMouseEventArgs>

Triggers on mouse up.

drag

EmitType<IDataEditingEventArgs>

Triggers when the point is being dragged.

dragComplete

EmitType<IDragCompleteEventArgs>

Triggers after the drag selection is completed.

dragEnd

EmitType<IDataEditingEventArgs>

Triggers when the point drag operation ends.

dragStart

EmitType<IDataEditingEventArgs>

Triggers when the drag operation for a point starts.

legendClick

EmitType<ILegendClickEventArgs>

Triggers after clicking on a legend item.

legendRender

EmitType<ILegendRenderEventArgs>

Triggers before the legend is rendered. This allows the customization of legend before rendering on the chart.

load

EmitType<ILoadedEventArgs>

Triggers before the chart loads. This event allows for customization and configuration before the chart is rendered.

loaded

EmitType<ILoadedEventArgs>

Triggers after the chart has fully loaded.

multiLevelLabelClick

EmitType<IMultiLevelLabelClickEventArgs>

Triggers after clicking on a multi-level label.

onZooming

EmitType<IZoomingEventArgs>

Triggers when the zoom selection started.

pointClick

EmitType<IPointEventArgs>

Triggers on point click.

pointDoubleClick

EmitType<IPointEventArgs>

Triggers on point double-click.

pointMove

EmitType<IPointEventArgs>

Triggers when a data point is hovered.

pointRender

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.

resized

EmitType<IResizeEventArgs>

Triggers after the chart is resized.

scrollChanged

EmitType<IScrollEventArgs>

Triggers when the scroll position changes.

scrollEnd

EmitType<IScrollEventArgs>

Triggers after the scroll action ends.

scrollStart

EmitType<IScrollEventArgs>

Triggers when the scroll action starts.

selectionComplete

EmitType<ISelectionCompleteEventArgs>

Triggers after the selection is completed.

seriesRender

EmitType<ISeriesRenderEventArgs>

Triggers before the series is rendered. This event allows for the customization of series properties before they are rendered on the chart.

sharedTooltipRender

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.

textRender

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.

tooltipRender

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.

zoomComplete

EmitType<IZoomCompleteEventArgs>

Triggers after the zoom selection is completed.

Contents
Contents