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.
New HTML datagrid
In the April 2025 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 6.22, 24th June 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
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: [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