Custom chart tooltip color

3 posts, 1 answers
  1. Paul
    Paul avatar
    102 posts
    Member since:
    Jun 2010

    Posted 22 Jun 2015 Link to this post

    I have a chart with many colors. The tooltip should appear as black or white depending on the background color of the chart's bar. The only option I can think of is handle this with the series.name. But nothing works.

    This code does accurately put a white or a black piece of text onto the screen as a tooltip:

    .Tooltip(tooltip => tooltip
       .Visible(true)
       .Template("# if ((series.name === 'foo') || (series.name === 'bah')) { return '<strong style=\"color: black\">bar</strong>'; } else { return '<strong style=\"color: white\">bar</strong>'; } #")
    )

    However, once I plug in #= series.name # #= value # instead of bar the function breaks down and it no longer works.

    Next, I tried both SharedTemplate and Template as such (one at a time of course):

    .Tooltip(tooltip =>
       tooltip.Visible(true).Template("mytemplate")
       tooltip.Visible(true).SharedTemplate("mytemplate")
    )

    <script id="mytemplate" type="text/x-kendo-template">
       # if ((series.name === 'foo') || (series.name === 'bah')) { #
          <strong style="color: black">bar</strong>
       # } else { #
          <strong style="color: white">bar</strong>
       # } #
    </script>

    This didn't do anything and instead displayed a tooltip of "mytemplate".

    Is this possible to do? If not is there any kind of work around?

  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 24 Jun 2015 Link to this post

    Hi Paul,

    You could set different tooltip to each series via the series.tooltip configuration options: 

    //....
     .Series(series => {
       series.Column(new double[] { 1, 2, 3}).Name("India").Tooltip(t=>t.Background("#fff"));
       series.Column(new double[] { 4, 5, 6 }).Name("Russian Federation").Tooltip(t => t.Background("#000"));
       series.Column(new double[] { 7, 8, 9}).Name("Germany").Tooltip(t => t.Background("#fff"));
    })

     


    Regards,
    Iliana Nikolova
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Paul
    Paul avatar
    102 posts
    Member since:
    Jun 2010

    Posted 24 Jun 2015 in reply to Iliana Nikolova Link to this post

    Thank you! 
Back to Top