Avoiding duplicate value in sparkline custom tooltip

3 posts, 0 answers
  1. Tom
    Tom avatar
    44 posts
    Member since:
    Oct 2010

    Posted 16 Oct 2014 Link to this post

    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. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 21 Oct 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tom
    Tom avatar
    44 posts
    Member since:
    Oct 2010

    Posted 21 Oct 2014 in reply to Danail Vasilev Link to this post

    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.
Back to Top