All Components

You are on the site of the Kendo UI Wrappers for React suite which contains wrappers for the Kendo UI for jQuery widgets. To explore the brand-new set of Kendo UI for React components which are built from the ground up, go to the Kendo UI for React suite.

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 React is a client-side wrapper for the Kendo UI StockChart widget.

  • The StockChart supports only binding to time series.
  • Discrete categories and X, Y, and Scatter series are not supported.
  • To indicate the field that contains the date of the data item, set the dateField configuration.

Basic Usage

The following example demonstrates the StockChart in action.

class StockChartContainer extends React.Component {
    constructor(props) {
        super(props);

        this.dataSource = {
                data: [{
                    "Date": "2016/01/01",
                    "Open": 41.62,
                    "High": 41.69,
                    "Low": 39.81,
                    "Close": 40.12,
                    "Volume": 2632000
                }, {
                    "Date": "2016/03/01",
                    "Open": 40.62,
                    "High": 39.69,
                    "Low": 40.81,
                    "Close": 39.12,
                    "Volume": 2631986
                }
                ]
            };

        this.series = [{
                type: "candlestick",
                openField: "Open",
                highField: "High",
                lowField: "Low",
                closeField: "Close"
            }];

        this.navigator = {
                series: {
                    type: "area",
                    field: "Volume"
                }
            };
    }

    render() {
        return (
            <div>
                <StockChart dataSource={this.dataSource} dateField={"Date"} series={this.series} navigator={this.navigator} />
            </div>
        );
    }
}

ReactDOM.render(<StockChartContainer />, document.querySelector('my-app'));
In this article