This Bar chart shows a regular bar chart that also makes use of the drawing API to draw a label on the chart.
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamics.js"></script> <script src="RGraph.common.tooltips.js"></script> <script src="RGraph.drawing.marker1.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> bar = new RGraph.Bar({ id: 'cvs', data: [4,8,5,3,2], options: { xaxisLabels: ['Fred','John','James','Louis','Pete'], colorsStroke: 'rgba(0,0,0,0)' } }).draw(); // Get the X/Y coordinates from the bar chart idx = 2; x = bar.coords[idx][0] + (bar.coords[idx][2] / 2); y = bar.coords[idx][1]; r = 15; marker = new RGraph.Drawing.Marker1({ id: 'cvs', x: x, y: y, radius: r, text: 'A', options: { tooltips: ['James was the winner by a country mile.'], highlightFill: 'rgba(255,0,0,0.2)', textAccessiblePointerevents: false } }).draw(); </script>