Represents react Chart Component
<StockChartComponent></StockChartComponent> StockChartAnnotationSettingsModel[]
The configuration for annotation in chart.
Secondary axis collection for the stockChart.
string
The background color of the stockChart that accepts value in hex and rgba as a valid CSS color string.
Defaults to null
Options for customizing the color and width of the stockChart border.
Options for configuring the border and background of the stockChart area.
Options for customizing the crosshair of the chart.
Object | DataManager
Specifies the DataSource for the stockChart. It can be an array of JSON objects or an instance of DataManager.
<div id='financial'></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 financial: stockChart = new stockChart({
...
dataSource:dataManager,
series: [{
xName: 'Id',
yName: 'Estimate',
query: query
}],
...
});
financial.appendTo('#financial');Defaults to ”
boolean
Custom Range
Defaults to true
boolean
It specifies whether the periodSelector to be rendered in financial chart
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
It specifies whether the range navigator to be rendered in financial chart
Defaults to true
It specifies the types of Export types in financial chart.
string
The height of the stockChart as a string accepts input both as ‘100px’ or ‘100%‘. If specified as ‘100%, stockChart renders to the full height of its parent element.
Defaults to null
It specifies the types of indicators in financial chart.
Defines the collection of technical indicators, that are used in financial markets.
boolean
If set true, enables the multi selection in chart. It requires selectionMode to be Point | Series | or Cluster.
Defaults to false
boolean
If set true, enables the animation in chart.
Defaults to false
boolean
It specifies whether the stockChart should be render in transposed manner or not.
Defaults to false
Options for customizing the legend of the stockChart.
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
Element
Overall SVG
Options to customize left, right, top and bottom margins of the stockChart.
To configure period selector options.
Options to configure the horizontal axis.
Options to configure the vertical axis.
Options to split stockChart into multiple plotting areas horizontally. Each object in the collection represents a plotting area in the stockChart.
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 []
Specifies whether series or data point has to be selected. They are,
Defaults to None
The configuration for series in the stockChart.
It specifies the types of series in financial chart.
The configuration for stock events in the stockChart.
legendModule is used to manipulate and add legend to the Stockchart.
Specifies the theme for the stockChart.
Defaults to ‘Material’
string
Title of the chart
Defaults to ”
Options for customizing the title of the Chart.
Options for customizing the tooltip of the chart.
It specifies the types of trendline types in financial chart.
string
The width of the stockChart as a string accepts input as both like ‘100px’ or ‘100%‘. If specified as ‘100%, stockChart renders to the full width of its parent element.
Defaults to null
boolean
private
Options to enable the zooming feature in the chart.
Module Injection for components.
Returns void
Destroy method.
Returns void
Get component name.
Returns string
To change the range for chart.
| Parameter | Type | Description |
|---|---|---|
| updatedStart | number |
The updated start value for the chart range. |
| updatedEnd | number |
The updated end value for the chart range. |
Returns void
Render period selector.
Returns void
DataManager Success.
Returns void
EmitType<IAxisLabelRenderEventArgs>
Triggers before each axis label is rendered.
EmitType<IStockLegendClickEventArgs>
Triggers after click on legend.
EmitType<IStockLegendRenderEventArgs>
Triggers before the legend is rendered.
EmitType<IStockChartEventArgs>
Triggers before the range navigator rendering.
EmitType<IStockChartEventArgs>
Triggers after the range navigator rendering.
Triggers after the zoom selection is completed.
Triggers on point click.
Triggers on point move.
EmitType<IRangeChangeEventArgs>
Triggers if the range is changed
EmitType<IRangeSelectorRenderEventArgs>
Triggers before render the selector
EmitType<ISeriesRenderEventArgs>
Triggers before the series is rendered.
Triggers on clicking the stock chart.
Triggers on mouse down.
Triggers when cursor leaves the chart.
Triggers on hovering the stock chart.
Triggers on mouse up.
EmitType<IStockEventRenderArgs>
Triggers before the series is rendered.
EmitType<ITooltipRenderEventArgs>
Triggers before the tooltip for series is rendered.