All Components

You are on the site of the Kendo UI Wrappers for React suite which contains wrappers for the Kendo UI for jQuery widgets. To explore the brand-new set of Kendo UI for React components which are built from the ground up, go to the Kendo UI for React suite.

Sparkline Overview

The Sparkline is a very small chart, drawn 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
  • Bar
  • Column
  • Area
  • Pie
  • Bullet

The Sparkline wrapper for React is a client-side wrapper for the Kendo UI Sparkline widget.

Basic Usage

The following example demonstrates the Sparkline in action.

class SparklineContainer extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: [936, 968, 1025, 999, 998, 1014, 1017, 1010, 1010, 1007],
            pieData: [1,2,3],
            bulletData: [21,23],
            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
                                }]
            }
        };  
    }

    render() {
        return (
            <div>
                <p>
                    A sparkline is a very small chart
                    <Sparkline data={this.state.data} />
                    , drawn without axes, coordinates or other supportive elements.
                </p>
                <p>
                    While sparklines are typically Line Charts
                    <Sparkline data={this.state.data} />
                    , they can also be rendered as:
                </p>
                <ul>
                <li>
                    Bar/Column Chart
                    <Sparkline type={"column"} data={this.state.data} />
                </li>
                <li>
                    Area Chart
                    <Sparkline type={"area"} data={this.state.data} />
                </li>
                <li>
                    Pie Chart
                    <Sparkline type={"pie"} data={this.state.pieData} />
                </li>
                <li>
                    Bullet Chart
                    <Sparkline type={"bullet"} data={this.state.bulletData} valueAxis={this.state.bulletValueAxis} />
                </li>
                </ul>
            </div>
        );
    }
}

ReactDOM.render(<SparklineContainer />, document.querySelector('my-app'));

Features and Functionalities

The Sparkline delivers data binding functionalities.

In this article