Charts / Chart / Getting Started
material theme

Getting Started with KendoReact Chart

The KendoReact Chart renders a wide range of high-quality data visualizations including panning and zooming, export and styling options.

The KendoReact Chart 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 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')
);
 /