This chart formerly used the drawing API rect object - however now it simply uses two Bar charts - the second of which is transparent and overlays the first.
This goes in the documents header:
<script src="RGraph.common.core.js" ></script>
<script src="RGraph.common.key.js" ></script>
<script src="RGraph.common.dynamic.js" ></script>
<script src="RGraph.common.tooltips.js" ></script>
<style>
.RGraph_tooltip {padding:10px!important;}
.RGraph_tooltip table {border-collapse:collapse;}
.RGraph_tooltip table td:nth-child(1) {font-weight:bold;padding:3px;}
.RGraph_tooltip table td:nth-child(1) {background-color:#ddd;}
.RGraph_tooltip table td:nth-child(2) {padding-left:10px;}
</style>
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: