# Data Binding

The Sparkline charts can visualize series that are bound to both local and remote data.

## Binding to Local Data

Binding to local data can be done by using either of the following approaches:

* Setting the root-level `Data` field to an array with values, or
* Configuring a series and passing the data as an array.

```Razor HtmlHelper
    @(Html.Kendo().Sparkline()
            .Name("temp-log")
            .Type(SparklineType.Column)
            .Series(d=>d.Column(new int[] { 10 ,15, 8 ,2,30}))
    )
```

```Razor TagHelper
    @{
        var series_data = new int[] { 10 ,15, 8 ,2,30};
    }
    <kendo-sparkline name="temp-log"
                     type="SparklineType.Column">
                    <series>
                        <series-item type="column"
                            data="@series_data">
                        </series-item>
                    </series>
    </kendo-sparkline>
```

Alternatively, set the root-level `Data` field to an array of values.

```Razor HtmlHelper
    @(Html.Kendo().Sparkline()
            .Name("temp-log")
            .Type(SparklineType.Column)
            .Data(ViewBag.TemperatureData)
    )
```

```Razor TagHelper
    <kendo-sparkline name="temp-log"
                     data="@ViewBag.TemperatureData"
                     type="SparklineType.Column">
    </kendo-sparkline>
```

## Binding to Remote Data

The following example demonstrates how to bind the Sparkline Chart to remote data. For more information, refer to the article on [binding Telerik UI Charts to a data source](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/charts/data-binding).

```Razor HtmlHelper
    @(Html.Kendo().Sparkline()
        .Name("sparkline-tmax")
        .DataSource(ds => ds.Read(read => read.Url(Url.Action("_Weather", "Sparklines"))))
        .Series(series => series
            .Column("TMax").Color("#ff0000").NegativeColor("#0099ff")
    )
```

```Razor TagHelper
     <kendo-sparkline name="sparkline-tmax">
        <datasource type="DataSourceTagHelperType.Ajax">
            <transport>
                <read url="@Url.Action("_Weather", "Sparklines")"/>
            </transport>
        </datasource>
        <series>
            <series-item type="column"
                name="TMax" color="#ff0000"
                negative-color="#0099ff">
            </series-item>
        </series>
    </kendo-sparkline>
```

## See Also

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

* [Local Data Binding by the Sparkline HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/sparklines/local-data-binding)

* [Remote Data Binding by the Sparkline HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/sparklines/remote-data-binding)

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