How to use the RGraph.Text2() function

Share RGraph:  

A guide for using the new RGraph.text2() function. This function is an improvement on its predecessor and is easier to use.

[No canvas support]

The RGraph.Text2() function is a rewrite of the RGraph.Text() function that is more efficient, faster and easier to use than its predecessor. Instead of a standard list of arguments it only takes two arguments - the chart object and a object map of the desired arguments. This means that you no longer have to remember the correct order of the arguments - of which there are many.

One significant improvement of the new text function is that for horizontal and vertical text the coordinates of the texts bounding box are retained. This means that you can test the coordinates for clicks to see if the user has clicked the text. This is what the drawing API text object does for you though - so if you want clickable text it's much easier to use that.

The drawing API text object

In this particular example it would be easier for you to use the drawing API Text object as it has tooltips capability built in so you would need to use the Rect object at all.

    window.onload = (function ()
        var pie = new RGraph.Pie({
            id: 'cvs',
            data: [4,8,6,3,5,2,4],
            options: {
                textAccessible: true
        }).on('draw', function (obj)
            // The first arguement is the object and the second is a map/object literal of options.
            // Available options are listed below.
            var coords = RGraph.Text2(obj, {
                font: 'Arial',
                size: 26,
                x: obj.centerx,
                y: obj.centery,
                text: 'Sample!',
                halign: 'center',
                valign: 'center',
                bounding: true,
                marker: false,
                angle: 0

            // Now make a (transparent) rectangle around the text
            var rect = new RGraph.Drawing.Rect({
                id: 'cvs',
                x: coords.x,
                y: coords.y,
                width: coords.width,
                height: coords.height,
                options: {
                    tooltips: ['The rectangle tooltip!'],
                    fillstyle: 'rgba(0,0,0,0)',
                    highlightFill: 'rgba(0,0,0,0)',
                    highlightStroke: 'rgba(0,0,0,0)'


Available properties

All of the available options that you can use are:


© Copyright Richard Heyes 2008-2017