KendoReact Charts Overview

Our React Charts library features a large collection of charts and series types for data visualization, from Line, Bar and Pie/Donut Charts to Sprakline and StockChart, tailored specifically for the finance industry.

The KendoReact Charts are built on React from the ground up, by a company with 10+ years of experience in making enterprise-ready components and UI widgets. This results in React graphs that deliver lightning fast performance and are highly customizable.

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

React Charts Demo

import React from "react";
import ReactDOM from "react-dom";

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

const categories = [2002, 2003, 2004];
const series = [
    {
        name: "India",
        data: [3.907, 7.943, 7.848]
    },
    {
        name: "Russian Federation",
        data: [4.743, 7.295, 7.175]
    },
    {
        name: "Germany",
        data: [0.21, 0.375, 1.161]
    },
    {
        name: "World",
        data: [1.988, 2.733, 3.994]
    }
];

const areaData = [
    {
        name: "World",
        data: [3.988, 3.733, 3.994]
    },
    {
        name: "Germany",
        data: [2.21, 2.375, 2.161]
    },
    {
        name: "Russian Federation",
        data: [1.743, 1.295, 1.175]
    },
    {
        name: "India",
        data: [0.907, 0.943, 0.848]
    }
]

const pieData = [
    {
        name: "India",
        share: 0.24
    },
    {
        name: "Russian Federation",
        share: 0.26,
        explode: true
    },
    {
        name: "Germany",
        share: 0.1
    },
    {
        name: "World",
        share: 0.4
    }
];

const ChartContainer = () => (
    <>
        <div className="row mb-3">
            <div className="col-6">
                <div className="k-card">
                    <Chart style={{ height: 350 }}>
                        <ChartTitle text="Column Chart" />
                        <ChartLegend position="top" orientation="horizontal" />
                        <ChartCategoryAxis>
                            <ChartCategoryAxisItem categories={categories} startAngle={45} />
                        </ChartCategoryAxis>
                        <ChartSeries>
                            {series.map((item, idx) => (
                                <ChartSeriesItem
                                    key={idx}
                                    type="column"
                                    tooltip={{ visible: true }}
                                    data={item.data}
                                    name={item.name}
                                />
                            ))}
                        </ChartSeries>
                    </Chart>
                </div>
            </div>
            <div className="col-6">
                <div className="k-card">
                    <Chart style={{ height: 350 }}>
                        <ChartTitle text="Line Chart" />
                        <ChartLegend position="top" orientation="horizontal" />
                        <ChartCategoryAxis>
                            <ChartCategoryAxisItem categories={categories} startAngle={45} />
                        </ChartCategoryAxis>
                        <ChartSeries>
                            {series.map((item, idx) => (
                                <ChartSeriesItem
                                    key={idx}
                                    type="line"
                                    tooltip={{ visible: true }}
                                    data={item.data}
                                    name={item.name}
                                />
                            ))}
                        </ChartSeries>
                    </Chart>
                </div>
            </div>
        </div>
        <div className="row">
            <div className="col-6">
                <div className="k-card">
                    <Chart style={{ height: 350 }}>
                        <ChartTitle text="Area Chart" />
                        <ChartLegend position="top" orientation="horizontal" />
                        <ChartCategoryAxis>
                            <ChartCategoryAxisItem categories={categories} startAngle={45} />
                        </ChartCategoryAxis>
                        <ChartSeries>
                            {areaData.map((item, idx) => (
                                <ChartSeriesItem
                                    key={idx}
                                    type="area"
                                    tooltip={{ visible: true }}
                                    data={item.data}
                                    name={item.name}
                                />
                            ))}
                        </ChartSeries>
                    </Chart>
                </div>
            </div>
            <div className="col-6">
                <div className="k-card">
                    <Chart style={{ height: 350 }}>
                        <ChartTitle text="Pie Chart" />
                        <ChartLegend position="top" orientation="horizontal" />
                        <ChartSeries>
                            <ChartSeriesItem
                                type="pie"
                                overlay={{
                                    gradient: "sharpBevel"
                                }}
                                tooltip={{ visible: true }}
                                data={pieData}
                                categoryField="name"
                                field="share"
                            />
                        </ChartSeries>
                    </Chart>
                </div>
            </div>
        </div>
    </>
);

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

