# 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.

<CtaPanelIntroduction></CtaPanelIntroduction>

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](https://en.wikipedia.org/wiki/Edward_Tufte). The Telerik UI Sparkline component is a version of the Telerik UI Chart that is tailored for this specific application.

* [Demo page for the Sparkline](https://demos.telerik.com/kendo-ui/sparklines/index)

## 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.

```Razor HtmlHelper
    @(Html.Kendo().Sparkline()
            .Name("temp-log")
            .Type(SparklineType.Column)
            .Tooltip(tooltip => tooltip.Format("{0} &deg;C"))
            .Data(ViewBag.TemperatureData)
    )
```

```Razor TagHelper
    <kendo-sparkline name="temp-log"
                     data="@ViewBag.TemperatureData"
                     type="SparklineType.Column">
        <tooltip format="{0} &deg;C"></tooltip>
    </kendo-sparkline>
```

## Functionality and Features

* [Data binding](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/charts/sparkline/data-binding)—You can bind the chart directly to a database.

* [Axes configuration](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/charts/sparkline/axes-configuration)—You can customize the configuration of the axes.

* [Razor Pages binding](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/charts/sparkline/razor-page)

## See Also

* [Basic Usage of the Sparkline HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/sparklines/index)

* [Sparkline in Razor Pages](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/charts/sparkline/razor-page)

* [Server-Side API](https://www.telerik.com/aspnet-core-ui/documentation/api/sparkline)