New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Sparkline Chart

UK Autumn Weather Statistics (1972 - 2012)

Mean Temp 9.46°C
Sunshine Hours 263.8h
Rainfall mm 473.1mm
Days of Air Frost 6.4d

Heating Working Time:

This example demonstrates multiple ASP.NET AJAX Chart controls, configured as Sparklines Charts. In order to create a Sparkline Chart you must create a regular instance of RadHtmlChart and set its Layout property to Sparkline.

Sparklines behave like inline elements (rendered inside spans) as opposite to standard HtmlCharts which behave like block elements(rendered inside divs), so that they can be easily embedded in text.

Generally a Sparkline is a very small chart, drawn without axes, coordinates, legend, title and other chart's specific elements. Nevertheless some of these elements can be set explicitly to the Sparkline chart (e.g. see the PieCharts Sparklines above).

The type of the series which can be used as Sparklines is as follows:

Related Resources


  • DefaultVB.aspx
  • styles.css
<%@ Page Language="vb"  %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="Stylesheet" href="styles.css" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg size-wide">
        <div class="sparklines-wrapper">
            <div class="weather-stats">
                <h2>UK Autumn Weather Statistics (1972 - 2012)</h2>
                <div class="row">
                    <span class="item">Mean Temp</span>
                    <span class="spark">
                        <telerik:RadHtmlChart ID="MeanTempChart" runat="server" Layout="Sparkline" Width="200px" Height="60px" Skin="Silk">
                            <PlotArea>
                                <CommonTooltipsAppearance Color="White" Shared="false" />
                                <Series>
                                    <telerik:LineSeries>
                                        <Appearance FillStyle-BackgroundColor="RosyBrown"></Appearance>
                                        <SeriesItems>
                                            <telerik:CategorySeriesItem Y="8.95" />
                                            <telerik:CategorySeriesItem Y="9.47" />
                                            <telerik:CategorySeriesItem Y="8.72" />
                                            <telerik:CategorySeriesItem Y="9.21" />
                                            <telerik:CategorySeriesItem Y="9.13" />
                                            <telerik:CategorySeriesItem Y="9.47" />
                                            <telerik:CategorySeriesItem Y="9.46" />
                                            <telerik:CategorySeriesItem Y="8.86" />
                                            <telerik:CategorySeriesItem Y="8.83" />
                                            <telerik:CategorySeriesItem Y="7.7" />
                                            <telerik:CategorySeriesItem Y="8.9" />
                                            <telerik:CategorySeriesItem Y="8.72" />
                                            <telerik:CategorySeriesItem Y="9.35" />
                                            <telerik:CategorySeriesItem Y="9.64" />
                                            <telerik:CategorySeriesItem Y="9.31" />
                                            <telerik:CategorySeriesItem Y="7.98" />
                                            <telerik:CategorySeriesItem Y="7.77" />
                                            <telerik:CategorySeriesItem Y="8.61" />
                                            <telerik:CategorySeriesItem Y="9.39" />
                                            <telerik:CategorySeriesItem Y="10.01" />
                                            <telerik:CategorySeriesItem Y="10.29" />
                                            <telerik:CategorySeriesItem Y="9.27" />
                                            <telerik:CategorySeriesItem Y="9.36" />
                                            <telerik:CategorySeriesItem Y="9.07" />
                                            <telerik:CategorySeriesItem Y="9.57" />
                                            <telerik:CategorySeriesItem Y="9.86" />
                                            <telerik:CategorySeriesItem Y="8.73" />
                                            <telerik:CategorySeriesItem Y="10.25" />
                                            <telerik:CategorySeriesItem Y="9.86" />
                                            <telerik:CategorySeriesItem Y="10.18" />
                                            <telerik:CategorySeriesItem Y="9.8" />
                                            <telerik:CategorySeriesItem Y="9.54" />
                                            <telerik:CategorySeriesItem Y="10.38" />
                                            <telerik:CategorySeriesItem Y="10.41" />
                                            <telerik:CategorySeriesItem Y="10.4" />
                                            <telerik:CategorySeriesItem Y="10.32" />
                                            <telerik:CategorySeriesItem Y="11.39" />
                                            <telerik:CategorySeriesItem Y="10.44" />
                                            <telerik:CategorySeriesItem Y="9.77" />
                                            <telerik:CategorySeriesItem Y="9.89" />
                                            <telerik:CategorySeriesItem Y="8.19" />
                                            <telerik:CategorySeriesItem Y="11.26" />
                                            <telerik:CategorySeriesItem Y="9.46" />
                                        </SeriesItems>
                                    </telerik:LineSeries>
                                </Series>
                            </PlotArea>
                        </telerik:RadHtmlChart>
                    </span>
                    <span class="value">9.46<span>&deg;C</span>
                    </span>
                </div>
                <div class="row">
                    <span class="item">Sunshine Hours
                    </span>
                    <span class="spark">
                        <telerik:RadHtmlChart ID="SunshineChart" runat="server" Layout="Sparkline" Width="200px" Height="60px" Skin="Silk">
                            <PlotArea>
                                <CommonTooltipsAppearance Color="White" Shared="false" />
                                <Series>
                                    <telerik:ColumnSeries>
                                        <Appearance FillStyle-BackgroundColor="OrangeRed"></Appearance>
                                        <SeriesItems>
                                            <telerik:CategorySeriesItem Y="260.7" />
                                            <telerik:CategorySeriesItem Y="266.2" />
                                            <telerik:CategorySeriesItem Y="249.3" />
                                            <telerik:CategorySeriesItem Y="268.4" />
                                            <telerik:CategorySeriesItem Y="257.6" />
                                            <telerik:CategorySeriesItem Y="297.1" />
                                            <telerik:CategorySeriesItem Y="289.9" />
                                            <telerik:CategorySeriesItem Y="268" />
                                            <telerik:CategorySeriesItem Y="213.7" />
                                            <telerik:CategorySeriesItem Y="250" />
                                            <telerik:CategorySeriesItem Y="244.9" />
                                            <telerik:CategorySeriesItem Y="234.2" />
                                            <telerik:CategorySeriesItem Y="257.5" />
                                            <telerik:CategorySeriesItem Y="248.4" />
                                            <telerik:CategorySeriesItem Y="279.2" />
                                            <telerik:CategorySeriesItem Y="249.1" />
                                            <telerik:CategorySeriesItem Y="264.6" />
                                            <telerik:CategorySeriesItem Y="234.8" />
                                            <telerik:CategorySeriesItem Y="252.6" />
                                            <telerik:CategorySeriesItem Y="311.8" />
                                            <telerik:CategorySeriesItem Y="297.3" />
                                            <telerik:CategorySeriesItem Y="251.6" />
                                            <telerik:CategorySeriesItem Y="250.6" />
                                            <telerik:CategorySeriesItem Y="205.7" />
                                            <telerik:CategorySeriesItem Y="267.2" />
                                            <telerik:CategorySeriesItem Y="330.8" />
                                            <telerik:CategorySeriesItem Y="275.7" />
                                            <telerik:CategorySeriesItem Y="285.2" />
                                            <telerik:CategorySeriesItem Y="247.7" />
                                            <telerik:CategorySeriesItem Y="282" />
                                            <telerik:CategorySeriesItem Y="267.7" />
                                            <telerik:CategorySeriesItem Y="287.2" />
                                            <telerik:CategorySeriesItem Y="252.3" />
                                            <telerik:CategorySeriesItem Y="343.6" />
                                            <telerik:CategorySeriesItem Y="271.3" />
                                            <telerik:CategorySeriesItem Y="283.4" />
                                            <telerik:CategorySeriesItem Y="299.9" />
                                            <telerik:CategorySeriesItem Y="290.6" />
                                            <telerik:CategorySeriesItem Y="280.7" />
                                            <telerik:CategorySeriesItem Y="296.2" />
                                            <telerik:CategorySeriesItem Y="295.3" />
                                            <telerik:CategorySeriesItem Y="283.8" />
                                            <telerik:CategorySeriesItem Y="263.8" />
                                        </SeriesItems>
                                    </telerik:ColumnSeries>
                                </Series>
                            </PlotArea>
                        </telerik:RadHtmlChart>
                    </span>
                    <span class="value">263.8<span>h</span>
                    </span>
                </div>
                <div class="row">
                    <span class="item">Rainfall mm
                    </span>
                    <span class="spark">
                        <telerik:RadHtmlChart ID="RainfallChart" runat="server" Layout="Sparkline" Width="200px" Height="60px" Skin="Silk">
                            <PlotArea>
                                <CommonTooltipsAppearance Color="White" Shared="false" />
                                <Series>
                                    <telerik:AreaSeries>
                                        <Appearance FillStyle-BackgroundColor="DodgerBlue"></Appearance>
                                        <SeriesItems>
                                            <telerik:CategorySeriesItem Y="323.4" />
                                            <telerik:CategorySeriesItem Y="233.8" />
                                            <telerik:CategorySeriesItem Y="244" />
                                            <telerik:CategorySeriesItem Y="222.1" />
                                            <telerik:CategorySeriesItem Y="358" />
                                            <telerik:CategorySeriesItem Y="208" />
                                            <telerik:CategorySeriesItem Y="240.8" />
                                            <telerik:CategorySeriesItem Y="312.4" />
                                            <telerik:CategorySeriesItem Y="279.8" />
                                            <telerik:CategorySeriesItem Y="345.2" />
                                            <telerik:CategorySeriesItem Y="339.2" />
                                            <telerik:CategorySeriesItem Y="358.9" />
                                            <telerik:CategorySeriesItem Y="365.4" />
                                            <telerik:CategorySeriesItem Y="302.2" />
                                            <telerik:CategorySeriesItem Y="305.9" />
                                            <telerik:CategorySeriesItem Y="306.8" />
                                            <telerik:CategorySeriesItem Y="380.1" />
                                            <telerik:CategorySeriesItem Y="277.1" />
                                            <telerik:CategorySeriesItem Y="341.5" />
                                            <telerik:CategorySeriesItem Y="258.3" />
                                            <telerik:CategorySeriesItem Y="368.5" />
                                            <telerik:CategorySeriesItem Y="250.5" />
                                            <telerik:CategorySeriesItem Y="385.3" />
                                            <telerik:CategorySeriesItem Y="338.3" />
                                            <telerik:CategorySeriesItem Y="383.1" />
                                            <telerik:CategorySeriesItem Y="264.1" />
                                            <telerik:CategorySeriesItem Y="236.2" />
                                            <telerik:CategorySeriesItem Y="268.1" />
                                            <telerik:CategorySeriesItem Y="417" />
                                            <telerik:CategorySeriesItem Y="400.6" />
                                            <telerik:CategorySeriesItem Y="497.8" />
                                            <telerik:CategorySeriesItem Y="295.6" />
                                            <telerik:CategorySeriesItem Y="430.4" />
                                            <telerik:CategorySeriesItem Y="214" />
                                            <telerik:CategorySeriesItem Y="395.6" />
                                            <telerik:CategorySeriesItem Y="321.5" />
                                            <telerik:CategorySeriesItem Y="372.9" />
                                            <telerik:CategorySeriesItem Y="387.7" />
                                            <telerik:CategorySeriesItem Y="446.4" />
                                            <telerik:CategorySeriesItem Y="394.2" />
                                            <telerik:CategorySeriesItem Y="239.8" />
                                            <telerik:CategorySeriesItem Y="368.4" />
                                            <telerik:CategorySeriesItem Y="473.1" />
                                        </SeriesItems>
                                    </telerik:AreaSeries>
                                </Series>
                            </PlotArea>
                        </telerik:RadHtmlChart>
                    </span>
                    <span class="value">473.1<span>mm</span>
                    </span>
                </div>
                <div class="row">
                    <span class="item">Days of Air Frost
                    </span>
                    <span class="spark">
                        <telerik:RadHtmlChart ID="AirFrostChart" runat="server" Layout="Sparkline" Width="200px" Height="60px" Skin="Silk">
                            <PlotArea>
                                <CommonTooltipsAppearance Color="White" Shared="false" />
                                <Series>
                                    <telerik:BarSeries>
                                        <Appearance FillStyle-BackgroundColor="SkyBlue"></Appearance>
                                        <SeriesItems>
                                            <telerik:CategorySeriesItem Y="10.3" />
                                            <telerik:CategorySeriesItem Y="6.6" />
                                            <telerik:CategorySeriesItem Y="5.5" />
                                            <telerik:CategorySeriesItem Y="9.3" />
                                            <telerik:CategorySeriesItem Y="3.3" />
                                            <telerik:CategorySeriesItem Y="6.9" />
                                            <telerik:CategorySeriesItem Y="8.8" />
                                            <telerik:CategorySeriesItem Y="6.8" />
                                            <telerik:CategorySeriesItem Y="9.4" />
                                            <telerik:CategorySeriesItem Y="15.2" />
                                            <telerik:CategorySeriesItem Y="8.6" />
                                            <telerik:CategorySeriesItem Y="10.8" />
                                            <telerik:CategorySeriesItem Y="7.5" />
                                            <telerik:CategorySeriesItem Y="7.4" />
                                            <telerik:CategorySeriesItem Y="8.3" />
                                            <telerik:CategorySeriesItem Y="13.3" />
                                            <telerik:CategorySeriesItem Y="10.3" />
                                            <telerik:CategorySeriesItem Y="10.2" />
                                            <telerik:CategorySeriesItem Y="5.2" />
                                            <telerik:CategorySeriesItem Y="4.4" />
                                            <telerik:CategorySeriesItem Y="2.6" />
                                            <telerik:CategorySeriesItem Y="8.7" />
                                            <telerik:CategorySeriesItem Y="5.9" />
                                            <telerik:CategorySeriesItem Y="6.7" />
                                            <telerik:CategorySeriesItem Y="4.8" />
                                            <telerik:CategorySeriesItem Y="8.8" />
                                            <telerik:CategorySeriesItem Y="12.8" />
                                            <telerik:CategorySeriesItem Y="5.5" />
                                            <telerik:CategorySeriesItem Y="5.2" />
                                            <telerik:CategorySeriesItem Y="4.1" />
                                            <telerik:CategorySeriesItem Y="3.8" />
                                            <telerik:CategorySeriesItem Y="9.7" />
                                            <telerik:CategorySeriesItem Y="1.9" />
                                            <telerik:CategorySeriesItem Y="8.2" />
                                            <telerik:CategorySeriesItem Y="4.9" />
                                            <telerik:CategorySeriesItem Y="5.9" />
                                            <telerik:CategorySeriesItem Y="5.8" />
                                            <telerik:CategorySeriesItem Y="2.7" />
                                            <telerik:CategorySeriesItem Y="6.8" />
                                            <telerik:CategorySeriesItem Y="7.1" />
                                            <telerik:CategorySeriesItem Y="17.3" />
                                            <telerik:CategorySeriesItem Y="3.3" />
                                            <telerik:CategorySeriesItem Y="6.4" />
                                        </SeriesItems>
                                    </telerik:BarSeries>
                                </Series>
                            </PlotArea>
                        </telerik:RadHtmlChart>
                    </span>
                    <span class="value">6.4<span>d</span>
                    </span>
                </div>
            </div>
            <div class="heating">
                <h2>Heating Working Time:
                </h2>
                <ul class="pie-list">
                    <li><span class="stats">
                        <telerik:RadHtmlChart ID="WinterChart" runat="server" Layout="Sparkline" Width="100px" Height="100px" Skin="Silk"> 
                            <PlotArea>
                                <Series>
                                    <telerik:PieSeries>
                                        <TooltipsAppearance Color="White" />
                                        <SeriesItems>
                                            <telerik:PieSeriesItem Y="5" BackgroundColor="DodgerBlue" />
                                            <telerik:PieSeriesItem Y="95" BackgroundColor="OrangeRed" />
                                        </SeriesItems>
                                    </telerik:PieSeries>
                                </Series>
                            </PlotArea>
                            <ChartTitle Text="Winter">
                                <Appearance Visible="true">
                                    <TextStyle Margin="-3px" FontFamily="Segoe UI,Segoe,Roboto,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif" />
                                </Appearance>
                            </ChartTitle>
                        </telerik:RadHtmlChart>
                    </span></li>
                    <li><span class="stats">
                        <telerik:RadHtmlChart ID="SpringChart" runat="server" Layout="Sparkline" Width="100px" Height="100px" Skin="Silk">
                            <PlotArea>
                                <Series>
                                    <telerik:PieSeries>
                                        <TooltipsAppearance Color="White" />
                                        <SeriesItems>
                                            <telerik:PieSeriesItem Y="75" BackgroundColor="DodgerBlue" />
                                            <telerik:PieSeriesItem Y="25" BackgroundColor="OrangeRed" />
                                        </SeriesItems>
                                    </telerik:PieSeries>
                                </Series>
                            </PlotArea>
                            <ChartTitle Text="Spring">
                                <Appearance Visible="true">
                                    <TextStyle Margin="-3px" FontFamily="Segoe UI,Segoe,Roboto,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif" />
                                </Appearance>
                            </ChartTitle>
                        </telerik:RadHtmlChart>
                    </span></li>
                    <li><span class="stats">
                        <telerik:RadHtmlChart ID="SummerChart" runat="server" Layout="Sparkline" Width="100px" Height="100px" Skin="Silk">
                            <PlotArea>
                                <Series>
                                    <telerik:PieSeries>
                                        <TooltipsAppearance Color="White" />
                                        <SeriesItems>
                                            <telerik:PieSeriesItem Y="85" BackgroundColor="DodgerBlue" />
                                            <telerik:PieSeriesItem Y="15" BackgroundColor="OrangeRed" />
                                        </SeriesItems>
                                    </telerik:PieSeries>
                                </Series>
                            </PlotArea>
                            <ChartTitle Text="Summer">
                                <Appearance Visible="true">
                                    <TextStyle Margin="-3px" FontFamily="Segoe UI,Segoe,Roboto,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif" />
                                </Appearance>
                            </ChartTitle>
                        </telerik:RadHtmlChart>
                    </span></li>
                    <li><span class="stats">
                        <telerik:RadHtmlChart ID="AutumnChart" runat="server" Layout="Sparkline" Width="100px" Height="100px" Skin="Silk">
                            <PlotArea>
                                <Series>
                                    <telerik:PieSeries>
                                        <TooltipsAppearance Color="White" />
                                        <SeriesItems>
                                            <telerik:PieSeriesItem Y="70" BackgroundColor="DodgerBlue" />
                                            <telerik:PieSeriesItem Y="30" BackgroundColor="OrangeRed" />
                                        </SeriesItems>
                                    </telerik:PieSeries>
                                </Series>
                            </PlotArea>
                            <ChartTitle Text="Autumn">
                                <Appearance Visible="true">
                                    <TextStyle Margin="-3px" FontFamily="Segoe UI,Segoe,Roboto,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif" />
                                </Appearance>
                            </ChartTitle>
                        </telerik:RadHtmlChart>
                    </span></li>
                </ul>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance