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.

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

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

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] backgroundnull
[svg] backgroundRounded0
[svg] padding0
[svg] linknone
[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