The drawing API rect object
The drawing API rect object which be added to your chart and provides a way for you to give your charts extra interactivity
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>
var line = new RGraph.Line({
id: 'cvs',
data: [4,9,1,3,2,6,5],
options: {
axes: false,
backgroundGridVlines: false,
backgroundGridBorder: false,
xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
hmargin: 5,
tickmarksStyle: 'none',
shadow: false,
spline: true,
colors: ['black']
}
}).draw()
var rect = new RGraph.Drawing.Rect({
id: 'cvs',
x: 35,
y: line.canvas.height - 35 - 50,
width: 50,
height: 50,
options: {
colorsStroke: 'transparent',
colorsFill: 'rgba(255,255,0,0.7)',
shadow: true,
shadowColor: '#aaa',
shadowBlur: 2,
shadowOffsetx: 2,
shadowOffsety: 2,
tooltips: ['<b>Example</b><br />This is an example tooltip'],
highlightStroke: 'transparent'
}
}).draw()
</script>
Properties
- Color properties
- Shadow properties
- Interactive features properties
- Event properties
- Miscellaneous properties
Color properties
| Property | Description | Default |
|---|---|---|
| colorsStroke | The color used to stroke the circle. | transparent |
| colorsFill | The color used to fill the circle. | red |
Shadow properties
Interactive features properties
Event properties
| Property | Description | Default |
|---|---|---|
| eventsClick | If you want to add your own onclick function you can do so by assigning it to this property. See here for details. | null |
| eventsMousemove | If you want to add your own onmousemove function you can do so by assigning it to this property. See here for details. | null |
| eventsMouseover | If you want to add your own onmouseover function you can do so by assigning it to this property. See here for details. | null |
| eventsMouseout | If you want to add your own onmouseout function you can do so by assigning it to this property. See here for details. | null |