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 is distributed through NPM under the kendo-react-charts package.

The Chart component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Start Free Trial

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.jsx';
import { ChartContainer } from './chart-container.jsx';

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')
);

Is this article helpful?

Not finding the help you need?

Contact Support