Sparkline Tooltip Template

2 posts, 0 answers
  1. Ugur
    Ugur avatar
    1 posts
    Member since:
    Jul 2017

    Posted 15 Sep Link to this post

    Hi,

    How can I show the category with the value in the tooltip ? I used the template property for this as follows. The template property is not working in the sparkline but  template property is running in the chart.

     @(Html.Kendo().Sparkline<VKSWeb.Models.RasyoAnaliz.RasyoTum>()
                            .Name("turkiye-girisim-sparkline")
                            .Type(SparklineType.Area)
                            .Series(series => series
                                .Line(field => field.TurkiyeGirisimSayisi).Color("\\#639514"))
                            .SeriesDefaults(sd => sd.Line()
                                .Width(2)
                                .Tooltip(tooltip => tooltip.Visible(true)
                                    .Format("{0} Adet")
                                    .Template("${category} - ${value}")))
                            .CategoryAxis(categoryAxis => categoryAxis
                                .Crosshair(crossHair => crossHair.Visible(true)))
                            .ToClientTemplate())

     

  2. Tsvetina
    Admin
    Tsvetina avatar
    2087 posts

    Posted 20 Sep Link to this post

    Hi Ugur,

    There are two things needed to display a template with a category value in the Sparkline tooltip:
    1) Add categories to the configuration, either by setting a hard-coded array of categories or by setting a CategoryField in the series.
    2) Disable the shared tooltip in the Sparkline. Unlike the Chart, the Sparkline uses a shared tooltip by default, which prevents your template from working.

    Here is a sample Sparkline with a working tooltip template:
    @(Html.Kendo().Sparkline()
        .Name("sparkline-tmax-" + i)
        .DataSource(ds => ds.Read(read => read.Url(readUrl)))
        .Series(series => series
            .Column("TMax")
            .Color("#ff0000")
            .NegativeColor("#0099ff")
            .CategoryField("Date")
        )
        .Tooltip(t => t.Template("#: category# : #:value#").Shared(false))
    )


    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top