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).
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
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
Default: true
angle
The angle (in degrees) that the text should be rendered at.
Default: 0
tag
For
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
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