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).

Property	Description	Default
x	The X coordinate of the text.	none
y	The Y coordinate of the text.	none
text	The text to display.	none
font	The font that the text is rendered in.	Arial, Verdana, sans-serif
size	The size of the text (in points).	12
color	The color of the text.	black
bold	Whether the text is bold or not.	false
italic	Whether the text is italic or not.	false
halign	The horizontal alignment of the text.	left
valign	The vertical alignment of the text.	bottom
[canvas] bounding	If true a bounding rectangle will be drawn around the text.	false
[canvas] boundingStroke	The stroke color of the bounding rectangle.	black
[canvas] boundingFill	The fill color of the bounding rectangle.	transparent
[canvas] boundingLinewidth	The linewidth of the bounding rectangle.	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.	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.	true
angle	The angle (in degrees) that the text should be rendered at.	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.	none
[svg] background	The background color of the text.	null
[svg] backgroundRounded	Whether the background has rounded cornersw or not.	0
[svg] padding	The padding for the background.	0
[svg] link	If you want the text to be a link then you can set the href with this property.	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.	_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