All Components

This website hosts native Kendo UI components, built from the ground up with the ultimate performance in mind, intended to be used in the React ecosystem.

Sparkline Overview

The 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 Kendo UI Sparkline is a version of the Kendo UI Chart which is tailored for this specific application. While the standard Kendo UI 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

Basic Usage

The following example demonstrates the Sparkline in action.

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

import {
    Sparkline,
    ChartValueAxis,
    ChartValueAxisItem
} from '@progress/kendo-react-charts';

import 'hammerjs';

const sparklineData = [ 936, 968, 1025, 999, 998, 1014, 1017, 1010, 1010, 1007 ];
const bulletData = [ 21, 23 ];
const bulletValueAxis = {
    min: 0,
    max: 30,
    plotBands: [{
        from: 0, to: 15, color: '#787878', opacity: 0.15
    }, {
        from: 15, to: 22, color: '#787878', opacity: 0.3
    }, {
        from: 22, to: 30, color: '#787878', opacity: 0.15
    }]
};
const SparklineContainer = () => (
    <div>
        <p>
            A sparkline is a very small chart
            <Sparkline data={sparklineData} />
            , drawn without axes, coordinates or other supportive elements.
        </p>
        <p>
            While sparklines are typically Line Charts
            <Sparkline data={sparklineData} />
            , they can also be rendered as:
        </p>
        <ul>
            <li>
                Bar/Column type Sparkline chart
                <Sparkline data={sparklineData} type="column" />
            </li>
            <li>
                Area type Sparkline chart
                <Sparkline data={sparklineData} type="area" />
            </li>
            <li>
                Pie type Sparkline chart
                <Sparkline data={sparklineData} type="pie" />
            </li>
            <li>
                Bullet type Sparkline chart
                <Sparkline data={bulletData} type="bullet">
                    <ChartValueAxis>
                        <ChartValueAxisItem {...bulletValueAxis} />
                    </ChartValueAxis>
                </Sparkline>
            </li>
        </ul>
    </div>
);
ReactDOM.render(
    <SparklineContainer />,
    document.querySelector('my-app')
);

Functionality and Features

The Sparkline supports all configuration options that are applicable for the Categorical series type of the Chart.

Sparklines also include shortcuts for setting the data and type series options.

In this article