How can I change the tooltip background color?


« 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 Srikanth on 9th July 2016
Hi ,

I am drawing bar chart i want to change the tooltip background color according to the bar color it's possible??? i used the following code please check it,Here it's shows color is undefined.

    tooltips: function (index)
                      {
                        var dataset = index[0];
                        var color = bar.get('colors')[dataset];
                        return tooltips[index];
                     },
Posted by Richard on 9th July 2016
Hi there,

Well, the way you're doing it is not the way to go. Using a function there is for getting the tooltip text dynamically (just the text). Using the ontooltip event is a better method I think - and what it contains depends on whether you have a regular Bar chart or a stacked/grouped one.

Here's an example for a regular bar chart:

www.rgraph.net/fiddle/view.html/bar-chart-getting-tooltip-background-color-from-the-chart-colors


PS It should also be noted that I'm releasing a new version today - so the appearance might be a little different to yours.








Richard

PLEASE READ:

If RGraph has helped you please give your feedback - thanks! You can give your feedback or leave a testimonial by adding a forum post or clicking on the speech bubble icon at the very top right.

But most of all: Please link to the RGraph website (get information on how to do it by clicking on the chain icon at the top right of the page)
Posted by Enter your name... on 15th July 2016
hi i need to change the bar chart tooltip background for that i used this function
new RGraph.Bar({
     id: 'cvs',
     data: [4,8,6,5],
     options: {
         colors: ['red','green','blue','pink'],
         labels: ['Jan','Feb','Mar','Apr'],
         tooltips: ['Jan','Feb','Mar','Apr'],
         textSize: 14,
         colorsSequential: true
     }
}).draw().on('tooltip', function (obj)
{
     var tooltip = RGraph.Registry.get('chart.tooltip');
     var idx = tooltip.__index__;
     var colors = obj.get('colors');

     tooltip.style.backgroundColor = colors[idx];
     tooltip.style.color = 'white';
     tooltip.style.fontWeight = 'bold';
});


For this one it's getting a color from index value but in my bar chart i have null values also so it's getting original gradient color so can you any other alternate solution.......................
Posted by Richard on 15th July 2016
Hi,

If you have null (or zero) values in a Bar chart there would be no bar - and therefore no tooltip.

For example this Bar chart has null values:

www.rgraph.net/fiddle/view.html/bar-chart-getting-tooltip-background-color-from-the-chart-colors





Richard

PLEASE READ:

If RGraph has helped you please give your feedback - thanks! You can give your feedback or leave a testimonial by adding a forum post or clicking on the speech bubble icon at the very top right.

But most of all: Please link to the RGraph website! (get information by clicking on the chain icon at the top right of the page)
Posted by Enter your name... on 15th July 2016
for the null values also it's count's the index value So i need to get an exact bar color because of iam using categories and more .....i need get the exact bar color.i am nearly using 8 types of charts,So i need exact color of bar or pie,


  on('tooltip', function (obj)

I gone through this obj also but your stored only what are the colors we gave.Somtimes it's follow your default colors also at that movement our index concept is not workout...

am used only 5 color for the 75 bars..
 
all the bars are filled with 5 colors coming to the tooltip used index concept it's showing gradient color.I hope your understed my problem is there any alternative way for this problem.
Posted by Richard on 15th July 2016
Hi there,

I'm afraid I don't understand what you're asking me for.




Richard

PLEASE READ:

If RGraph has helped you please give your feedback - thanks! You can give your feedback or leave a testimonial by adding a forum post or clicking on the speech bubble icon at the very top right.

But most of all: Please link to the RGraph website (get information on how to do it by clicking on the chain icon at the top right of the page)

Add a reply

 




« Back to message list
RGraph on social media