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

Avoiding duplicate value in sparkline custom tooltip

2 Answers 46 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Tom
Top achievements
Rank 1
Tom asked on 16 Oct 2014, 02:06 PM
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

Sort by
0
Danail Vasilev
Telerik team
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.

 
0
Tom
Top achievements
Rank 1
answered on 21 Oct 2014, 12:11 PM
Thanks, Danail. I sure thought I was seeing the same behavior (duplicate info in the tool tip) even with shared set to false. However, a quick test confirms your reply. I did notice that the ClientTemplate (non-shared) tool tip was unacceptably slow--at least in my test. Glad that the shared tool tip works so much better--and that seems to be the more logical approach anyway.
Tags
Chart (HTML5)
Asked by
Tom
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Tom
Top achievements
Rank 1
Share this question
or