How do I go about customising the tooltips?


« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Pawan on 9th January 2018
Hi,

I am displaying two lines (1 for actual data and 1 for target date) in a line graph.
I want to display green text for actual and red text for target data in same tooltip popup.
And also want show a label near to graph to provide info to user that green line is for actual and red line is for target.

Thanks
Pawan
Posted by Richard on 9th January 2018
Hi there,

Well the tooltip is a DIV so it can contain HTML tags (eg SPAN tags) so you can use that to make the text different colours.

You can set styles on the RG.SVG.tooltips.style object for defaults like this:

RGraph.SVG.tooltips.style.color = 'black !important';
RGraph.SVG.tooltips.style.backgroundColor = 'white !important';
RGraph.SVG.tooltips.style.padding = '5px';
RGraph.SVG.tooltips.style.paddingLeft = '15px';


And the override function can be specified like this:


...
tooltipsOverride: function (obj, opt)
{
     var text = opt.text;

     return '<span style="color: red">{1}</span>'.format(
         text
     );
},
...


I suppose you could do formatting of the tooltips by specifying the tooltips like this (with just the values):

...
tooltips: ['7,9','8,6','2,5','1,3','5,8'],
...

And then use that text in your override function like this:

...
tooltipsOverride: function (obj, opt)
{
     // Get the values of the tooltips
     var values = opt.text.split(/,/).map(function (v, k, arr)
     {
         return parseInt(v);
     });
    

     // Format the text that is returned
     return 'A: <span style="color: red">{1}</span> B: <span style="color: green">{2}</span>'.format(
         values[0],
         values[1]
     );
},
...

There might be a few errors in there (just for good measure...).

Richard
Posted by Pawan on 10th January 2018
Hi there

I am using RGraph.Line.

Kindly share the code accordingly if possible..

Thanks.
Pawan
Posted by Richard on 11th January 2018
Hi there,

I just did in the previous answer. I think setting the tooltip as just the two numbers and then using thetooltipOverrode function is your best bet.

Richard

Add a reply




« Back to message list