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 KendoReact Chart component and shares most of its features.

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')
);
[
    {
        "Date": "\/Date(1196467200000)\/",
        "Close": 40.635,
        "Volume": 1650185491,
        "Open": 40.640,
        "High": 40.680,
        "Low": 39.090
    },
    {
        "Date": "\/Date(1199145600000)\/",
        "Close": 40.130,
        "Volume": 1979918237,
        "Open": 40.130,
        "High": 40.292,
        "Low": 36.460
    },
    {
        "Date": "\/Date(1201824000000)\/",
        "Close": 38.440,
        "Volume": 1572505911,
        "Open": 38.440,
        "High": 38.480,
        "Low": 36.697
    },
    {
        "Date": "\/Date(1204329600000)\/",
        "Close": 38.240,
        "Volume": 1922276774,
        "Open": 38.240,
        "High": 38.290,
        "Low": 35.940
    },
    {
        "Date": "\/Date(1207008000000)\/",
        "Close": 37.031,
        "Volume": 2078426778,
        "Open": 37.032,
        "High": 37.070,
        "Low": 34.350
    },
    {
        "Date": "\/Date(1209600000000)\/",
        "Close": 38.240,
        "Volume": 1727585885,
        "Open": 38.250,
        "High": 38.270,
        "Low": 34.886
    },
    {
        "Date": "\/Date(1212278400000)\/",
        "Close": 38.650,
        "Volume": 1776948280,
        "Open": 38.630,
        "High": 38.680,
        "Low": 36.700
    },
    {
        "Date": "\/Date(1214870400000)\/",
        "Close": 39.900,
        "Volume": 1456330078,
        "Open": 39.900,
        "High": 39.921,
        "Low": 36.550
    },
    {
        "Date": "\/Date(1217548800000)\/",
        "Close": 40.100,
        "Volume": 1557166494,
        "Open": 40.095,
        "High": 40.140,
        "Low": 38.260
    },
    {
        "Date": "\/Date(1220227200000)\/",
        "Close": 39.841,
        "Volume": 1506305343,
        "Open": 39.840,
        "High": 39.910,
        "Low": 38.240
    },
    {
        "Date": "\/Date(1222819200000)\/",
        "Close": 39.859,
        "Volume": 2034928239,
        "Open": 39.852,
        "High": 39.880,
        "Low": 37.330
    },
    {
        "Date": "\/Date(1225497600000)\/",
        "Close": 41.993,
        "Volume": 1542204312,
        "Open": 41.990,
        "High": 42.020,
        "Low": 38.710
    },
    {
        "Date": "\/Date(1228089600000)\/",
        "Close": 42.300,
        "Volume": 1255678260,
        "Open": 42.298,
        "High": 42.310,
        "Low": 40.360
    },
    {
        "Date": "\/Date(1230768000000)\/",
        "Close": 43.290,
        "Volume": 1685490186,
        "Open": 43.290,
        "High": 43.310,
        "Low": 40.160
    },
    {
        "Date": "\/Date(1233446400000)\/",
        "Close": 42.130,
        "Volume": 1445458017,
        "Open": 42.040,
        "High": 42.170,
        "Low": 40.260
    },
    {
        "Date": "\/Date(1235865600000)\/",
        "Close": 42.140,
        "Volume": 1958550854,
        "Open": 42.140,
        "High": 42.300,
        "Low": 40.190
    },
    {
        "Date": "\/Date(1238544000000)\/",
        "Close": 42.860,
        "Volume": 1533883066,
        "Open": 42.890,
        "High": 43.050,
        "Low": 41.390
    },
    {
        "Date": "\/Date(1241136000000)\/",
        "Close": 42.230,
        "Volume": 2396221596,
        "Open": 42.240,
        "High": 42.280,
        "Low": 38.230
    },
    {
        "Date": "\/Date(1243814400000)\/",
        "Close": 39.800,
        "Volume": 2709886930,
        "Open": 39.960,
        "High": 40.000,
        "Low": 37.160
    },
    {
        "Date": "\/Date(1246406400000)\/",
        "Close": 39.000,
        "Volume": 2091835303,
        "Open": 38.938,
        "High": 39.000,
        "Low": 35.540
    },
    {
        "Date": "\/Date(1249084800000)\/",
        "Close": 38.960,
        "Volume": 1986978146,
        "Open": 38.970,
        "High": 39.030,
        "Low": 36.260
    },
    {
        "Date": "\/Date(1251763200000)\/",
        "Close": 40.910,
        "Volume": 1860762246,
        "Open": 40.910,
        "High": 40.950,
        "Low": 38.320
    },
    {
        "Date": "\/Date(1254355200000)\/",
        "Close": 42.880,
        "Volume": 1974572432,
        "Open": 42.890,
        "High": 42.920,
        "Low": 39.880
    },
    {
        "Date": "\/Date(1257033600000)\/",
        "Close": 44.780,
        "Volume": 1903112379,
        "Open": 44.770,
        "High": 44.860,
        "Low": 41.610
    },
    {
        "Date": "\/Date(1259625600000)\/",
        "Close": 44.700,
        "Volume": 1533161602,
        "Open": 44.710,
        "High": 44.760,
        "Low": 42.880
    },
    {
        "Date": "\/Date(1262304000000)\/",
        "Close": 45.360,
        "Volume": 1823989418,
        "Open": 45.350,
        "High": 45.400,
        "Low": 42.530
    },
    {
        "Date": "\/Date(1264982400000)\/",
        "Close": 45.470,
        "Volume": 1730644867,
        "Open": 45.485,
        "High": 45.550,
        "Low": 42.930
    },
    {
        "Date": "\/Date(1267401600000)\/",
        "Close": 44.420,
        "Volume": 1749294085,
        "Open": 44.440,
        "High": 44.440,
        "Low": 42.060
    },
    {
        "Date": "\/Date(1270080000000)\/",
        "Close": 46.590,
        "Volume": 1171507724,
        "Open": 46.590,
        "High": 46.650,
        "Low": 43.300
    },
    {
        "Date": "\/Date(1272672000000)\/",
        "Close": 47.500,
        "Volume": 1282648621,
        "Open": 47.500,
        "High": 47.520,
        "Low": 45.660
    },
    {
        "Date": "\/Date(1275350400000)\/",
        "Close": 47.880,
        "Volume": 1228561577,
        "Open": 47.880,
        "High": 47.920,
        "Low": 46.160
    },
    {
        "Date": "\/Date(1277942400000)\/",
        "Close": 50.640,
        "Volume": 992870269,
        "Open": 50.640,
        "High": 50.654,
        "Low": 47.470
    },
    {
        "Date": "\/Date(1280620800000)\/",
        "Close": 49.020,
        "Volume": 981208528,
        "Open": 49.020,
        "High": 49.060,
        "Low": 44.390
    },
    {
        "Date": "\/Date(1283299200000)\/",
        "Close": 51.631,
        "Volume": 573031521,
        "Open": 51.630,
        "High": 51.680,
        "Low": 47.810
    },
    {
        "Date": "\/Date(1285891200000)\/",
        "Close": 55.010,
        "Volume": 1103427032,
        "Open": 54.959,
        "High": 55.060,
        "Low": 51.340
    },
    {
        "Date": "\/Date(1288569600000)\/",
        "Close": 54.680,
        "Volume": 995365278,
        "Open": 54.660,
        "High": 54.770,
        "Low": 48.660
    },
    {
        "Date": "\/Date(1291161600000)\/",
        "Close": 52.840,
        "Volume": 577831801,
        "Open": 52.840,
        "High": 52.840,
        "Low": 49.180
    },
    {
        "Date": "\/Date(1293840000000)\/",
        "Close": 51.370,
        "Volume": 849837840,
        "Open": 51.380,
        "High": 51.460,
        "Low": 41.630
    },
    {
        "Date": "\/Date(1296518400000)\/",
        "Close": 45.650,
        "Volume": 569927484,
        "Open": 45.650,
        "High": 45.870,
        "Low": 42.160
    },
    {
        "Date": "\/Date(1298937600000)\/",
        "Close": 45.020,
        "Volume": 563447812,
        "Open": 45.040,
        "High": 45.070,
        "Low": 41.050
    },
    {
        "Date": "\/Date(1301616000000)\/",
        "Close": 47.920,
        "Volume": 579215682,
        "Open": 47.930,
        "High": 48.050,
        "Low": 43.690
    },
    {
        "Date": "\/Date(1304208000000)\/",
        "Close": 50.450,
        "Volume": 589335627,
        "Open": 50.450,
        "High": 50.469,
        "Low": 47.220
    },
    {
        "Date": "\/Date(1306886400000)\/",
        "Close": 50.540,
        "Volume": 633735895,
        "Open": 50.480,
        "High": 50.610,
        "Low": 44.980
    },
    {
        "Date": "\/Date(1309478400000)\/",
        "Close": 46.060,
        "Volume": 558670899,
        "Open": 46.050,
        "High": 46.120,
        "Low": 43.300
    },
    {
        "Date": "\/Date(1312156800000)\/",
        "Close": 48.490,
        "Volume": 629930051,
        "Open": 48.480,
        "High": 48.560,
        "Low": 44.300
    },
    {
        "Date": "\/Date(1314835200000)\/",
        "Close": 46.930,
        "Volume": 808574022,
        "Open": 46.920,
        "High": 47.070,
        "Low": 37.180
    },
    {
        "Date": "\/Date(1317427200000)\/",
        "Close": 38.890,
        "Volume": 799617379,
        "Open": 38.860,
        "High": 38.970,
        "Low": 28.090
    },
    {
        "Date": "\/Date(1320105600000)\/",
        "Close": 33.920,
        "Volume": 394335489,
        "Open": 33.930,
        "High": 34.010,
        "Low": 25.060
    },
    {
        "Date": "\/Date(1322697600000)\/",
        "Close": 30.720,
        "Volume": 715467389,
        "Open": 30.730,
        "High": 30.820,
        "Low": 26.850
    },
    {
        "Date": "\/Date(1325376000000)\/",
        "Close": 31.590,
        "Volume": 1176242873,
        "Open": 31.590,
        "High": 31.630,
        "Low": 27.960
    },
    {
        "Date": "\/Date(1328054400000)\/",
        "Close": 31.650,
        "Volume": 1194157236,
        "Open": 31.650,
        "High": 31.680,
        "Low": 27.390
    }
]

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')
);
[
    {
        "Date": "\/Date(1196467200000)\/",
        "Close": 40.635,
        "Volume": 1650185491,
        "Open": 40.640,
        "High": 40.680,
        "Low": 39.090
    },
    {
        "Date": "\/Date(1199145600000)\/",
        "Close": 40.130,
        "Volume": 1979918237,
        "Open": 40.130,
        "High": 40.292,
        "Low": 36.460
    },
    {
        "Date": "\/Date(1201824000000)\/",
        "Close": 38.440,
        "Volume": 1572505911,
        "Open": 38.440,
        "High": 38.480,
        "Low": 36.697
    },
    {
        "Date": "\/Date(1204329600000)\/",
        "Close": 38.240,
        "Volume": 1922276774,
        "Open": 38.240,
        "High": 38.290,
        "Low": 35.940
    },
    {
        "Date": "\/Date(1207008000000)\/",
        "Close": 37.031,
        "Volume": 2078426778,
        "Open": 37.032,
        "High": 37.070,
        "Low": 34.350
    },
    {
        "Date": "\/Date(1209600000000)\/",
        "Close": 38.240,
        "Volume": 1727585885,
        "Open": 38.250,
        "High": 38.270,
        "Low": 34.886
    },
    {
        "Date": "\/Date(1212278400000)\/",
        "Close": 38.650,
        "Volume": 1776948280,
        "Open": 38.630,
        "High": 38.680,
        "Low": 36.700
    },
    {
        "Date": "\/Date(1214870400000)\/",
        "Close": 39.900,
        "Volume": 1456330078,
        "Open": 39.900,
        "High": 39.921,
        "Low": 36.550
    },
    {
        "Date": "\/Date(1217548800000)\/",
        "Close": 40.100,
        "Volume": 1557166494,
        "Open": 40.095,
        "High": 40.140,
        "Low": 38.260
    },
    {
        "Date": "\/Date(1220227200000)\/",
        "Close": 39.841,
        "Volume": 1506305343,
        "Open": 39.840,
        "High": 39.910,
        "Low": 38.240
    },
    {
        "Date": "\/Date(1222819200000)\/",
        "Close": 39.859,
        "Volume": 2034928239,
        "Open": 39.852,
        "High": 39.880,
        "Low": 37.330
    },
    {
        "Date": "\/Date(1225497600000)\/",
        "Close": 41.993,
        "Volume": 1542204312,
        "Open": 41.990,
        "High": 42.020,
        "Low": 38.710
    },
    {
        "Date": "\/Date(1228089600000)\/",
        "Close": 42.300,
        "Volume": 1255678260,
        "Open": 42.298,
        "High": 42.310,
        "Low": 40.360
    },
    {
        "Date": "\/Date(1230768000000)\/",
        "Close": 43.290,
        "Volume": 1685490186,
        "Open": 43.290,
        "High": 43.310,
        "Low": 40.160
    },
    {
        "Date": "\/Date(1233446400000)\/",
        "Close": 42.130,
        "Volume": 1445458017,
        "Open": 42.040,
        "High": 42.170,
        "Low": 40.260
    },
    {
        "Date": "\/Date(1235865600000)\/",
        "Close": 42.140,
        "Volume": 1958550854,
        "Open": 42.140,
        "High": 42.300,
        "Low": 40.190
    },
    {
        "Date": "\/Date(1238544000000)\/",
        "Close": 42.860,
        "Volume": 1533883066,
        "Open": 42.890,
        "High": 43.050,
        "Low": 41.390
    },
    {
        "Date": "\/Date(1241136000000)\/",
        "Close": 42.230,
        "Volume": 2396221596,
        "Open": 42.240,
        "High": 42.280,
        "Low": 38.230
    },
    {
        "Date": "\/Date(1243814400000)\/",
        "Close": 39.800,
        "Volume": 2709886930,
        "Open": 39.960,
        "High": 40.000,
        "Low": 37.160
    },
    {
        "Date": "\/Date(1246406400000)\/",
        "Close": 39.000,
        "Volume": 2091835303,
        "Open": 38.938,
        "High": 39.000,
        "Low": 35.540
    },
    {
        "Date": "\/Date(1249084800000)\/",
        "Close": 38.960,
        "Volume": 1986978146,
        "Open": 38.970,
        "High": 39.030,
        "Low": 36.260
    },
    {
        "Date": "\/Date(1251763200000)\/",
        "Close": 40.910,
        "Volume": 1860762246,
        "Open": 40.910,
        "High": 40.950,
        "Low": 38.320
    },
    {
        "Date": "\/Date(1254355200000)\/",
        "Close": 42.880,
        "Volume": 1974572432,
        "Open": 42.890,
        "High": 42.920,
        "Low": 39.880
    },
    {
        "Date": "\/Date(1257033600000)\/",
        "Close": 44.780,
        "Volume": 1903112379,
        "Open": 44.770,
        "High": 44.860,
        "Low": 41.610
    },
    {
        "Date": "\/Date(1259625600000)\/",
        "Close": 44.700,
        "Volume": 1533161602,
        "Open": 44.710,
        "High": 44.760,
        "Low": 42.880
    },
    {
        "Date": "\/Date(1262304000000)\/",
        "Close": 45.360,
        "Volume": 1823989418,
        "Open": 45.350,
        "High": 45.400,
        "Low": 42.530
    },
    {
        "Date": "\/Date(1264982400000)\/",
        "Close": 45.470,
        "Volume": 1730644867,
        "Open": 45.485,
        "High": 45.550,
        "Low": 42.930
    },
    {
        "Date": "\/Date(1267401600000)\/",
        "Close": 44.420,
        "Volume": 1749294085,
        "Open": 44.440,
        "High": 44.440,
        "Low": 42.060
    },
    {
        "Date": "\/Date(1270080000000)\/",
        "Close": 46.590,
        "Volume": 1171507724,
        "Open": 46.590,
        "High": 46.650,
        "Low": 43.300
    },
    {
        "Date": "\/Date(1272672000000)\/",
        "Close": 47.500,
        "Volume": 1282648621,
        "Open": 47.500,
        "High": 47.520,
        "Low": 45.660
    },
    {
        "Date": "\/Date(1275350400000)\/",
        "Close": 47.880,
        "Volume": 1228561577,
        "Open": 47.880,
        "High": 47.920,
        "Low": 46.160
    },
    {
        "Date": "\/Date(1277942400000)\/",
        "Close": 50.640,
        "Volume": 992870269,
        "Open": 50.640,
        "High": 50.654,
        "Low": 47.470
    },
    {
        "Date": "\/Date(1280620800000)\/",
        "Close": 49.020,
        "Volume": 981208528,
        "Open": 49.020,
        "High": 49.060,
        "Low": 44.390
    },
    {
        "Date": "\/Date(1283299200000)\/",
        "Close": 51.631,
        "Volume": 573031521,
        "Open": 51.630,
        "High": 51.680,
        "Low": 47.810
    },
    {
        "Date": "\/Date(1285891200000)\/",
        "Close": 55.010,
        "Volume": 1103427032,
        "Open": 54.959,
        "High": 55.060,
        "Low": 51.340
    },
    {
        "Date": "\/Date(1288569600000)\/",
        "Close": 54.680,
        "Volume": 995365278,
        "Open": 54.660,
        "High": 54.770,
        "Low": 48.660
    },
    {
        "Date": "\/Date(1291161600000)\/",
        "Close": 52.840,
        "Volume": 577831801,
        "Open": 52.840,
        "High": 52.840,
        "Low": 49.180
    },
    {
        "Date": "\/Date(1293840000000)\/",
        "Close": 51.370,
        "Volume": 849837840,
        "Open": 51.380,
        "High": 51.460,
        "Low": 41.630
    },
    {
        "Date": "\/Date(1296518400000)\/",
        "Close": 45.650,
        "Volume": 569927484,
        "Open": 45.650,
        "High": 45.870,
        "Low": 42.160
    },
    {
        "Date": "\/Date(1298937600000)\/",
        "Close": 45.020,
        "Volume": 563447812,
        "Open": 45.040,
        "High": 45.070,
        "Low": 41.050
    },
    {
        "Date": "\/Date(1301616000000)\/",
        "Close": 47.920,
        "Volume": 579215682,
        "Open": 47.930,
        "High": 48.050,
        "Low": 43.690
    },
    {
        "Date": "\/Date(1304208000000)\/",
        "Close": 50.450,
        "Volume": 589335627,
        "Open": 50.450,
        "High": 50.469,
        "Low": 47.220
    },
    {
        "Date": "\/Date(1306886400000)\/",
        "Close": 50.540,
        "Volume": 633735895,
        "Open": 50.480,
        "High": 50.610,
        "Low": 44.980
    },
    {
        "Date": "\/Date(1309478400000)\/",
        "Close": 46.060,
        "Volume": 558670899,
        "Open": 46.050,
        "High": 46.120,
        "Low": 43.300
    },
    {
        "Date": "\/Date(1312156800000)\/",
        "Close": 48.490,
        "Volume": 629930051,
        "Open": 48.480,
        "High": 48.560,
        "Low": 44.300
    },
    {
        "Date": "\/Date(1314835200000)\/",
        "Close": 46.930,
        "Volume": 808574022,
        "Open": 46.920,
        "High": 47.070,
        "Low": 37.180
    },
    {
        "Date": "\/Date(1317427200000)\/",
        "Close": 38.890,
        "Volume": 799617379,
        "Open": 38.860,
        "High": 38.970,
        "Low": 28.090
    },
    {
        "Date": "\/Date(1320105600000)\/",
        "Close": 33.920,
        "Volume": 394335489,
        "Open": 33.930,
        "High": 34.010,
        "Low": 25.060
    },
    {
        "Date": "\/Date(1322697600000)\/",
        "Close": 30.720,
        "Volume": 715467389,
        "Open": 30.730,
        "High": 30.820,
        "Low": 26.850
    },
    {
        "Date": "\/Date(1325376000000)\/",
        "Close": 31.590,
        "Volume": 1176242873,
        "Open": 31.590,
        "High": 31.630,
        "Low": 27.960
    },
    {
        "Date": "\/Date(1328054400000)\/",
        "Close": 31.650,
        "Volume": 1194157236,
        "Open": 31.650,
        "High": 31.680,
        "Low": 27.390
    }
]

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')
);
[
    {
        "Date": "\/Date(1196467200000)\/",
        "Close": 40.635,
        "Volume": 1650185491,
        "Open": 40.640,
        "High": 40.680,
        "Low": 39.090
    },
    {
        "Date": "\/Date(1199145600000)\/",
        "Close": 40.130,
        "Volume": 1979918237,
        "Open": 40.130,
        "High": 40.292,
        "Low": 36.460
    },
    {
        "Date": "\/Date(1201824000000)\/",
        "Close": 38.440,
        "Volume": 1572505911,
        "Open": 38.440,
        "High": 38.480,
        "Low": 36.697
    },
    {
        "Date": "\/Date(1204329600000)\/",
        "Close": 38.240,
        "Volume": 1922276774,
        "Open": 38.240,
        "High": 38.290,
        "Low": 35.940
    },
    {
        "Date": "\/Date(1207008000000)\/",
        "Close": 37.031,
        "Volume": 2078426778,
        "Open": 37.032,
        "High": 37.070,
        "Low": 34.350
    },
    {
        "Date": "\/Date(1209600000000)\/",
        "Close": 38.240,
        "Volume": 1727585885,
        "Open": 38.250,
        "High": 38.270,
        "Low": 34.886
    },
    {
        "Date": "\/Date(1212278400000)\/",
        "Close": 38.650,
        "Volume": 1776948280,
        "Open": 38.630,
        "High": 38.680,
        "Low": 36.700
    },
    {
        "Date": "\/Date(1214870400000)\/",
        "Close": 39.900,
        "Volume": 1456330078,
        "Open": 39.900,
        "High": 39.921,
        "Low": 36.550
    },
    {
        "Date": "\/Date(1217548800000)\/",
        "Close": 40.100,
        "Volume": 1557166494,
        "Open": 40.095,
        "High": 40.140,
        "Low": 38.260
    },
    {
        "Date": "\/Date(1220227200000)\/",
        "Close": 39.841,
        "Volume": 1506305343,
        "Open": 39.840,
        "High": 39.910,
        "Low": 38.240
    },
    {
        "Date": "\/Date(1222819200000)\/",
        "Close": 39.859,
        "Volume": 2034928239,
        "Open": 39.852,
        "High": 39.880,
        "Low": 37.330
    },
    {
        "Date": "\/Date(1225497600000)\/",
        "Close": 41.993,
        "Volume": 1542204312,
        "Open": 41.990,
        "High": 42.020,
        "Low": 38.710
    },
    {
        "Date": "\/Date(1228089600000)\/",
        "Close": 42.300,
        "Volume": 1255678260,
        "Open": 42.298,
        "High": 42.310,
        "Low": 40.360
    },
    {
        "Date": "\/Date(1230768000000)\/",
        "Close": 43.290,
        "Volume": 1685490186,
        "Open": 43.290,
        "High": 43.310,
        "Low": 40.160
    },
    {
        "Date": "\/Date(1233446400000)\/",
        "Close": 42.130,
        "Volume": 1445458017,
        "Open": 42.040,
        "High": 42.170,
        "Low": 40.260
    },
    {
        "Date": "\/Date(1235865600000)\/",
        "Close": 42.140,
        "Volume": 1958550854,
        "Open": 42.140,
        "High": 42.300,
        "Low": 40.190
    },
    {
        "Date": "\/Date(1238544000000)\/",
        "Close": 42.860,
        "Volume": 1533883066,
        "Open": 42.890,
        "High": 43.050,
        "Low": 41.390
    },
    {
        "Date": "\/Date(1241136000000)\/",
        "Close": 42.230,
        "Volume": 2396221596,
        "Open": 42.240,
        "High": 42.280,
        "Low": 38.230
    },
    {
        "Date": "\/Date(1243814400000)\/",
        "Close": 39.800,
        "Volume": 2709886930,
        "Open": 39.960,
        "High": 40.000,
        "Low": 37.160
    },
    {
        "Date": "\/Date(1246406400000)\/",
        "Close": 39.000,
        "Volume": 2091835303,
        "Open": 38.938,
        "High": 39.000,
        "Low": 35.540
    },
    {
        "Date": "\/Date(1249084800000)\/",
        "Close": 38.960,
        "Volume": 1986978146,
        "Open": 38.970,
        "High": 39.030,
        "Low": 36.260
    },
    {
        "Date": "\/Date(1251763200000)\/",
        "Close": 40.910,
        "Volume": 1860762246,
        "Open": 40.910,
        "High": 40.950,
        "Low": 38.320
    },
    {
        "Date": "\/Date(1254355200000)\/",
        "Close": 42.880,
        "Volume": 1974572432,
        "Open": 42.890,
        "High": 42.920,
        "Low": 39.880
    },
    {
        "Date": "\/Date(1257033600000)\/",
        "Close": 44.780,
        "Volume": 1903112379,
        "Open": 44.770,
        "High": 44.860,
        "Low": 41.610
    },
    {
        "Date": "\/Date(1259625600000)\/",
        "Close": 44.700,
        "Volume": 1533161602,
        "Open": 44.710,
        "High": 44.760,
        "Low": 42.880
    },
    {
        "Date": "\/Date(1262304000000)\/",
        "Close": 45.360,
        "Volume": 1823989418,
        "Open": 45.350,
        "High": 45.400,
        "Low": 42.530
    },
    {
        "Date": "\/Date(1264982400000)\/",
        "Close": 45.470,
        "Volume": 1730644867,
        "Open": 45.485,
        "High": 45.550,
        "Low": 42.930
    },
    {
        "Date": "\/Date(1267401600000)\/",
        "Close": 44.420,
        "Volume": 1749294085,
        "Open": 44.440,
        "High": 44.440,
        "Low": 42.060
    },
    {
        "Date": "\/Date(1270080000000)\/",
        "Close": 46.590,
        "Volume": 1171507724,
        "Open": 46.590,
        "High": 46.650,
        "Low": 43.300
    },
    {
        "Date": "\/Date(1272672000000)\/",
        "Close": 47.500,
        "Volume": 1282648621,
        "Open": 47.500,
        "High": 47.520,
        "Low": 45.660
    },
    {
        "Date": "\/Date(1275350400000)\/",
        "Close": 47.880,
        "Volume": 1228561577,
        "Open": 47.880,
        "High": 47.920,
        "Low": 46.160
    },
    {
        "Date": "\/Date(1277942400000)\/",
        "Close": 50.640,
        "Volume": 992870269,
        "Open": 50.640,
        "High": 50.654,
        "Low": 47.470
    },
    {
        "Date": "\/Date(1280620800000)\/",
        "Close": 49.020,
        "Volume": 981208528,
        "Open": 49.020,
        "High": 49.060,
        "Low": 44.390
    },
    {
        "Date": "\/Date(1283299200000)\/",
        "Close": 51.631,
        "Volume": 573031521,
        "Open": 51.630,
        "High": 51.680,
        "Low": 47.810
    },
    {
        "Date": "\/Date(1285891200000)\/",
        "Close": 55.010,
        "Volume": 1103427032,
        "Open": 54.959,
        "High": 55.060,
        "Low": 51.340
    },
    {
        "Date": "\/Date(1288569600000)\/",
        "Close": 54.680,
        "Volume": 995365278,
        "Open": 54.660,
        "High": 54.770,
        "Low": 48.660
    },
    {
        "Date": "\/Date(1291161600000)\/",
        "Close": 52.840,
        "Volume": 577831801,
        "Open": 52.840,
        "High": 52.840,
        "Low": 49.180
    },
    {
        "Date": "\/Date(1293840000000)\/",
        "Close": 51.370,
        "Volume": 849837840,
        "Open": 51.380,
        "High": 51.460,
        "Low": 41.630
    },
    {
        "Date": "\/Date(1296518400000)\/",
        "Close": 45.650,
        "Volume": 569927484,
        "Open": 45.650,
        "High": 45.870,
        "Low": 42.160
    },
    {
        "Date": "\/Date(1298937600000)\/",
        "Close": 45.020,
        "Volume": 563447812,
        "Open": 45.040,
        "High": 45.070,
        "Low": 41.050
    },
    {
        "Date": "\/Date(1301616000000)\/",
        "Close": 47.920,
        "Volume": 579215682,
        "Open": 47.930,
        "High": 48.050,
        "Low": 43.690
    },
    {
        "Date": "\/Date(1304208000000)\/",
        "Close": 50.450,
        "Volume": 589335627,
        "Open": 50.450,
        "High": 50.469,
        "Low": 47.220
    },
    {
        "Date": "\/Date(1306886400000)\/",
        "Close": 50.540,
        "Volume": 633735895,
        "Open": 50.480,
        "High": 50.610,
        "Low": 44.980
    },
    {
        "Date": "\/Date(1309478400000)\/",
        "Close": 46.060,
        "Volume": 558670899,
        "Open": 46.050,
        "High": 46.120,
        "Low": 43.300
    },
    {
        "Date": "\/Date(1312156800000)\/",
        "Close": 48.490,
        "Volume": 629930051,
        "Open": 48.480,
        "High": 48.560,
        "Low": 44.300
    },
    {
        "Date": "\/Date(1314835200000)\/",
        "Close": 46.930,
        "Volume": 808574022,
        "Open": 46.920,
        "High": 47.070,
        "Low": 37.180
    },
    {
        "Date": "\/Date(1317427200000)\/",
        "Close": 38.890,
        "Volume": 799617379,
        "Open": 38.860,
        "High": 38.970,
        "Low": 28.090
    },
    {
        "Date": "\/Date(1320105600000)\/",
        "Close": 33.920,
        "Volume": 394335489,
        "Open": 33.930,
        "High": 34.010,
        "Low": 25.060
    },
    {
        "Date": "\/Date(1322697600000)\/",
        "Close": 30.720,
        "Volume": 715467389,
        "Open": 30.730,
        "High": 30.820,
        "Low": 26.850
    },
    {
        "Date": "\/Date(1325376000000)\/",
        "Close": 31.590,
        "Volume": 1176242873,
        "Open": 31.590,
        "High": 31.630,
        "Low": 27.960
    },
    {
        "Date": "\/Date(1328054400000)\/",
        "Close": 31.650,
        "Volume": 1194157236,
        "Open": 31.650,
        "High": 31.680,
        "Low": 27.390
    }
]

In this article