Interface for a class StockChart
EmitType<IAxisLabelRenderEventArgs>
Triggers before each axis label is rendered.
Triggers before the export process begins. This event allows for the customization of export settings before the chart is exported.
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.
EmitType<IZoomingEventArgs>
Triggers after the zoom selection is completed.
EmitType<IPointEventArgs>
Triggers on point click.
EmitType<IPointEventArgs>
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.
EmitType<IMouseEventArgs>
Triggers on clicking the stock chart.
EmitType<IMouseEventArgs>
Triggers on mouse down.
EmitType<IMouseEventArgs>
Triggers when cursor leaves the chart.
EmitType<IMouseEventArgs>
Triggers on hovering the stock chart.
EmitType<IMouseEventArgs>
Triggers on mouse up.
EmitType<IStockEventRenderArgs>
Triggers before the series is rendered.
EmitType<ITooltipRenderEventArgs>
Triggers before the tooltip for series is rendered.
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.
Options for customizing the color and width of the stockChart border.
Options for configuring the border and background of the stockChart area.
CrosshairSettingsModel
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'); boolean
Custom Range
boolean
It specifies whether the periodSelector to be rendered in financial chart
boolean
Enable or disable persisting component’s state between page reloads.
boolean
Enable or disable rendering component in right to left direction.
boolean
It specifies whether the range navigator to be rendered in financial chart
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.
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.
boolean
If set true, enables the animation in chart.
boolean
It specifies whether the stockChart should be render in transposed manner or not.
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’.
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');Specifies whether series or data point has to be selected. They are,
The configuration for series in the stockChart.
It specifies the types of series in financial chart.
The configuration for stock events in the stockChart.
Specifies the theme for the stockChart.
string
Title of the chart
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.
ZoomSettingsModel
Options to enable the zooming feature in the chart.