Using the RGraph.SVG.text() function

Summary
Like the canvas libraries the SVG libraries also have a function that can be used to add text to the SVG document. It can be used by you to add further text as required.

This page is dependent on features that were added in the, as yet unreleased, version 4.65.

The SVG text function in RGraph is a function that, perhaps unsurprisingly, adds text to an SVG tag - in RGraphs case this will be a chart.

It has a number of features that make common tasks (eg font selection, size, font-weight and alignment) significantly easier than creating the text tags yourself and adding them to the SVG tag.

It's used by all of the charts libraries and there's no reason that you shouldn't use the function too if you need to add text to your chart.

It looks like this (assume that you have a chart object called myBar):

RGraph.SVG.text({
    object:     myBar,
    parent:     myBar.svg.all,
    tag:        'myText',
    text:       'A nice red\r\nBar chart!',
    x:          50,
    y:          260,
    halign:     'left',
    valign:     'bottom',
    font:       'Verdana',
    size:       18,
    bold:       true,
    italic:     true,
    color:      'blue',
    background: 'rgba(232,232,232,0.75)',
    padding:    5,
    link:       'http://www.google.com',
    linkTarget: '_blank'
});

Here's a breakdown of the options that are available to you:

Name Description Default
object The chart object. This is required. none
parent RGraph SVG charts have all of the elements inside one group - a <g> tag - which has the class attribute set to all-elements. So you can add your elements to that if you want, but you don't have to if you don't want to. This property is optional. none (optional)
tag The tag element enables you to find specific <text> tags at a later point using the RGraph.SVG.text.find() function. none
text The text that you want to display. none
x The X coordinate. none
y The Y coordinate. none
halign The horizontal alignment, This can be left, center or right. left
valign The vertical alignment, This can be top, center or bottom. bottom
font The font face to be used. sans-serif
size The size of the text (measured in points). 12
bold Whether the text is bold or not. false
italic Whether the text is italic or not. false
color The color of the text. black
background The background color (if any). [no color)
padding The padding that's used on the text. 0
link If specified this is the href of where to link to. [an empty string]
linkTarget The target for the link (this is just like the target for regular HTML links). _blank

A full source code example

Here's the full source code from the example chart above. Notice that, unlike the canvas libraries, even though we're drawing on the chart and have dynamic features enabled (ie tooltips) the extra text that is being added doesn't need to be added in the ondraw event. This is because with SVG the scene is not repeatedly being redrawn like a canvas chart is.

<script>
    var myBar = new RGraph.SVG.Bar({
        id: 'cc',
        data: [7,6,5,2,3,5,8],
        options: {
            colors: ['gradient(red:#faa)'],
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            tooltips: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday
            xaxis: false,
            yaxis: false,
            shadow: true,
            backgroundGridVlines: false,
            backgroundGridBorder: false
        }
    }).draw();
    
    RGraph.SVG.text({
        object:     myBar,
        parent:     myBar.svg.all,
        tag:        'myText',
        text:       'A nice red\r\nBar chart!',
        x:          50,
        y:          260,
        halign:     'left',
        valign:     'bottom',
        font:       'Verdana',
        size:       18,
        bold:       true,
        italic:     true,
        color:      'blue',
        background: 'rgba(232,232,232,0.75)',
        padding:    5,
        link:       'http://www.google.com',
        linkTarget: '_blank'
    });
</script>