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
While Sparklines are typically line charts, other types are supported as well:
- Line (default)
- Bar (Data Bars)
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.
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
$("#sparkline").kendoSparkline([1, 2, 3, 2, 1]);