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.
Version 7.01 released
Version 7.01 (released in October 2025) is the
latest version of RGraph and now includes a new tree
structure object. The accompanying Treemenu object can then turn
the object into a fully dynamic tree menu.
You can read the API documentation for the tree on
the main API documentation page
and see an example of the Treemenu
feature by following this link...
New HTML datagrid
In the April 2025 (v6.21) release a new datagrid object
was added.
This makes it easy to add static or dynamic data
tables to your pages. It can be used whether you use the
canvas or SVG libraries or entirely standalone.
Download
Get the latest version of RGraph (version 7.01, 8th October 2025) 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.
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.Adding text to your charts
From version 7 onwards, with the introduction of scaling, you now need to take this into account with the coordinates and size of your text. This should just mean that the x and y values along with the size of the text need doubling compared to what they were previously. With the below chart, for example, the x coordinate was doubled to 100 (from 50), the y coordinate was doubled to 160 (from 80) and the size of the text was doubled to 40 (from 20).
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: 100,
y: 160,
text: 'A Bar chart with a custom title',
font: 'Georgia, sans-serif',
bold: true,
italic: true,
size: 40,
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: [canvas] bounding
Description:
If true a bounding rectangle will be drawn around the text.
Default: false
Name: [canvas] boundingFill
Description:
The fill color of the bounding rectangle.
Default: transparent
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: 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] backgroundRounded
Description:
Whether the background has rounded cornersw or not.
Default: 0