This demo implements some of the features that are available in the KendoReact Chart library.

  • Chart titles provide contextual information for the data.
  • Legends describe the different data series that are visualized in the graphs.
  • A built-in tooltip is enabled to show the exact value of any point on the chart.

React Chart Library: Graph Types

Categorical

Area

Area charts and Vertical Area charts are categorical charts, which are suitable for displaying quantitative data by using continuous lines.

Bar

Bar charts and Column charts are categorical charts, which display data by using horizontal or vertical bars whose lengths vary according to their value.

Box Plot

Box Plot charts are categorical charts, which graphically render groups of numerical data through their quartiles.

Bullet

Bullet charts are categorical charts, which are a variation of the Bar charts.

Line

Line charts and Vertical Line charts are categorical charts, which display continuous data as lines that pass through points defined by the values of their items.

Radar

Radar charts, also known as Spider charts, are categorical charts, which wrap the X axis in a circle or polygon.

Range Area

Range Area charts are categorical charts, which represent a variation of the Area charts.

Range Bar

Range Bar charts are categorical charts, which represent a variation of the Bar charts.

Waterfall

Waterfall charts are categorical charts, which display the cumulative effect of sequentially introduced positive or negative values.


Circular

Donut

Donut charts are circular charts, which represent a variation of the Pie charts and are capable of displaying multiple nested series.

Pie

Pie charts are circular charts, which display data in the form of single-series sectors from a two-dimensional circle and are useful for rendering data as part of a whole.


Freeform

Funnel

Funnel charts are freeform charts, which display a single series of data in progressively decreasing or increasing proportions that are organized in segments, where each segment represents the value for the particular item from the series.


Scatter

Bubble

Bubble charts are scatter charts, which display data as points with coordinates and sizes that are defined by the value of their items.

Polar

Polar charts are scatter charts which display two-dimensional data series in polar coordinates.

Scatter Plot and Scatter Line

Scatter Plot and Scatter Line charts are the two main variations of scatter charts and are suitable for displaying numerical data.


Sparkline

The KendoReact Sparkline is a tiny chart without axes, coordinates, legends, titles, or other chart-specific elements.

The following Sparkline graph types:

  • Line (default)
  • Bar (Data Bars)
  • Column
  • Area
  • Pie
  • Bullet

StockChart

The KendoReact StockChart is a specialized control for visualizing the price movement of a financial instrument over a certain period of time.

React Charts Features

Among the many features, which this React Chart library delivers are:

  • Types—Different types of data require different ways of visualizing the data in the Chart (Line, Area, Bar, Column, Donut and many more).
  • Axes—If you need to change the labels, the background, the step, the lines and any other axis option, the React graphs support in-depth customization. You can customize over 100+ options for the category and values axes of the Charts.
  • Rendering modes—You can render the KendoReact Charts as SVG or Canvas.
  • Export—The KendoReact Charts can be exported to an image, PDF or SVG, enabling the user to easily save them locally or on the server.
  • Panning and Zooming—If you need to focus on a specific segment of the data, the KendoReact Chart enables the user to change the displayed range by panning and zooming.
  • Customization—The React graphs are highly customizable with more than 1 000 customization options available.
  • Theme support—The KendoReact Charts, as well as all 80+ components in the KendoReact suite, are styled in three polished themes (Bootstrap, Material, and Default) and can be further customized to match your specific design guidelines.

Support Options

For any issues you might encounter while working with the KendoReact Charts, use any of the available support channels:

  • KendoReact license holders and active trialists can take advantage of our outstanding customer support delivered by the developers building the library. To submit a support ticket, use the KendoReact dedicated support system.
  • KendoReact forums are part of the free support you can get from the community and from the KendoReact team on all kinds of general issues.
  • KendoReact feedback portal and KendoReact roadmap provide information on the features in discussion and also the planned ones for release.
  • KendoReact uses GitHub Issues as its bug tracker and you can submit any related reports there. Also, check out the closed list.
  • You may still need a tailor-made solution for your project. In such cases, go straight to Telerik Services.