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.Release notes for 2025
August 2025 (v7.00)
- This is a major version increase that only has a single significant improvement (and a few other minor tweaks) and that improvement is... greatly improved text! The new technique that's used to draw text is called scaling and you can read the documentation page describing the new scaling feature here. There's a list of points to be aware of on that page but one thing that stands out is that the coordinate space of the canvas tag has been doubled (despite the canvas tag remaining at the same width and height dimensions). This probably won't affect you if you just have a regular chart - but if you're delving into the API or doing custom drawing of your own then this is something that you'll now need to keep in mind and account for it in the coordinates that you use. The antialiasing HOWTO document has been updated with a comparison of no antialiasing, the previous antialiasing style and the new antialias methostyle. Remember - this update affects the canvas charts along with the drawing API objects.
- The RGraph.getImage() function has been added to the canvas common library which gives you an easy way to get a data: URL that represents the canvas (ie it's an easy way to get an image). The function is documented in the API documentation.
- Added the following properties to the ModalDialog: rotationStart, rotationEnd, translateFromX, translateFromY, translateToX, translateToY
- Added some examples of SVG sparklines to the sparklines HOWTO document.
-
The API function RGraph.parseDate can now return a
value in seconds instead of the default milliseconds
if you give an "s" as the second argument - for
example:
var seconds = RGraph.parseDate('2006-03-15 12:00:00', 's'); - With some datagrid events: rowclick cellclick beforeedit beforeeditsave aftereditsave editcomplete and editcancelled there's now meta information passed to your event listener function as the second argument (the first is the datagrid object). With this meta information (which is an object with various properties) you can better determine what to do.
- The datagrid filename has been renamed to RGraph.datagrid.js
- The ModalDialog options are now added in a dedicated options block to bring it into line with the other RGraph libraries. There are no backwards-compatibility concerns though as older-style configurations are accommodated.
- The datagrid rowsSelectable properties have been removed. An alternative that's just as good is to have a checkbox or radio button as the first column of your datagrid. What you set the names of these checkboxes to varies depending on how your server-side scripts handle forms - but with PHP, for example, you could set the name of all of the checkboxes to myCheckboxes[] and the values to the ID that identifies the row. And then, in your PHP script, you could access that by using $_POST['myCheckboxes'] and it would be an array of the values that were checked. You can see the array by doing this: var_dump($_POST['myCheckboxes']); Radio buttons operate similarly.
- There's a new datagrid demo which shows you how you can deal with timestamps by using the two new time and date functions: RGraph.PHP.date and RGraph.PHP.time These functions have also been added to the SVG libraries and they're called RGraph.SVG.PHP.date and RGraph.SVG.PHP.time
- The rowsClickCheckboxIndex can now be an array of indexes for when you have multiple checkboxes in a row that you want checking when the row is clicked.
- The rowsClickRadioIndex can now be an array of indexes for when you have multiple radio buttons in a row that you want checking when the row is clicked.
- The datagrid property columnsFormatter can now be used on textual columns as well as numbers. This means that you could, for example, in conjunction with the moment.js library (that you'll find in the download archive), or the new RGraph.PHP.date and RGraph.PHP.time functions, easily transform a timestamp that looks like this: 2025-05-14 17:27:30 into a more user-friendly date like this: 17:27 14th May 2025
- With the datagrid basic (ie non-regular expression) search, you can now use basic wildcards. * (an asterisk) represents any number of characters and ? (a question mark) represents a single character. Behind the scenes the search is transformed into a regular expression.
- Paging has been added to the datagrid This means that you can stipulate that you only want to see 25 results at a time, with links to go to the next page or the previous. Necessarily, all of your data still needs to be given to the datagrid unless you handle paging yourself on your webserver and only send the rows that you want to be displayed to the webpage. There are some properties that will help you with that though and they're called pagingUrl*
- The datagrid search is now placed in a div tag above the table (but still within the container whose ID you give to the datagrid constructor). The paging controls also sit in a div tag above the table but below the search.
-
Changes have been made to the datagrid to help with
CSS. Note that when specifying
the CSS rules you must be as specific
as you can. Specificity matters! For example this rule:
table tbody tr td div {...}is better than this rule:td div {...}because the selector is more specific (ie less general). - Fixed a bug making the RGraph.isNumeric function think that arrays are numeric.
-
The RGraph.groupedIndexToSequential
API function has been updated so you
can now give just an array of data
as the first argument instead of an RGraph
object. So you could do this:
var data = [ [4,8,5,6,2], [4,4,1,2,3], [9,8,6,5,3] ]; ret = RGraph.groupedIndexToSequential(data,2,2); // 12 - The internal API documentation page , the canvas API documentation pages , the SVG API documentation pages along with various other documentation pages that list API properties, functions and events have been updated to a nicer layout for them and their descriptions. Going forward, this layout is going to be used for functions and events on all new documentation pages that list properties and functions.
- Now, instead of the on function there's a new events property which you can use to add event listener functions to your charts. There's an example of this on this page. The on function isn't being removed so there's no need to rush and change your charts - it's just a tidier way to add events.
- When using the datagrid search option (formerly the filter option) you can now configure the placeholder text that sits in the HTML text input before you've typed anything with the searchPlaceholder property.
- The datagrid search option now supports searching on multiple individual words, which all must be present in a row for it to match. Each word can also now be a JavaScript-style regular expression, allowing you a lot of flexibility when you're searching (for example: /Fred[abcd]y?/ - finds Freddy).
- The datagrid custom sorting demo has been updated to sort by the day-of-week (not alphabetically).
- New properties have been added to the datagrid object: rowsClickCheckbox rowsClickCheckboxIndex rowsClickRadio rowsClickRadioIndex Read about these new properties on the datagrid documentation page.
- The datagrid object has been added! This is a new chart type and is a HTML table-based datagrid. In a similar vein to a table of results - but better. Easy for you to integrate, configure and customise it's now a part of RGraph and you can read more on the datagrid documentation page.
- The (undocumented and internally used) Pie chart events property has had its name changed to eventsEnabled