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. This documentation also applies to the SVG 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.

The chart shown here uses this option to add the custom text that you can see. The source code of the chart is this:

<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		null
[svg] backgroundRounded		0
[svg] padding		0
[svg] link		none
[svg] linkTarget		_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

Default: null

[svg] backgroundRounded

Default: 0

[svg] padding

Default: 0

[svg] link

Default: none

[svg] linkTarget

Default: _blank