The rect object allows you to add a rectangle to your charts. The rectangle can be used as a way to provide an extra tooltip
(for example) to your users.
Usage example
<script>
window.onload = function (e)
{
var line = new RGraph.Line('cvs', [4,9,1,3,2,6,5])
.Set('chart.labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'])
.Set('chart.hmargin', 5)
.Set('chart.tickmarks', 'endcircle')
.Set('chart.colors', ['black'])
.Draw();
var rect = new RGraph.Drawing.Rect('cvs', 35,line.canvas.height - 35 - 50,50,50)
.Set('chart.strokestyle', 'black')
.Set('chart.fillstyle', 'rgba(255,0,0,0.7)')
.Set('chart.shadow', true)
.Set('chart.tooltips', ['<b>Example</b><br />This is an example tooltip'])
.Draw();
}
</script>
chart.strokestyle The color used to stroke the circle. Default: transparent
chart.fillstyle The color used to fill the circle. Default: red
Shadow
chart.shadow This controls whether the shadow is enabled or not. Default: false
chart.shadow.color The color of the shadow. Default: gray
chart.shadow.offsetx The X offset that the shadow is drawn at. Default: 3
chart.shadow.offsety The Y offset that the shadow is drawn at. Default: 3
chart.shadow.blur The severity of the shadow blur. Default: 5
Interactive features
chart.tooltips The tooltip for the circle. Even though you can only have one - this should still be an array: mycircle.Set('chart.tooltips', ['The tooltip']); Default: null
chart.tooltips.event This can be onclick or onmousemove and controls what event is used to trigger the tooltip. Default: onclick
chart.tooltips.highlight This stipulates whether the circle will be highlighted when the tooltip is shown. Default: true
chart.tooltips.valign This is aligned to the top of the Rect or the center. Default: top
Events
chart.events.click If you want to add your own onclick function you can do so by assigning it to this property. See here for details. Default: null
chart.events.mousemove If you want to add your own onmousemove function you can do so by assigning it to this property. See here for details. Default: null
Miscellaneous
chart.highlight.stroke This is the color that the circle is highlighted (the stroke) in when the tooltip is shown. Default: black
chart.highlight.fill This is the color that the circle is highlighted in (the fill) when the tooltip is shown. Default: rgba(255,255,255,0.7)