My tooltips aren't showing on Bar chart

« 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 F Webb on 25th April 2014
Am trying to create a simple bar chart, which when mouse over the bar shows a tooltip, and when click on the bar it opens a linked page. The click event works and is going to the page, but the tooltips are not showing. I have checked and it's firing the gettooltip event, but nothing is being displayed. What am I doing wrong - this is as simple as a bar chat can be! Doesn't work on any browser.

I have this in the header:
     <script type="text/javascript" src="/rgraph/libraries/RGraph.common.core.js" ></script>
     <script type="text/javascript" src="/rgraph/libraries/RGraph.common.dynamic.js" ></script>
     <script type="text/javascript" src="/rgraph/libraries/RGraph.common.effects.js" ></script>
     <script type="text/javascript" src="/rgraph/libraries/RGraph.drawing.text.js" ></script>
     <script type="text/javascript" src="/rgraph/libraries/" ></script>
     <script src="\"></script>
     <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->

And here's the code for the chart:
<canvas id="cvs_played" width="800" height="500">[No canvas support]</canvas><br />

   var bar = new RGraph.Bar('cvs_played', [10,9,6,5,5])
     .set('', myEventListener)
     .set('events.mousemove', function (e, bar) { = 'pointer';})
     .set('labels', ['Label1','Label2','Label3','Label4','Label5'])
     .set('tooltips', gettooltip)
     .set('tooltips.event', onmouseover)
     .set('hmargin', 1)
     .set('text.angle', 90)
     .set('gutter.bottom', 160)

   function gettooltip (idx)
     var tooltip = "";

     switch (idx) {
       case 0: tooltip="Data1 (10)"; break;
       case 1: tooltip="Data2 (9)"; break;
       case 2: tooltip="Data3 (6)"; break;
       case 3: tooltip="Data4 (5)"; break;
       case 4: tooltip="Data5 (5)"; break;
     return tooltip;

   function myEventListener (e, bar)
     var index = bar[5];
     switch (index) {
       case 0:'link1', '_blank'); break;
       case 1:'link2', '_blank'); break;
       case 2:'link3', '_blank'); break;
       case 3:'link4', '_blank'); break;
       case 4:'link5', '_blank'); break;
Posted by Richard on 25th April 2014
Hi there,

1. You've forgotten to include the tooltips library
2. The tooltips.event should be a string (eg 'onmousemove')
3. I've turned the effect off as tooltips were not appearing at full opacity. You won't notice because of the new window opening.

Posted by F Webb on 25th April 2014
Cool, thanks for the quick response, and the fix.
Posted by F Webb on 25th April 2014
How do I turn off the highlighting of the bar - when you move the mouse around the graph the tooltips keep up but the highlighting gets left behind, so it's out of sync. I don't need the highlighting just the tooltip.
Posted by Richard on 25th April 2014
Hi there,

You can set the option tooltips.highlight to false

Posted by F Webb on 25th April 2014
Perfect, thanks. I have a quesiton about colors which I can't figure out but will post that as a seperate topic - thanks again for speedy help.
Posted by narsi on 9th May 2014
my tool tip is not working in dialog but its working in html why please
Posted by Richard on 9th May 2014

Maybe its a z-index thing. Try adding this to your CSS:

.RGraph_tooltip {
     z-index: 9999 ! important;


« Back to message list