The drawing API text object

The drawing API text object which can be added to your charts to give extra text that is (optionally) clickable, can have tooltips, events and is automatically redrawn by the RGraph ObjectRegistry.

[No canvas support]

The drawing API text object makes it easy to add text to your charts and being a drawing API object - you can also easily add event listeners or tooltips to it too. The chart to the right shows an example chart where the title is drawn using the drawing API text object.

Usage example

    var line = new RGraph.Line({
        id: 'cvs',
        data: [4,8,6,5,3,2,2,5],
        options: {
            hmargin: 5,
            xaxisLabels: ['Lyra','Simon','Jeff','Pete','Lola','Luis','Fred','John'],
            colors: ['red'],
            linewidth: 3,
            spline: true,
            yaxisColor: 'pink',
            axes: false,
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            shadow: false,
            tickmarksSize: 5
    var x = line.canvas.width / 2;
    var y = line.get('marginTop') + 5;

    var text = new RGraph.Drawing.Text({
        id: 'cvs',
        x: x,
        y: y,
        text: 'An example of the \r\ndrawing API text object',
        options: {
            valign: 'top',
            halign: 'center',
            marker: false,
            size: 14,
            tooltips: ['The drawing API text object'],
            tooltipsHighlight: false,
            tooltipsEvent: 'mousemove',
            bounding: false,
            shadow: true,
            shadowColor: '#ddd',
            shadowOffsetx: 2,
            shadowOffsety: 2,
            shadowBlur: 2
    }).on('beforedraw', function (obj)
    }).on('draw', function (obj)


Configuration properties

textSizeThe size of the text (in points).10
textFontThe font that the text is rendered in.Arial
textBoldWhether the text is bold or not.false
textItalicWhether the text is italic or not.false
angleThe angle that the text is shown at. If angles other than 0/90/180/270 are used then neither events nor tooltips will function.0
markerWhether a marker is shown that illustrates the coordinates given as the position of the text.false
halignThe horizontal alignment of the text. This can be left, center or right.left
valignThe vertical alignment of the text. This can be bottom, center or top.bottom

Color properties

colorsAn array of colors for the text. Even though it's an array only the first color is used.['black']

Bounding box properties

boundingWhether the text is shown with a bounding box or not.false
boundingFillThe color used as the fill of the bounding box.rgba(255,255,255,0.7)
boundingStrokeThe color used as the stroke of the bounding box.#777
boundingShadowWhether the bounding box has a shadow or not.false
boundingShadowColorThe color of the shadow.#ccc
boundingShadowOffsetxThe X offset of the shadow.3
boundingShadowOffsetyThe Y offset of the shadow.3
boundingShadowBlurThe severity of the shadow blurring effect.3

Interactive features properties

tooltipsThe tooltip for the circle. Even though you can only have one - this should still be an array: obj.set('tooltips', ['The tooltip']);null
tooltipsEventThis can be click or mousemove and controls what event is used to trigger the
tooltipsHighlightThis stipulates whether the circle will be highlighted when the tooltip is shown.true
tooltipsCssClassThis is the name of the CSS class the chart uses.RGraph_tooltip
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

Link properties

linkIf you want the text object to be a link you can specify a URL here. Remember to include the RGraph.common.dynamic.js file as well or it won't function. Remember that you can also use links in tooltips - which are HTML DIV tags at their core - so no special syntax is needed.null
linkTargetThis is used as the target window for the link (the name of the window to show the link in). By default this will open in the same window (_self) - but if you want it to open in a new window you can use _blank._self
linkOptionsOptions that will be passed to the call. These are the same as the third argument to - eg width=400,height=400.nothing

Event properties

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

Shadow properties

shadowWhether a drop shadow is applied.false
shadowColorThe color of the shadow.#ccc
shadowOffsetxThe X offset of the shadow.2
shadowOffsetyThe Y offset of the shadow.2
shadowBlurThe severity of the shadow blurring effect.3

Miscellaneous properties

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 circle is highlighted (the stroke) in when the tooltip is shown.#ccc
highlightFillThis is the color that the circle is highlighted in (the fill) when the tooltip is shown.rgba(255,255,255,0.7)