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

Avoiding duplicate value in sparkline custom tooltip

2 Answers 177 Views

Chart (HTML5)

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

Tom asked on 16 Oct 2014, 02:06 PM

sparkline-tooltip-shared.jpg

sparkline-tootlip-series.jpg

Not a question, but a discovery that I didn't see documented...

I wanted to add a custom tooltip to my sparkline column chart. However, I kept getting duplicate series values showing in the tooltip. (See the image "sparkline-tooltip-series.jpg.)" It seems that the series value is displayed in addition to whatever you put in the template if the template is added to the Series. Here is the code behind the example in the image:

<telerik:RadHtmlChart runat="server" ID="rhcSol" Layout="Sparkline" Width="150px" Height="40px">

<PlotArea>

<Series>

<telerik:ColumnSeries DataFieldY="cxCount">

<Appearance FillStyle-BackgroundColor="Red"></Appearance>

<TooltipsAppearance>

<ClientTemplate><div style="color:white;">Sol #= category #</div>

<div> #= value #</div>

</ClientTemplate>

</TooltipsAppearance>

</telerik:ColumnSeries>

</Series>

<XAxis DataLabelsField="sol"></XAxis>

</PlotArea>

<Legend>

<Appearance Visible="false"></Appearance>

</Legend>

</telerik:RadHtmlChart>

To avoid this extra appearance of the series value, you have to use a shared template and put it in the PlotArea (not the Series). Code example for sparkline-tooltip-shared.jpg:

<telerik:RadHtmlChart runat="server" ID="rhcSol" Layout="Sparkline" Width="150px" Height="40px">

<PlotArea>

<CommonTooltipsAppearance Shared="true" Visible="true">

<SharedTemplate><div style="color:white;">Sol #= category #</div>

<div style="text-align:right;"> #= points[i].value #</div>

</SharedTemplate>

</CommonTooltipsAppearance>

<Series>

<telerik:ColumnSeries DataFieldY="cxCount">

<Appearance FillStyle-BackgroundColor="Red"></Appearance>

<TooltipsAppearance>

</TooltipsAppearance>

</telerik:ColumnSeries>

</Series>

<XAxis DataLabelsField="sol"></XAxis>

</PlotArea>

<Legend>

<Appearance Visible="false"></Appearance>

</Legend>

</telerik:RadHtmlChart>

2 Answers, 1 is accepted

answered on 21 Oct 2014, 07:26 AM

Hi Tom,

Sparklines have their shared tooltip enabled by default. It is fine to set the tooltip of each series, however, you must disable the shared one. For example:
ASPX:

<telerik:RadHtmlChart runat="server" ID="rhcSol" Layout="Sparkline" Width="150px" Height="40px">

<PlotArea>

<CommonTooltipsAppearance Shared="false"></CommonTooltipsAppearance>

<Series>

<telerik:ColumnSeries DataFieldY="cxCount">

<Appearance FillStyle-BackgroundColor="Red"></Appearance>

<TooltipsAppearance>

<ClientTemplate><div style="color:white;">Sol #= category #</div>

<div> #= value #</div>

</ClientTemplate>

</TooltipsAppearance>

</telerik:ColumnSeries>

</Series>

<XAxis DataLabelsField="sol"></XAxis>

</PlotArea>

<Legend>

<Appearance Visible="false"></Appearance>

</Legend>

</telerik:RadHtmlChart>

C#:

protected void Page_Load(object sender, EventArgs e)

{

rhcSol.DataSource = GetData();

rhcSol.DataBind();

}

protected DataTable GetData()

{

DataTable dt = new DataTable();

dt.Columns.Add("ID", typeof(int));

dt.Columns.Add("cxCount", typeof(int));

dt.Columns.Add("sol", typeof(string));

dt.Rows.Add(1, 2, "item1");

dt.Rows.Add(2, 5, "item2");

dt.Rows.Add(3, 6, "item3");

return dt;

}

Regards,
Danail Vasilev
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.