StockChartComponent
Represents the Kendo UI for Angular StockChart component.
The StockChart displays financial data with a navigator for date range selection. It combines a main chart with a smaller navigator chart for easy data exploration.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-stockchart>
<kendo-chart-series>
<kendo-chart-series-item type="line" [data]="data" field="value" categoryField="date">
</kendo-chart-series-item>
</kendo-chart-series>
<kendo-chart-navigator>
<kendo-chart-navigator-select to="2017/02/01">
</kendo-chart-navigator-select>
<kendo-chart-navigator-series>
<kendo-chart-navigator-series-item type="area" [data]="data" field="value" categoryField="date">
</kendo-chart-navigator-series-item>
</kendo-chart-navigator-series>
</kendo-chart-navigator>
</kendo-stockchart>
`,
})
export class AppComponent {
}
Selector
kendo-stockchart
Export Name
Accessible in templates as #kendoStockChartInstance="kendoStockChart"
Inputs
Name | Type | Default | Description |
---|---|---|---|
axisDefaults |
|
Defines the default configuration for all axes. | |
categoryAxis |
|
Defines the category axis configuration. | |
chartArea |
|
Defines the Chart area configuration. | |
legend |
|
Defines the Chart legend configuration. | |
navigator |
|
Specifies the configuration options for the data navigator. The navigator provides a way to select and filter data ranges. | |
noData |
|
|
Defines whether to show the no-data template when the Chart has no data. |
paneDefaults |
|
Defines the default configuration for all panes. | |
panes |
|
Defines the Chart panes configuration. | |
plotArea |
|
Defines the plot area configuration. | |
popupSettings |
|
Defines the settings for the tooltip popup. | |
renderAs |
|
|
Defines the rendering mode of the Chart. |
resizeRateLimit |
|
|
Limits the automatic resizing of the Chart. Sets the maximum number of times per second
that the component redraws its content when the size of its container changes.
To disable the automatic resizing, set it to |
series |
|
Defines the Chart series configuration. | |
seriesColors |
|
Defines the default colors for the Chart series. | |
seriesDefaults |
|
Defines the default configuration for all series. | |
subtitle |
|
Defines the subtitle configuration of the Chart. | |
title |
|
Defines the title configuration of the Chart. | |
tooltip |
|
Defines the Chart tooltip configuration. | |
transitions |
|
|
Defines whether the Chart plays animations when it displays the series. By default, animations are enabled. |
valueAxis |
|
Defines the value axis configuration. | |
xAxis |
|
Defines the X axis configuration. | |
yAxis |
|
Defines the Y axis configuration. |
Fields
Name | Type | Default | Description |
---|---|---|---|
surface |
|
Represents the Drawing |
Events
Name | Type | Description |
---|---|---|
axisLabelClick |
|
Fires when you click an axis label (see example). |
drag |
|
Fires as long as you drag the Chart with the mouse or through swipe gestures. |
dragEnd |
|
Fires when you stop dragging the Chart. |
dragStart |
|
Fires when you start dragging the Chart. |
legendItemClick |
|
Fires when a legend item is clicked before the selected series visibility is toggled. You can prevent this event. |
legendItemHover |
|
Fires when you hover over a legend item (see example). |
legendItemLeave |
|
Fires when the cursor leaves a legend item. |
navigatorFilter |
|
Fires when the navigator range is changed. Use this event to respond to user interactions with the navigator. |
noteClick |
|
Fires when you click a note. |
noteHover |
|
Fires when you hover over a note. |
noteLeave |
|
Fires when the cursor leaves a note. |
paneRender |
|
Fires when a pane is rendered because the Chart is rendered, performs panning or zooming, or is exported with different options. The event is used to render custom visuals in the panes. |
plotAreaClick |
|
Fires when you click the plot area (see example).
The |
plotAreaHover |
|
Fires when you hover the plot area (see example). |
plotAreaLeave |
|
Fires when the cursor leaves the plot area. |
render |
|
Fires when the Chart is ready to render on screen (see example). For example, you can use it to remove loading indicators. Any changes made to the options are ignored. |
select |
|
Fires when you modify the selection. The range units include a generic axis category index (0-based) and a date axis represented by a date instance. |
selectEnd |
|
Fires when you complete the modification of the selection. The range units include a generic axis category index (0-based) and a date axis represented by a date instance. |
selectStart |
|
Fires when you start modifying the axis selection. The range units include a generic axis category index (0-based) and a date axis represented by a date instance. |
seriesClick |
|
Fires when you click the Chart series. The |
seriesHover |
|
Fires when you hover the Chart series (see example). |
seriesLeave |
|
Fires when the cursor leaves a series. |
seriesOver |
|
Fires when the cursor enters a series. |
zoom |
|
Fires as long as you zoom the Chart by using the mousewheel operation. |
zoomEnd |
|
Fires when you stop zooming the Chart. |
zoomStart |
|
Fires when you use the mousewheel to zoom the Chart. |
Methods
exportImage | ||||||
---|---|---|---|---|---|---|
Exports the Chart as an image. The export operation is asynchronous and returns a promise. | ||||||
| ||||||
|
exportSVG | ||||||
---|---|---|---|---|---|---|
Exports the Chart as an SVG document. The export operation is asynchronous and returns a promise. | ||||||
| ||||||
|
exportVisual | ||||||
---|---|---|---|---|---|---|
Exports the Chart as a Drawing | ||||||
| ||||||
|
findAxisByName | ||||||
---|---|---|---|---|---|---|
Returns the axis with the specified name. | ||||||
| ||||||
|
findPaneByIndex | ||||||
---|---|---|---|---|---|---|
Returns the pane at the specified index. | ||||||
| ||||||
|
findPaneByName | ||||||
---|---|---|---|---|---|---|
Returns the pane with the specified name. | ||||||
| ||||||
|
getPlotArea | ||||
---|---|---|---|---|
Returns the plot area of the Chart. | ||||
|
hideTooltip |
---|
Hides the tooltip of the Chart. |
notifyChanges | ||||||
---|---|---|---|---|---|---|
Updates the component fields with the specified values and refreshes the Chart. Use this method when the configuration values cannot be set through the template. ts
| ||||||
|
reloadTheme |
---|
Reloads the Chart appearance settings from the current Kendo UI Theme. Call this method after loading a different theme stylesheet. |
resize |
---|
Detects the size of the container and redraws the Chart.
Resizing is automatic unless you set the |
showTooltip | ||||||
---|---|---|---|---|---|---|
Shows the Chart tooltip of a specific point or the shared tooltip of a specific category. | ||||||
|
skipNavigatorRedraw |
---|
Prevents the navigator pane from redrawing when the StockChart options are updated. Use this method when you need to update only the main series data for the selected period. Call this method before updating the Chart options to improve performance. |
toggleHighlight | |||||||||
---|---|---|---|---|---|---|---|---|---|
Highlights the series points or the segments of a Pie, Donut, Funnel, or Pyramid Charts. See Series Highlight for more details (with an example). | |||||||||
|