All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

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