Kendo UI for jQuery Sparkline Overview
The Kendo UI Sparkline is a very small chart that is drawn without axes, coordinates, legends, titles, or other chart-specific elements.
Sparklines behave like inline elements as they are rendered inside a span element so that they can be easily embedded in text as opposed to the standard Telerik UI Charts which behave like block elements as they are rendered inside div elements.
The Sparkline is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
- The Sparkline inherits configurations, methods, fields and events from the Categorical Charts.
While Sparklines are typically line charts, other types are supported as well:
- Line (default)
- Bar (Data Bars)
- Column
- Area
- Pie
-
Bullet
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 Telerik UI Sparklines HtmlHelper is a version of the Telerik UI Chart HtmlHelper that is tailored for this specific application.
Basic Configuration
To create the Sparklines, add an empty span in the HTML and provide it with an ID. Optionally, set the width and height of the desired chart inline or by using CSS.
- The width of the Line, Area, and Column Sparklines is determined by the number of data points.
- Bar and Bullet graphs have a default width that can be overridden with CSS.
- The Pie width equals the line-height to make a square.
<span id="sparkline" style="line-height: 60px"></span>
To render the Sparkline, select the div with a jQuery selector and call the kendoChart() function.
$("#sparkline").kendoSparkline([1, 2, 3, 2, 1]);