Line Series formatting questions

2 posts, 0 answers
  1. Lane
    Lane avatar
    13 posts
    Member since:
    Nov 2011

    Posted 08 Jan 2014 Link to this post

    1. Is it possible when hovering over a line series for a small marker or indicator to appear on the line at the hover point?  (Something similar to the little dot at
    2. If I want to format a tooltip using ClientTemplate, do I have to be using KendoUI per this article?  I want to display both the XAxis and YAxis values in the tooltip.  The XAxis value comes from a DateTime column in my datasource, and the YAxis is a decimal that I want to display in #,# format (with thousands separator and no decimal places).  When I set it in the ClientTemplate, I'm unable to format it.  I'm not using KendoUI.  Is there any other option?  Can I do it server-side?
  2. Danail Vasilev
    Danail Vasilev avatar
    1476 posts

    Posted 13 Jan 2014 Link to this post

    Hi Lane,

    Currently there aren't any properties that control the highlighting effect of the hovered series. Nevertheless such a feature request has already been logged in our feedback portal here and you can monitor, comment or raise its priority by voting on it. For the time being you can use the provided example below to display marker of the series items only when they are hovered:
        function pageLoad() {
            var chart = $find("<%=RadHtmlChart1.ClientID%>");
            chart._chartObject.options.series[0].highlight = {
                markers: {
                    visible: true

    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
                    <MarkersAppearance Visible="false" />
                        <telerik:CategorySeriesItem Y="30" />
                        <telerik:CategorySeriesItem Y="10" />
                        <telerik:CategorySeriesItem Y="20" />
                        <telerik:CategorySeriesItem Y="15" />

    As for the formatting of dates and number in a template you must use kendo.format() method. The reason why the kendo object is used there is because the RadHtmlChart control is actually an ASP.NET control wrapper around our Kendo UI Chart. Please find below an example on how to use that method to format numbers and dates:
    <telerik:ScatterLineSeries DataFieldY="SellQuantity" DataFieldX="SellDate">
        <LabelsAppearance DataFormatString="{1} cars sold on {0:m}">
        <TooltipsAppearance Color="White" DataFormatString="{1} cars sold on<br/>{0:D}">
                x value: #=kendo.format(\'{0:yyyy-MM}\',value.x)# <br/>
                y value: #=kendo.format(\'{0:N0}\', value.y)#

    You can also find the full VS example in the attached archive. You may also find useful Formatting Numbers and Formatting Dates help articles.

    Danail Vasilev
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. DevCraft R3 2016 release webinar banner
Back to Top