All Components

StockChart Overview

The StockChart is a specialized control for visualizing the price movement of a financial instrument over a certain period of time.

StockCharts include extensive touch support and a navigator pane for easy browsing of extended time periods. Generally, the StockChart extends the Kendo UI Chart and shares most of its features.

The StockChart wrapper for Vue is a client-side wrapper for the Kendo UI StockChart widget.

Basic Usage

The following example demonstrates the StockChart in action.

<div id="vueapp" class="vue-app">
    <kendo-datasource :ref="'datasource'"
                      :transport-read-data-type="'jsonp'"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/StockData'"
                      :schema-model-fields="fields">
    </kendo-datasource>
    <kendo-stockchart :data-source-ref="'datasource'"
                      :date-field="'Date'"
                      :title-text="'The Boeing Company\nNYSE:BA'"
                      :category-axis-labels-rotation="'auto'"
                      :navigator-series="navigatorSeries"
                      :navigator-select-from="'2009/02/05'"
                      :navigator-select-to="'2011/10/07'"
                      :navigator-category-axis-labels-rotation="'auto'"
                      :theme="'sass'">
        <kendo-chart-series-item :type="'candlestick'"
                                 :open-field="'Open'"
                                 :high-field="'High'"
                                 :low-field="'Low'"
                                 :close-field="'Close'">
        </kendo-chart-series-item>
    </kendo-stockchart>
</div>
Vue.use(ChartInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            fields: {
                Date: { type: 'date' }
            },
            navigatorSeries: {
                type: 'area',
                field: 'Close'
            }
        }
    }
})

Functionality and Features

The StockChart delivers the navigator—a pane which is placed at the bottom of the StockChart and can be used to change the date interval that is shown in the main panes. To configure the navigator, use the navigator option.

In addition to its individual Navigator feature, the StockChart supports all configuration options of the Chart.

In this article