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

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