Charts / StockChart
material theme

Getting Started with KendoReact StockChart

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

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

The KendoReact StockChart component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-charts package.

Basic Usage

The following example demonstrates the StockChart in action.

import React from 'react';
import ReactDOM from 'react-dom';

import {
    StockChart,
    ChartTitle,
    ChartSeries,
    ChartSeriesItem,
    ChartNavigator,
    ChartNavigatorSelect,
    ChartNavigatorSeries,
    ChartNavigatorSeriesItem
} from '@progress/kendo-react-charts';

import 'hammerjs';

import stockData from './stock-data.json';

const from = new Date('2009/02/05');
const to = new Date('2011/10/07');

const StockChartContainer = () => (
    <StockChart>
        <ChartTitle text="The Boeing Company NYSE:BA" />
        <ChartSeries>
            <ChartSeriesItem
                data={stockData}
                type="candlestick"
                openField="Open"
                closeField="Close"
                lowField="Low"
                highField="High"
                categoryField="Date"
            />
        </ChartSeries>
        <ChartNavigator>
            <ChartNavigatorSelect from={from} to={to} />
            <ChartNavigatorSeries>
                <ChartNavigatorSeriesItem
                    data={stockData}
                    type="area"
                    field="Close"
                    categoryField="Date"
                />
            </ChartNavigatorSeries>
        </ChartNavigator>
    </StockChart>
);
ReactDOM.render(
    <StockChartContainer />,
    document.querySelector('my-app')
);

Functionality and Features

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

Navigator

The StockChart navigator represents a pane that is placed at the bottom of the chart and which can be used to change the date interval in the main panes.

To limit the range that is displayed by the Chart, refer to the article on appearance.

To configure the navigator, use the ChartNavigator component and its child components.

Loading on Demand

To load the main series data for the selected period on demand, use the onNavigatorFilter event. The event object contains the start and end of the selected period. Since the navigator should not be re-rendered when the main series are filtered set the partialRedrawproperty of the StockChart to true.

import React from 'react';
import ReactDOM from 'react-dom';

import {
    StockChart,
    ChartTitle,
    ChartSeries,
    ChartSeriesItem,
    ChartNavigator,
    ChartNavigatorSelect,
    ChartNavigatorSeries,
    ChartNavigatorSeriesItem
} from '@progress/kendo-react-charts';

import { IntlService } from '@progress/kendo-react-intl';
import { filterBy } from '@progress/kendo-data-query';

import 'hammerjs';

import data from './stock-data.json';

const intl = new IntlService('en');
const stockData = data.map(item => (Object.assign({}, item, { Date: intl.parseDate(item.Date) })));

const from = new Date('2009/02/05');
const to = new Date('2011/10/07');

class StockChartContainer extends React.Component {
    state = {
        seriesData: Array.from(stockData),
        navigatorData: Array.from(stockData)
    };

    render() {
        const { seriesData, navigatorData } = this.state;
        return (
            <StockChart onNavigatorFilter={this.onNavigatorChange} partialRedraw={true}>
                <ChartTitle text="The Boeing Company NYSE:BA" />
                <ChartSeries>
                    <ChartSeriesItem
                        data={seriesData}
                        type="candlestick"
                        openField="Open"
                        closeField="Close"
                        lowField="Low"
                        highField="High"
                        categoryField="Date"
                    />
                </ChartSeries>
                <ChartNavigator>
                    <ChartNavigatorSelect from={from} to={to} />
                    <ChartNavigatorSeries>
                        <ChartNavigatorSeriesItem
                            data={navigatorData}
                            type="area"
                            field="Close"
                            categoryField="Date"
                        />
                    </ChartNavigatorSeries>
                </ChartNavigator>
            </StockChart>
        );
    }

    onNavigatorChange = (event) => {
        const filters = {
            logic: 'and',
            filters: [{
                field: 'Date',
                operator: 'gte',
                value: event.from
            }, {
                field: 'Date',
                operator: 'lt',
                value: event.to
            }]
        };

        this.setState((prevState) => ({
            seriesData: filterBy(prevState.navigatorData, filters)
        }));
    }
}

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

Multiple Panes

Similar to the Chart component, the StockChart supports multiple panes and displays all additional panes above the navigator pane.

import React from 'react';
import ReactDOM from 'react-dom';

import {
    StockChart,
    ChartTitle,
    ChartSeries,
    ChartSeriesItem,
    ChartPanes,
    ChartPane,
    ChartValueAxis,
    ChartValueAxisItem,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
    ChartNavigator,
    ChartNavigatorSelect,
    ChartNavigatorSeries,
    ChartNavigatorSeriesItem
} from '@progress/kendo-react-charts';

import 'hammerjs';

import stockData from './stock-data.json';

const from = new Date('2009/02/05');
const to = new Date('2011/10/07');

const StockChartContainer = () => (
    <StockChart style={{ height: 800 }} >
        <ChartTitle text="The Boeing Company NYSE:BA" />
        <ChartSeries>
            <ChartSeriesItem
                data={stockData}
                type="candlestick"
                openField="Open"
                closeField="Close"
                lowField="Low"
                highField="High"
                categoryField="Date"
            />
            <ChartSeriesItem
                data={stockData}
                type="column"
                field="Volume"
                axis="volumeAxis"
                categoryField="Date"
                tooltip={{ format: "{0:C0}" }}
            />
        </ChartSeries>
        <ChartValueAxis>
            <ChartValueAxisItem />
            <ChartValueAxisItem visible={false} name="volumeAxis" pane="volumePane" />
        </ChartValueAxis>
        <ChartCategoryAxis>
            <ChartCategoryAxisItem pane="volumePane" />
        </ChartCategoryAxis>
        <ChartPanes>
            <ChartPane title="Value" height={350} />
            <ChartPane title="Volume" name="volumePane" height={150} />
        </ChartPanes>
        <ChartNavigator>
            <ChartNavigatorSelect from={from} to={to} />
            <ChartNavigatorSeries>
                <ChartNavigatorSeriesItem
                    data={stockData}
                    type="area"
                    field="Close"
                    categoryField="Date"
                />
            </ChartNavigatorSeries>
        </ChartNavigator>
    </StockChart>
);
ReactDOM.render(
    <StockChartContainer />,
    document.querySelector('my-app')
);
 /