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 datagrid in v6.21
In version 6.21 a new datagrid object has been 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.21, 10th April 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.A basic Bar chart
An example of a straightforward Bar chart
. It has the axes turned off, the default margin sizes
have been altered and it uses units on the y-axis
labels. Otherwise, it's pretty unremarkable except
for the fact
that two of the labels are multi-line. This is accomplished by using carriage returns in the
text like this: Monday\n(yuck!)
When the screen is smaller the size of the canvas
is reduced, the size of the text is reduced
and the labels are changed so that the weekday names are the three-letter versions.
This goes in the documents header:
<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.tooltips.js"></script> <script src="RGraph.bar.js"></script>Put this where you want the chart to show up:
<div> <canvas id="cvs" width="750" height="250">[No canvas support]</canvas> </div>This is the code that generates the chart - it should be placed AFTER the
canvas
tag(s):
<script> // Create the new Bar chart. Nothing special is being done here - note // though that when you create a new RGraph object you don't necessarily // need to assign the chart object to a variable - like it isn't here. new RGraph.Bar({ id: 'cvs', data: '12,18,10,9,6,20,18', options: { // Add some X-axis labels - you can use a newline character (\n) to make // the label span multiple lines yaxisScaleUnitsPost: 'k', colors: ['red'], title: 'A basic Bar chart', titleBold: true, xaxis: false, yaxis: false, marginLeft: 50, marginBottom: 50, tooltips: '%{key}', tooltipsFormattedUnitsPost: '%', tooltipsCss: { fontSize: '26pt' }, tooltipsFormattedKeyLabels: ['Dave','John'], //tooltipsEvent: 'mousemove' } }).wave().responsive([ {maxWidth:null,width:750,height:250,options: {textSize:14,xaxisLabels: ['Monday\n(yuck!)','Tuesday','Wednesday','Thursday','Friday\n(woo!)','Saturday','Sunday'],marginInner: 20}, parentCss: {textAlign: 'center'}}, {maxWidth:900,width:400,height:150,options: {textSize:10,xaxisLabels:['Mon\n(yuck!)','Tue','Wed','Thu','Fri\n(woo!)','Sat','Sun'],marginInner: 10}, parentCss: {textAlign: 'center'}} ]); </script>