This is a migrated thread and some comments may be shown as answers.

Sparkline Tooltip Template

1 Answer 143 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Ugur
Top achievements
Rank 1
Ugur asked on 15 Sep 2017, 01:20 PM

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())

 

1 Answer, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 20 Sep 2017, 11:45 AM
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.
Tags
Chart
Asked by
Ugur
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or