By using the drawing API rect object you can make the whole bar of a stacked Bar chart clickable - allowing you to 'group' tooltips etc
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.tooltips.js"></script> <script src="RGraph.drawing.rect.js"></script> <script src="RGraph.bar.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="250"> [No canvas support] </canvas>This is the code that generates the chart:
<script> tooltips = ['John results','James results','Freds results','Luke results','Luis results']; bar = new RGraph.Bar({ id: 'cvs', data: [[5.33,2.33,3.32],[3.42,2.23,4.23],[4.23,3.23,4.99], [7.99,2.98,2.35], [2.75,1.02,5.24]], options: { xaxisLabels: ['John','James','Fred','Luke','Luis'], labelsAbove: true, labelsAboveDecimals: 2, linewidth: 2, colorsStroke: 'white', colors: ['Gradient(#4572A7:#66f)','Gradient(#AA4643:white)','Gradient(#89A54E:white)'], shadow: true, shadowOffsetx: 1, shadowOffsety: 1, shadowBlur: 5, hmargin: 25, marginLeft: 45, backgroundGridVlines: false, backgroundGridBorder: false, axesColor: '#ccc', yaxis: false, grouping: 'stacked' } }).draw() for (var i=0; i<bar.coords2.length; ++i) { x = bar.coords2[i][0][0]; y = bar.coords2[i][0][1]; w = bar.coords2[i][0][2]; h = bar.coords2[i][0][3] + bar.coords2[i][1][3] + bar.coords2[i][2][3]; // Sum up the heights of the bar segments rect = new RGraph.Drawing.Rect({ id: 'cvs', x: x, y: y, width: w, height: h, options: { colorsStroke: 'rgba(0,0,0,0)', colorsFill: 'rgba(0,0,0,0)', tooltips: [tooltips[i]], highlightStroke: 'rgba(0,0,0,0)' } }).draw() } </script>