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

Custom chart tooltip color

2 Answers 233 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 22 Jun 2015, 01:50 PM

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 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Dyankova
Telerik team
answered on 24 Jun 2015, 11:01 AM

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
0
Paul
Top achievements
Rank 1
answered on 24 Jun 2015, 12:10 PM
Thank you! 
Tags
Chart
Asked by
Paul
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Paul
Top achievements
Rank 1
Share this question
or