Represents the chart control.
<div id="chart"/>
<script>
var chartObj = new Chart({});
chartObj.appendTo("#chart");
</script> 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 to true, enables multi-drag selection in the chart. This feature allows selecting multiple data points by dragging a selection box.
Note that the
selectionModeto be set toDragX,DragY, orDragXYfor this feature to work.
Defaults to false
annotationModule is used to manipulate and add annotation to the chart.
ChartAnnotationSettingsModel[]
Annotations are used to highlight specific data points or areas in the chart, providing additional context and information.
areaSeriesModule is used to add area series to the chart.
atrIndicatorModule is used to predict the market trend using ATR approach.
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.
string
The background color of the chart accepts values in hex and rgba formats as valid CSS color strings.
Defaults to null
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 is used to add bar series to the chart.
bollingerBandsModule is used to predict the market trend using Bollinger approach.
Options for customizing the appearance of the border in the chart by using the color and width properties in the border.
boxAndWhiskerSeriesModule is used to add box and whisker series to the chart.
bubbleSeries is used to add bubble series to the chart.
‘candleSeriesModule’ is used to add candle series to the chart.
categoryModule is used to manipulate and add category axis to the chart.
Configuration options for the chart area’s border and background.
columnSeriesModule is used to add column series to the chart.
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.
The crosshair displays lines on the chart that follow the mouse cursor and show the axis values of the data points.
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 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 is used to manipulate date time and category axis to the chart.
dateTimeModule is used to manipulate and add date time axis to the chart.
string
A description for the chart that provides additional information about its content for screen readers.
Defaults to null
eMAIndicatorModule is used to predict the market trend using EMA approach.
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
boolean
If set to true, the intervals for all the axes will be calculated automatically based on the zoomed range.
Defaults to false
boolean
When set to true, the chart will render using a canvas.
Defaults to false
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
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
This property controls whether columns for different series appear next to each other in a column chart.
Defaults to true
errorBarModule is used to manipulate and add errorBar for series.
exportModule is used to export the chart in JPEG, PNG, SVG, PDF, XLSX, or CSV format.
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
string
Defines the color used to highlight a data point on mouse hover.
Defaults to ”
The highlightMode property determines how a series or individual data points are highlighted in the chart.
The available options are:
Defaults to None
highlightModule is used to manipulate and add highlight to the chart.
The highlightPattern property determines how the data points or series are visually highlighted.
The available options are:
Defaults to None
hiloOpenCloseSeriesModule is used to add hilo open close series to the chart.
hiloSeriesModule is used to add hilo series to the chart.
histogramSeriesModule is used to add histogram series to the chart.
Technical indicators assist in evaluating market conditions and identifying trends for making trading decisions.
boolean
When set to true, it allows selecting multiple data points, series, or clusters.
Note that the
selectionModemust be set toPoint,Series, orClusterfor multi-selection to be enabled.
Defaults to false
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 is used to manipulate and add legend to the chart.
The legend provides descriptive information about the data series displayed in the chart, helping to understand what each series represents.
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 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 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 multi-level labels to the chart.
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 is used to add pareto series to the chart.
polarSeriesModule is used to add polar series to the chart.
The primaryXAxis property configures the horizontal axis of the chart, including settings for axis labels, tick marks, grid lines, and axis ranges.
The primaryYAxis property configures the vertical axis of the chart, including settings for axis labels, tick marks, grid lines, and axis ranges.
radarSeriesModule is used to add radar series to the chart.
rangeAreaSeriesModule is used to add range area series to the chart.
The rangeColorSettings property specifies a set of rules for applying different colors to points based on their value ranges.
rangeColumnSeriesModule is used to add range column series to the chart.
rangeStepAreaSeriesModule is used to add range step area series to the chart.
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 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.
scrollBarModule is used to render a scrollbar in the chart while zooming.
Specifies the point indexes to be selected when a chart is initially loaded.
Note that
selectionModeorhighlightModemust be set toPoint,Series, orClusterfor 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 []
The selectionMode property determines how data points or series can be highlighted or selected.
The available options are:
Defaults to None
selectionModule is used to manipulate and add selection to the chart.
The selectionPattern property determines how the selected data points or series are visually represented.
The available options are:
Defaults to None
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 is used to add spline area series to the chart.
splineRangeAreaSeriesModule is used to add spline range area series to the 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 to 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 strip line to the chart.
string
The subtitle is positioned below the main title and provides additional details about the data represented in the chart.
Defaults to ”
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 is used to predict the market trend using TMA approach.
number
The tabIndex value determines the order in which the chart container receives focus during keyboard navigation.
Defaults to 1
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:
Defaults to ‘Material’
string
The title is displayed at the top of the chart to provide information about the plotted data.
Defaults to ”
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.
Configuration options for the chart’s tooltip, which displays details about the points when hovering over them.
tooltipModule is used to manipulate and add tooltip to the series.
‘trendlineModule’ is used to predict the market trend using trendlines.
boolean
When set to true, a grouping separator will be used for numbers to separate groups of thousands in the chart.
Defaults to false
waterfallSeries is used to add waterfall series to the chart.
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 is used to manipulate and add zooming to the chart.
Options to enable and configure 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
Adds the handler to the given event listener.
| Parameter | Type | Description |
|---|---|---|
| eventName | string |
A String that specifies the name of the event |
| handler | Function |
Specifies the call to run when the event occurs. |
Returns void
To add series for the chart
| Parameter | Type | Description |
|---|---|---|
| seriesCollection | SeriesModel[] |
Defines the series collection to be added in chart. |
Returns void
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
Adding unload event to persist data when enable persistence true
Returns void
Clear all series from the chart.
Returns void
When invoked, applies the pending property changes immediately to the component.
Returns void
To destroy the widget
Returns void
Removing unload event to persist data when enable persistence true
Returns void
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
Returns the persistence data for component
Returns any
Gets the localized label by locale keyword.
| Parameter | Type | Description |
|---|---|---|
| key | string |
key |
Returns string
Get component name
Returns string
Returns the route element of the component
Returns HTMLElement
Handling unload event to persist data when enable persistence true
Returns void
Hides a tooltip in the chart.
Returns void
Hides a tooltip in the chart.
Returns void
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
Applies all the pending property changes and render the component again.
Returns void
Refresh the chart for live data updates.
Returns void
Removes the handler from the given event listener.
| Parameter | Type | Description |
|---|---|---|
| eventName | string |
A String that specifies the name of the event to remove |
| handler | Function |
Specifies the function to remove |
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
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
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
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 | boolean |
Specifies whether x and y are data point or chart coordinates. |
Returns void
Dynamically injects the required modules to the component.
| Parameter | Type | Description |
|---|---|---|
| moduleList | Function[] |
? |
Returns void
EmitType<IAfterExportEventArgs>
Triggers after the export is completed.
EmitType<IAnimationCompleteEventArgs>
Triggers after the animation for the series is completed.
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.
EmitType<IAxisLabelClickEventArgs>
Triggers when the x-axis label is clicked.
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.
EmitType<IAxisMultiLabelRenderEventArgs>
Triggers before each axis multi-label is rendered. This event allows modification of multi-labels on the axis before they are rendered.
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.
Triggers before the export process begins. This event allows for the customization of export settings before the chart is exported.
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.
EmitType<IBeforeResizeEventArgs>
Triggers before the chart is resized. This event allows for modifications to the chart size before resizing occurs.
Triggers when double-clicking the chart.
Triggers when clicking on the chart.
Triggers on mouse down.
Triggers when the cursor leaves the chart.
Triggers on hovering over the chart.
Triggers on mouse up.
EmitType<IDataEditingEventArgs>
Triggers when the point is being dragged.
EmitType<IDragCompleteEventArgs>
Triggers after the drag selection is completed.
EmitType<IDataEditingEventArgs>
Triggers when the point drag operation ends.
EmitType<IDataEditingEventArgs>
Triggers when the drag operation for a point starts.
EmitType<ILegendClickEventArgs>
Triggers after clicking on a legend item.
EmitType<ILegendRenderEventArgs>
Triggers before the legend is rendered. This allows the customization of legend before rendering on the chart.
Triggers before the chart loads. This event allows for customization and configuration before the chart is rendered.
Triggers after the chart has fully loaded.
EmitType<IMultiLevelLabelClickEventArgs>
Triggers after clicking on a multi-level label.
Triggers when the zoom selection started.
Triggers on point click.
Triggers on point double-click.
Triggers when a data point is hovered.
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.
Triggers after the chart is resized.
Triggers when the scroll position changes.
Triggers after the scroll action ends.
Triggers when the scroll action starts.
EmitType<ISelectionCompleteEventArgs>
Triggers after the selection is completed.
EmitType<ISeriesRenderEventArgs>
Triggers before the series is rendered. This event allows for the customization of series properties before they are rendered on the chart.
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.
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.
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.
EmitType<IZoomCompleteEventArgs>
Triggers after the zoom selection is completed.