KendoReact Sparkline Overview

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


Generally, Sparklines are simple, word-sized graphics that can be embedded in tables, headlines, or chunks of text. The concept for their graphical representation was developed by Edward Tufte. The KendoReact Sparkline is a version of the KendoReact Chart which is tailored for this specific application. While the standard KendoReact Chart component behaves like a block element, due to its rendering inside a div element to allow for an easy embedding in texts, the Sparkline behaves like an inline element due to its rendering inside a span element.

While, typically, Sparklines are line charts, they can also be rendered as the following Chart types:

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

The KendoReact Sparkline component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-charts package.

The following example demonstrates the Sparkline in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

The procedures for installing, importing, and using all components from the KendoReact Charts library are identical. To learn how to use the Sparkline and the rest of the components from the package, see the Getting Started with the KendoReact Charts guide.

Key Features

  • Sparklines include shortcuts for setting the data and type series options.
  • The Sparkline also supports all configuration options that are applicable for the Categorical series type of the Chart.

In this article

Not finding the help you need?