Adding text to your charts

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: {
            yaxis: false,
            xaxis: false,
            marginInner: 20,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            text: [
                {
                 x:      350,
                 y:      45,
                 text:   'A Bar chart with some custom text',
                 bold:   true,
                 size:   20,
                 halign: 'center',
                 valign: 'top'
                }
            ],
        }
    }).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).

PropertyDescriptionDefault
xThe X coordinate of the text.none
yThe Y coordinate of the text.none
textThe text to display.none
fontThe font that the text is rendered in.Arial, Verdana, sans-serif
sizeThe size of the text (in points).12
colorThe color of the text.black
boldWhether the text is bold or not.false
italicWhether the text is italic or not.false
halignThe horizontal alignment of the text.left
valignThe vertical alignment of the text.bottom
[canvas] boundingIf true a bounding rectangle will be drawn around the text.false
[canvas] boundingStrokeThe stroke color of the bounding rectangle.black
[canvas] boundingFillThe fill color of the bounding rectangle.transparent
[canvas] boundingLinewidthThe linewidth of the bounding rectangle.1
[canvas] markerIf true a marker will be shown which indicates the X/Y coordinates that you have given. This can help with alignment.false
[canvas] accessibleIf 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.true
angleThe angle (in degrees) that the text should be rendered at. 0
tagFor DOM text this can be an arbitrary bit of text that can be later used to find text with the RGraph.text.find function.none
[svg] backgroundThe background color of the text.null
[svg] backgroundRoundedWhether the background has rounded cornersw or not. 0
[svg] paddingThe padding for the background. 0
[svg] linkIf you want the text to be a link then you can set the href with this property.none
[svg] linkTargetThis can be the name of a target window in which to open the link. It defaults to open the link in a new window._blank
x
The X coordinate of the text.
Default: none

y
The Y coordinate of the text.
Default: none

text
The text to display.
Default: none

font
The font that the text is rendered in.
Default: Arial, Verdana, sans-serif

size
The size of the text (in points).
Default: 12

color
The color of the text.
Default: black

bold
Whether the text is bold or not.
Default: false

italic
Whether the text is italic or not.
Default: false

halign
The horizontal alignment of the text.
Default: left

valign
The vertical alignment of the text.
Default: bottom

[canvas] bounding
If true a bounding rectangle will be drawn around the text.
Default: false

[canvas] boundingStroke
The stroke color of the bounding rectangle.
Default: black

[canvas] boundingFill
The fill color of the bounding rectangle.
Default: transparent

[canvas] boundingLinewidth
The linewidth of the bounding rectangle.
Default: 1

[canvas] marker
If true a marker will be shown which indicates the X/Y coordinates that you have given. This can help with alignment.
Default: false

[canvas] accessible
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

angle
The angle (in degrees) that the text should be rendered at.
Default: 0

tag
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

[svg] background
The background color of the text.
Default: null

[svg] backgroundRounded
Whether the background has rounded cornersw or not.
Default: 0

[svg] padding
The padding for the background.
Default: 0

[svg] link
If you want the text to be a link then you can set the href with this property.
Default: none

[svg] linkTarget
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