A Rose chart that has a custom ontooltip event listener. The defaults for tooltips have been set and the custom ontooltip event sets the appropriate border color.
This goes in the documents header:<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.common.tooltips.js"></script> <script src="RGraph.svg.rose.js"></script>Put this where you want the chart to show up:
<div style="width: 500px; height: 500px" id="chart-container"></div>This is the code that generates the chart:
<script> rose = new RGraph.SVG.Rose({ id: 'chart-container', data: [ [4,8,6,5], [4,5,1,2], [2,5,9,1], [6,5,8,8], [1,3,5,9], [4,6,8,5], [4,5,6,3] ], options: { tooltips: [ 'a','b','c','d', 'e','f','g','h', 'i','j','k','l', 'm','n','o','p', 'q','r','s','t', 'u','v','w','x', 'y','z','aa','bb' ], colors: ['blue','green','red','#aaa'], linewidth: 3 } }).draw().on('tooltip', function (obj) { var tooltip = RGraph.SVG.REG.get('tooltip'); var colors = rose.properties.colors; tooltip.style.border = '4px solid ' + colors[tooltip.__index__] }); RGraph.SVG.tooltips.style.backgroundColor = 'white'; RGraph.SVG.tooltips.style.color = 'black'; RGraph.SVG.tooltips.style.fontWeight = 'bold'; RGraph.SVG.tooltips.style.boxShadow = 'none'; </script>