KendoReact Charts Overview

Our React Charts library features a large collection of data visualization charts and seriesfrom Line, Bar, Pie, and Donut Charts to Sparkline and StockChart, tailored specifically for the finance industry.

The KendoReact Charts are native KendoReact components built specifically for the React ecosystem by a company with 19+ 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 KendoReact library is distributed through npm packages, and the Charts are available as @progress/kendo-react-charts.


Example
View Source
Edit In Stackblitz  
Change Theme:

React Chart Library: Graph Types

Categorical

Circular

Freeform

Scatter

Sparkline

Financial

Key Features

The KendoReact Charts provide a wide and always growing range of built-in features that isn't limited by the list in this section. This developer-friendly feature set allows you to create beautiful and functional applications faster. At the same time, the KendoReact development team works constantly to improve the performance of the components and their capabilities.

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 value axes of the Charts. The dedicated features for displaying time series get automatically activated when you bind an axis to Date objects. Read more about the Chart axes...

Rendering and Export

Depending on your application requirements, you can choose between two rendering modes for the ChartsCanvas (bitmap) and SVG (vector graphics). When the users need to save charts locally, they can take advantage of the variety of supported formats for exporting. Read more about the rendering modes and the export options...

Panning and Zooming

The built-in panning and zooming features are intuitive and allow end-users to focus on a specific segment of the data or to change the displayed range. You can enable these functionalities by using the pannable and zoomable options. Read more about panning and zooming...

Appearance

Through a selection of three gorgeous themes, you can control the colors and styles of the Chart component. If desired, you can customize these themes or use the Theme Builder to create new themes. Additionally, the highly customizable React graphs provide more than 1 000 customization options. Read more about the appearance of the Chart...

Globalization

The KendoReact Charts come with globalization features that allow you to create applications that can be used all over the world. This is achieved by combining the translation of component messages with adaptation to specific cultures. Read more about the globalization of the Charts...

Support Options

For any issues you might encounter while working with the KendoReact Charts, or any other KendoReact components, there are several support options available:

  • KendoReact license holders and anyone in an active trial can take advantage of the outstanding KendoReact customer support delivered by the developers who built the library. To submit a support ticket, use the Telerik support system.
  • The 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 those planned for release.
  • KendoReact uses GitHub Issues as its bug tracker, and you can submit any related reports there. Also, check out the closed list.
  • The KendoReact team is active on StackOverflow as well, and you can find a wealth of questions and answers there.
  • Need something unique that is tailor-made for your project? Progress offers its Progress Services group that can work with you to create any customized solution that you might need.

Implementing React Charts: Video Tutorial

With this 10-minute video tutorial, you’ll learn how to implement a good-looking chart customized with animations, title, custom axes, chart legend and tooltips with just a few lines of code. You’ll also see how to connect your React charts to a data set.