The drawing API Poly object

Summary: The drawing API Poly object which be added to your charts to give them extra clickable hotspots. You give the poly object a set of points and it forms a polygon that you can click on.

[No canvas support]

The Poly object (which is short for polygon) is a drawing API object which you can use to add regular or irregular shapes to your charts.


Usage example

<script>
    var bar = new RGraph.Bar({
        id: 'cvs',
        data: [4,8,6,5,6,9,9,4],
        options: {
            axes: false,
            marginBottom: 45
        }
    }).draw();
    
    var poly = new RGraph.Drawing.Poly({
        id: 'cvs',
        coords: [[50,150],[75,25],[100,150]],
        options: {
            shadow: true,
            shadowColor: 'rgba(225,225,225,0.2)',
            tooltips: ['<b>The Drawing API Poly object</b>']
        }
    }).draw();
</script>

Properties

Color properties

PropertyDescriptionDefault
colorsStrokeThe stroke color used to draw the shape.'black'
colorsFillThe fill color used to draw the shape.'red'
colorsStroke
The stroke color used to draw the shape.
Default: 'black'

colorsFill
The fill color used to draw the shape.
Default: 'red'

Interactive features properties

PropertyDescriptionDefault
tooltipsThis can be an array of tooltips (only the first element is used) that are shown when the axis is clicked on.null
tooltipsEventThis is the event that triggers the tooltips. It can be either click or mousemove.click
tooltipsEffectThe effect used for showing tooltips. Can be either fade or none.fade
tooltipsCssClassThis is the name of the CSS class the chart uses.RGraph_tooltip
tooltipsOverrideIf you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the tooltips documentation page.null
tooltipsNohideonclearNot an option that you'll need particularly often, if at all. Setting this to true means that when you call the RGraph.clear() API function the tooltip DOES NOT get hidden.false
tooltipsEventThis can be click or mousemove and controls what event is used to trigger the tooltip.onclick
tooltips
This can be an array of tooltips (only the first element is used) that are shown when the axis is clicked on.
Default: null

tooltipsEvent
This is the event that triggers the tooltips. It can be either click or mousemove.
Default: click

tooltipsEffect
The effect used for showing tooltips. Can be either fade or none.
Default: fade

tooltipsCssClass
This is the name of the CSS class the chart uses.
Default: RGraph_tooltip

tooltipsOverride
If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the tooltips documentation page.
Default: null

tooltipsNohideonclear
Not an option that you'll need particularly often, if at all. Setting this to true means that when you call the RGraph.clear() API function the tooltip DOES NOT get hidden.
Default: false

tooltipsEvent
This can be click or mousemove and controls what event is used to trigger the tooltip.
Default: onclick

Event properties

PropertyDescriptionDefault
eventsClickIf you want to add your own click function you can do so by assigning it to this property. See here for details.null
eventsMousemoveIf you want to add your own mousemove function you can do so by assigning it to this property. See here for details.null
eventsMouseoverIf you want to add your own mouseover function you can do so by assigning it to this property. See here for details.null
eventsMouseoutIf you want to add your own mouseout function you can do so by assigning it to this property. See here for details.null
eventsClick
If you want to add your own click function you can do so by assigning it to this property. See here for details.
Default: null

eventsMousemove
If you want to add your own mousemove function you can do so by assigning it to this property. See here for details.
Default: null

eventsMouseover
If you want to add your own mouseover function you can do so by assigning it to this property. See here for details.
Default: null

eventsMouseout
If you want to add your own mouseout function you can do so by assigning it to this property. See here for details.
Default: null

Shadow properties

PropertyDescriptionDefault
shadowThis controls whether the shadow is enabled or not.false
shadowColorThe color of the shadow.rgba(0,0,0,0.2)
shadowOffsetxThe X offset that the shadow is drawn at.3
shadowOffsetyThe Y offset that the shadow is drawn at.3
shadowBlurThe severity of the shadow blur.5
shadow
This controls whether the shadow is enabled or not.
Default: false

shadowColor
The color of the shadow.
Default: rgba(0,0,0,0.2)

shadowOffsetx
The X offset that the shadow is drawn at.
Default: 3

shadowOffsety
The Y offset that the shadow is drawn at.
Default: 3

shadowBlur
The severity of the shadow blur.
Default: 5

Miscellaneous properties

PropertyDescriptionDefault
highlightStyleBy default this is null but you can set it to a function if you wish so that function is called to do the chart highlighting. It's passed the shape object as an argument.null
highlightStrokeThis is the color that the poly is highlighted in (the stroke) when the tooltip is shown.rgba(0,0,0,0)
highlightFillThis is the color that the poly is highlighted in (the fill) when the tooltip is shown.rgba(255,255,255,0.7)
highlightStyle
By default this is null but you can set it to a function if you wish so that function is called to do the chart highlighting. It's passed the shape object as an argument.
Default: null

highlightStroke
This is the color that the poly is highlighted in (the stroke) when the tooltip is shown.
Default: rgba(0,0,0,0)

highlightFill
This is the color that the poly is highlighted in (the fill) when the tooltip is shown.
Default: rgba(255,255,255,0.7)