MENU
.net Powerful JavaScript charts

Adding text to your charts

Since January 2022 you've had the option of more easily adding custom text to your charts by using the text configuration option. It allows you to specify the details of your text in the chart configuration and is automatically redrawn for you.
From version 7 onwards, with the introduction of scaling, you now need to take this into account with the coordinates and size of your text. This should just mean that the x and y values along with the size of the text need doubling compared to what they were previously. With the below chart, for example, the x coordinate was doubled to 100 (from 50), the y coordinate was doubled to 160 (from 80) and the size of the text was doubled to 40 (from 20).
[No canvas support]

Since the January 2022 release, there's been a new option in all of the RGraph chart types - the text option. This allows you to easily add custom text to your charts without necessarily having to delve into the RGraph api and use your objects events.

Example source code of a Bar chart that uses the text option is as follows: 

<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [4,8,5,3,2,6,9],
        options: {
            marginInner: 15,
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            colors: ['red'],
            text: [
                {
                 x:      100,
                 y:      160,
                 text:   'A Bar chart with a custom title',
                 font:   'Georgia, sans-serif',
                 bold:   true,
                 italic: true,
                 size:   40,
                 halign: 'left',
                 valign: 'bottom',
                 color: '#333'
                }
            ]
        }
    }).wave();
</script>

The function can be customised by using these properties. It's basically the same as using the RGraph.text api function, but you don't need to use an RGraph event to ensure that the text is redrawn if you were to use dynamic features (not the case with SVG charts).

Name: x
Description: 
The X coordinate of the text.
Default: none
Name: y
Description: 
The Y coordinate of the text.
Default: none
Name: text
Description: 
The text to display.
Default: none
Name: font
Description: 
The font that the text is rendered in.
Default: Arial, Verdana, sans-serif
Name: size
Description: 
The size of the text (in points).
Default: 12
Name: color
Description: 
The color of the text.
Default: black
Name: bold
Description: 
Whether the text is bold or not.
Default: false
Name: italic
Description: 
Whether the text is italic or not.
Default: false
Name: halign
Description: 
The horizontal alignment of the text.
Default: left
Name: valign
Description: 
The vertical alignment of the text.
Default: bottom
Name: [canvas] bounding
Description: 
If true a bounding rectangle will be drawn around the text.
Default: false
Name: [canvas] boundingStroke
Description: 
The stroke color of the bounding rectangle.
Default: black
Name: [canvas] boundingFill
Description: 
The fill color of the bounding rectangle.
Default: transparent
Name: [canvas] boundingLinewidth
Description: 
The linewidth of the bounding rectangle.
Default: 1
Name: [canvas] marker
Description: 
If true a marker will be shown which indicates the X/Y coordinates that you have given. This can help with alignment.
Default: false
Name: [canvas] accessible
Description: 
If true then dom text will be used and if false native canvas will be used. Native canvas text is not selectable (for cut/copy/paste) and will be cut off by the edges of the canvas. It does however show up if you take an image of the canvas - which dom text does not.
Default: true
Name: angle
Description: 
The angle (in degrees) that the text should be rendered at.
Default:  0
Name: tag
Description: 
For dom text this can be an arbitrary bit of text that can be later used to find text with the RGraph.text.find function.
Default: none
Name: [svg] background
Description: 
The background color of the text.
Default: null
Name: [svg] backgroundRounded
Description: 
Whether the background has rounded cornersw or not.
Default:  0
Name: [svg] padding
Description: 
The padding for the background.
Default:  0
Name: [svg] link
Description: 
If you want the text to be a link then you can set the href with this property.
Default: none
Name: [svg] linkTarget
Description: 
This can be the name of a target window in which to open the link. It defaults to open the link in a new window.
Default: _blank