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.

Chart Overview

The Chart renders a wide range of high-quality data visualizations.

The Chart wrapper for React is a client-side wrapper for the Kendo UI Chart widget.

Basic Usage

The following example demonstrates the Chart in action.

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

        this.series = [{data: [1, 2, 3]}, {data: [4, 5, 6]}];
        this.seriesDefaults = {type:"line"};
    }

    render() {
        return (
            <div>
            <Chart  
                seriesDefaults={this.seriesDefaults}
                series={this.series} />
            </div>
        );
    }
}

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

Features and Functionalities

The Chart delivers data binding functionalities.

Events

The following example demonstrates basic Chart events. You can subscribe to all Chart events by the handler name.

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

        this.series = props.data;
        this.seriesDefaults = props.seriesDefaults;
        this.categories = props.categories;
        this.valueAxis = props.valueAxis;
        this.legend = props.legend;

        this.onSeriesClick = this.onSeriesClick.bind(this);
        this.onLegendItemClick = this.onLegendItemClick.bind(this);
        this.onRender = this.onRender.bind(this);
    }

    onSeriesClick = (e) => {
         console.log("event :: seriesClick");
    }

    onLegendItemClick = (e) => {
        console.log("event :: legendItemClick");
    }

    onRender = (e) => {
        console.log("event :: render");
    }

    render() {
        return (
            <div>
                <div>
                   <Chart
                        change={this.onChange}
                        seriesClick={this.onSeriesClick}
                        legendItemClick={this.onLegendItemClick}
                        render={this.onRender}
                        select={this.onSelect}
                        seriesDefaults={this.seriesDefaults}
                        series={this.series}
                        categories={this.categories}
                        valueAxis={this.valueAxis}
                        legend={this.legend}
                         />
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ChartContainer seriesDefaults={{type:"line"}}
                data={[{
                    name: "India",
                    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
                }, {
                    name: "World",
                    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
                }, {
                    name: "Haiti",
                    data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
                }]}
                categories={[2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011]}
                valueAxis={{
                    labels: {
                        format: "{0}%"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: -10
                }}
                legend={{position: "bottom"}}/>,
    document.querySelector('my-app')
);
In this article