HOWTO: Add custom text to your chart

• The drawing API text object
• Available properties
• The defaults object

The RGraph.text function is a rewrite of the old version of the RGraph.text function which is more efficient, faster and easier to use than its predecessor. Instead of a standard list of arguments, it only takes one argument - an object map of the desired arguments (one of which is the chart object). 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 wouldn't need to use the Rect object at all.

<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [4,8,6,3,5,2,4],
        options: {
            xaxisLabels: ['Harry','Lou','Pete','Jim','Neil','Burt','Kim'],
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            textSize: 16,
            yaxis: false
        }
    }).on('draw', function (obj)
    {
        // The first argument is the object and the second is a map/object literal of options.
        // Available options are listed below.
        var coords = RGraph.text({
            object:      obj,
            font:       'Arial',
            size:       26,
            x:          200,
            y:          100,
            text:       'Sample!',
            halign:     'center',
            valign:     'center',
            bounding:   true,
            marker:     false,
            angle:      0,
            accessible: false
        });

        // 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!'],
                tooltipsCss: {
                    fontSize: '16pt'
                },
                colorsFill: 'rgba(0,0,0,0)',
                highlightFill: 'rgba(0,0,0,0)',
                highlightStroke: 'rgba(0,0,0,0)'
            }
        }).draw();

    }).draw();
</script>

Available properties

All of the available options that you can use are:

• object - Your chart object
• font - eg Arial
• size - eg 12
• color - eg black
• italic - eg false
• bold - eg false
• x - eg 50
• y - eg 50
• text - eg Some text!
• halign - eg left
• valign - eg bottom
• bounding - eg true
• boundingFill - eg white
• boundingStroke - eg red
• marker - eg true (shows the given X/Y coordinates)
• angle - eg 90 (measured in degrees)
• tag - eg A small bit of text used to identify the text eg title

The defaults object

If you have a lot of bits of text to add to your canvas then you may want to use the defaults object. As it sounds, this object allows you to set the default values that are used for the text function so you can set the values once instead of on every call to the function. For example:

bar = new RGraph.Bar({
    id: 'cvs',
    data: [3,4,8,4,1,4,9],
    options: {
    }
}).draw();

RGraph.text.defaults = {
    font: 'Comic sans MS',
    size: 20,
    bold: true,
    color: 'blue',
    accessible: false
};

RGraph.text({
    object: bar,
    x: 50,
    y: 50,
    text: 'Some example text!'
});

RGraph.text({
    object: bar,
    x: 50,
    y: 100,
    italic: true,
    bold: false,
    text: 'Some more example text but in italic instead of bold!'
});