All Components

Sparkline Overview

The Sparkline is a very small chart, drawn without axes, coordinates, legends, titles or other chart-specific elements.

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

While, typically, Sparklines are Line Charts, they can also be rendered as the following types:

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

Basic Usage

The following example demonstrates the Sparkline in action.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <p>
            A sparkline is a very small chart
            <kendo-sparkline [data]="data">
            </kendo-sparkline>
            , drawn without axes, coordinates or other supportive elements.
        </p>
        <p>
            While sparklines are typically Line Charts
            <kendo-sparkline [data]="data">
            </kendo-sparkline>
            , they can also be rendered as:
        <p>
        <ul>
          <li>
            Bar/Column Chart
            <kendo-sparkline [data]="data" type="column">
            </kendo-sparkline>
          </li>
          <li>
            Area Chart
            <kendo-sparkline [data]="data" type="area">
            </kendo-sparkline>
          </li>
          <li>
            Pie Chart
            <kendo-sparkline [data]="pieData" type="pie">
            </kendo-sparkline>
          </li>
          <li>
            Bullet Chart
            <kendo-sparkline [data]="bulletData" type="bullet" [valueAxis]="bulletValueAxis">
            </kendo-sparkline>
          </li>
        </ul>
    `
})
export class AppComponent {
    public data: any[] = [
        936, 968, 1025, 999, 998, 1014, 1017, 1010, 1010, 1007
    ];

    public pieData: any[] = [1, 2, 3];
    public bulletData: any[] = [21, 23];
    public bulletValueAxis: any = {
        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
        }]
    };
}

Configuration

The Sparkline supports all components and options of the Chart that are applicable for the Categorical Charts. It also includes shortcuts for setting the data and type series options.

In this article