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.The drawing API Marker3 object API reference
Usage example
See all of the 1200+ demos in the download archive.
<script>
line = new RGraph.Line({
id: 'cvs',
data: [4,9,1,3,2,6,5],
options: {
spline: true,
backgroundGridVlines:false,
backgroundGridBorder:false,
xaxis: false,
yaxis: false,
xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
marginInner: 5,
tickmarksStyle: 'endcircle',
tickmarksSize: 10,
colors: ['black'],
textSize: 16
}
}).draw();
x = line.coords[2][0];
y = line.coords[2][1];
radius = 25;
marker3 = new RGraph.Drawing.Marker3({
id: 'cvs',
x: x,
y: y,
radius: radius,
options: {
colorsFill: 'green'
}
}).draw();
</script>
Properties
Color properties
Other text properties
Name: textAccessible
Description:
A new feature in 2016 that allows you to use dom text in place of canvas text. It makes for much higher quality text that you can also select if desired (for copy/paste operations). It won't fit all situations and you can read more about the DOM text feature here. A good way to control borders/margins/padding etc is not to set them on the canvas but to wrap the canvas in a div and set them on that like this:
<div style="margin-left: 50px; display: inline-block">
<canvas id="cvs" width="650" height="250"></canvas>
</div>Default: false
Name: text
Description:
This allows you to add custom text to your chart if you want to. There's a dedicated page that describes this option here.
Default: null
Miscellaneous properties
Name: highlightStyle
Description:
By default this is null but you can set it to a function if you wish so that function is called to do the chart highlighting. It's passed the shape object as an argument.
Default: null
Name: highlightFill
Description:
This is the color that the circle is highlighted in (the fill) when the tooltip is shown. Because this Marker is animated and is constantly being redrawn this setting doesn't have a visible effect.
Default: rgba(255,255,255,0.7)
Name: events
Description:
This option is new to version 6.22 and allows you to specify event listener functions for the various RGraph events (eg beforedraw, firstdraw, draw etc). There's an example of its usage in the events section below. It's an object and the properties are the names of the events. The values of those properties can either be the function that you want to attach to the event or an array of functions that you want to run.
Default: {}
Name: scale
Description:
Whether scaling is enabled or not. Scaling makes the canvas look a lot better and it's recommended that this be left enabled unless you want the old, pre-version 7 style of antaliasing.
Default: true
Name: scaleFactor
Description:
How much the canvas is scaled by when it's scaled. The default value of 2 is the recommended amount.
Default: 2
Name: antialiasTranslate
Description:
If for some reason you want the old style of antialiasing then you can set this property to true. You will also need to turn off scaling by setting the scale property to false. You might not see a huge difference on charts that don't have straight lines (eg circular gauges and meters).
Default: false
Methods
Name: mixed get(string name)
Description:
This can be used to get properties if necessary. It's normally used after the chart is drawn if you need to get parameters (if you're doing custom coding for example).
Name: object set(string name, mixed value)
Description:
This can be used to set properties if necessary. It's normally used after the chart is drawn if you need to set additional parameters or change them. The return value is the chart object so you can chain your set calls if you wish.
Name: object on(event name, function listener)
Description:
This method adds an event listener (such as beforedraw or draw) to the object. It operates similarly to the jquery on function. The first argument is the event that you wish to attach to and the second is the listener function. For example:
obj.on('draw', function (obj)
{
// Put your code here
});
var obj = new RGraph.Drawing.Marker3({
id: 'cvs',
x: 50,
y: 50,
radius: 25,
}).on('draw', function (obj)
{
// Put your draw event code here
}).on('click', function (e, shape)
{
// Handle the click event
}).draw();
You can also use the new (added in version 6.22) events property to add events and that looks like this:
<script>
new RGraph.Drawing.Marker3({
id: 'cvs',
x: 50,
y: 50,
radius: 25,
options: {
events: {
beforedraw: function () {alert('The beforedraw event fired');},
draw: [
function (obj) {alert('The first draw event listener function.');},
function (obj) {alert('The second draw event listener function.');}
]
}
}
}).draw();
</script>
Name: object exec(function func)
Description:
This function can be used to execute a function (immediately). It's not event-based (ie it doesn't run when something happens) - it just runs immediately - and only once. You might use it when you need to get something from the chart when it's drawn and then call the RGraph.redraw function. Because this function only runs once the RGraph.redraw function would not cause a loop - which would happen if you used the draw event.
obj.exec(function (obj)
{
// Put your code here
});
Name: object getShape(object event)
Description:
This method makes it easy to get hold of the Marker3 object when it has been clicked on or hovered over. It returns an object which has the following indexes available:
| object | The Marker3 object. |
| x | The center X coordinate of the marker. |
| y | The center Y coordinate of the marker. |
| radius | The radius of the marker. |
| dataset | As there's only ever one element this is always zero. |
| index | As there's only ever one element this is always zero. |
| sequentialIndex | As there's only ever one element this is always zero. |
| tooltip | If a tooltip is associated with the Marker3 object this will be it. id: strings are expanded for you (where the tooltip text is retrieved from the HTML tag with the matching ID). |
Remember that the Marker3 object is animated so any drawing that you do on the Marker3 will be cleared when the canvas is redrawn.
<script>
marker3.onclick = function (e, shape)
{
marker3.on('draw', function (obj)
{
obj.path(
'lw 10 b a % % % 0 6.29 false s black f red',
shape.x, shape.y, shape.radius
);
});
}
</script>
Events
RGraph supports custom events that allow you to easily add interactivity to your charts if required. The following events are available:
For example:
new RGraph.Drawing.Marker3({
id: 'cvs',
x: 50,
y: 50,
radius: 25,
options: {
events: {
draw: function (obj){console.log('The draw event has fired');},
// Alternatively you can give an array of functions
//to run.
firstdraw: [
function (obj) {console.log('First function');},
function (obj) {console.log('Second function');}
]
}
}
}).draw();