MENU
.net Powerful JavaScript charts
About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 17 years old) and has a wealth of features making it an ideal choice to use for showing charts on your website.

More »

 

Download
Get the latest version of RGraph (version 6.20, 1st December 2024) from the download page. You can read the changelog here. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

Download »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£129) commercial license available.

More »

Adding text to your 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.

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: 15,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            colors: ['Gradient(#c00:red)'],
            text: [
                {
                 x:      50,
                 y:      80,
                 text:   'A Bar chart with a custom title',
                 font:   'Georgia, sans-serif',
                 bold:   true,
                 italic: true,
                 size:   20,
                 halign: 'left',
                 valign: 'bottom',
                 color: '#333'
                }
            ]
        }
    }).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).

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