ASP.NET Core Sparkline Overview
The Telerik UI Sparkline TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Sparkline widget.
Sparklines are very small charts that are drawn without axes, coordinates, legends, titles, or other chart-specific elements. They 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.
Telerik UI for ASP.NET Core is 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.
New to Telerik UI for ASP.NET Core?
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 Sparkline component is a version of the Telerik UI Chart that is tailored for this specific application.
Basic Configuration
To create the Sparklines, add the component tags to the view and provide it with a Name. Optionally, set the width and height of the desired chart 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.
@(Html.Kendo().Sparkline()
.Name("temp-log")
.Type(SparklineType.Column)
.Tooltip(tooltip => tooltip.Format("{0} °C"))
.Data(ViewBag.TemperatureData)
)
<kendo-sparkline name="temp-log"
data="@ViewBag.TemperatureData"
type="SparklineType.Column">
<tooltip format="{0} °C"></tooltip>
</kendo-sparkline>
Functionality and Features
- Data binding—You can bind the chart directly to a database.
- Axes configuration—You can customize the configuration of the axes.