All Components
Components

Components / React / Charts / Chart

This website hosts native Kendo UI components, built from the ground up with the ultimate performance in mind, intended to be used in the React ecosystem.

Chart Overview

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

Basic Usage

The following example demonstrates the Chart in action.

import {
    Chart,
    ChartSeries,
    ChartSeriesItem,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
    ChartTitle,
    ChartLegend
} from '@progress/kendo-react-charts';

const categories = [ 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011 ];
const series = [ {
    name: 'India',
    data: [ 3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855 ]
}, {
    name: 'Russian Federation',
    data: [ 4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3 ]
}, {
    name: 'Germany',
    data: [ 0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995 ]
}, {
    name: 'World',
    data: [ 1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727 ]
} ];

const ChartContainer = () => (
    <Chart>
        <ChartTitle text="Gross domestic product growth GDP annual" />
        <ChartLegend position="top" orientation="horizontal" />
        <ChartCategoryAxis>
            <ChartCategoryAxisItem categories={categories} startAngle={45} />
        </ChartCategoryAxis>
        <ChartSeries>
            {series.map((item, idx) => (
                <ChartSeriesItem
                    key={idx}
                    type="column"
                    data={item.data}
                    name={item.name}
                />))}
        </ChartSeries>
    </Chart>
);

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

Functionality and Features

Events

The following example demonstrates basic Chart events.

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

import { Logger } from './console-logger';
import { ChartContainer } from './chart-container';

class DemoContainer extends React.Component {
    state = { events: [] }
    render() {
        return (
            <div>
                <ChartContainer onEvent={this.onEvent} />
                <Logger title="Event log" events={this.state.events} />
            </div>
        );
    }

    onEvent = (eventName, event) => {
        this.setState((prevState) => prevState.events.push(`${eventName}`));
        console.log(event);
    }
}

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

import React from 'react';

import {
    Chart,
    ChartSeries,
    ChartSeriesItem,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
    ChartTitle,
    ChartLegend
} from '@progress/kendo-react-charts';

const categories = [ 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011 ];
const series = [ {
    name: 'India',
    data: [ 3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855 ]
}, {
    name: 'Russian Federation',
    data: [ 4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3 ]
}, {
    name: 'Germany',
    data: [ 0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995 ]
}, {
    name: 'World',
    data: [ 1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727 ]
} ];

class ChartContainer extends React.Component {
    shouldComponentUpdate() {
        return false;
    }
    render() {
        const { onEvent } = this.props;

        return (
            <Chart
                onRender={(event) => onEvent('render', event)}
                onAxisLabelClick={(event) => onEvent('axisLabelClick', event)}
                onLegendItemClick={(event) => onEvent('legendItemClick', event)}
                onLegendItemHover={(event) => onEvent('legendItemHover', event)}
                onPlotAreaClick={(event) => onEvent('plotAreaClick', event)}
                onPlotAreaHover={(event) => onEvent('plotAreaHover', event)}
                onSeriesClick={(event) => onEvent('seriesClick', event)}
                onSeriesHover={(event) => onEvent('seriesHover', event)}
            >
                <ChartTitle text="Gross domestic product growth GDP annual" />
                <ChartLegend position="bottom" orientation="horizontal" />
                <ChartCategoryAxis>
                    <ChartCategoryAxisItem categories={categories} startAngle={45} />
                </ChartCategoryAxis>
                <ChartSeries>
                    {series.map((item, idx) => (
                        <ChartSeriesItem
                            key={idx}
                            type="line"
                            style="smooth"
                            data={item.data}
                            name={item.name}
                        />))}
                </ChartSeries>
            </Chart>
        );
    }
}

export { ChartContainer };

import React from 'react';

const Logger = (props) => (
    <div className="example-config">
        <h5>{ props.title }</h5>
        <ul className="event-log">
            { props.events.reverse().map((event, idx) => (<li key={idx}>{ event }</li>)) }
        </ul>
    </div>
);

export { Logger };
In this article