Telerik UI for Windows 8 HTML

RadSparkline displays a tooltip when you hover over one of its data points (a column, pie segment, point on the line, etc.). By default, it displays the value of the current data point. This article describes the tooltip's available customization options.

Using a Shared Tooltip

By default, in sparklines that are identified by a category and a value (line, column, bar, area), the tooltip displays them both. However, you can change this behavior and display only the value. This is done by setting the tooltip.shared property to false.

sparkline-tooltip-shared

Formatting Values

The point value can be formatted using the format property.

Formatting Values Example Copy imageCopy
<span id="formatSparkline" data-win-control="Telerik.UI.RadSparkline" data-win-options="{
    series: [
        {
            type: 'column',
            field: 'UnitPrice',
            name: 'Unit Price'
        }
    ],
    dataSource: {
        data: SampleData.salesPerYear
    },
    categoryAxis: {
        field: 'Year',
        crosshair: {
            visible: false
        }
    },
    tooltip: {
    shared: false,
        format: 'Value: {0:C0}'
    },
    height: 50,
    width: 100,
    theme: 'light'
}"></span>

The format string supports a subset of the syntax available in Java and C#. Here "C0" indicates that the value should be rounded to a whole number and should have a thousands separator and a currency sign.

sparkline-tooltip-format
Note

If a tooltip template is set, the value of the format property will be ignored and the template will be used instead.

Providing a Template

Tooltip content can be defined with a string template with binding expressions when more flexibility is desired. The template provides access to all information associated with the point:

  • value: The point value.

  • category: The category name.

  • series: The data series.

  • dataItem: The original data item (when binding to DataSource).

For example:

HTML Copy imageCopy
<span id="tooltip" data-win-control="Telerik.UI.RadSparkline" data-win-options="{
    series: [
        {
            type: 'column',
            field: 'UnitsInStock',
            name: 'Number of Units'
        }
    ],
    dataSource: {
        data: SampleData.salesPerYear
    },
    categoryAxis: {
        field: 'Year',
        crosshair: {
            visible: false
        }
    },
    tooltip: {
        shared: false,
        template: '#=series.name#: #=value# <br/> Price: $#=dataItem.UnitPrice#'
    },
    height: 50,
    width: 100,
    theme: 'light'
}"></span>

will produce the following result:

sparkline-tooltip-template
Note

To be able to display only your customized tooltip, set the tooltip.shared property to false. Otherwise, the template will also contain the bolded category name.