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.The arcTo function
The arcTo function is used whilst drawing paths to the canvas to draw a circle or a partial circle to the canvas. The function draws the arc created by two lines that are defined by the coordinates and radius given. Commonly the arc function can be used as an alternative to this function.
Arguments to the function
- The X1 coordinate
- The Y1 coordinate
- The X2 coordinate
- The X2 coordinate
- The radius
An example
<script>
window.onload = function ()
{
var canvas = document.getElementById("cvs");
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(50,50);
context.arcTo(200,50,200,200,25);
context.lineTo(200,200);
context.stroke();
}
</script>
A rectangle with rounded corners
This is an example of using the arcTo function to make a rectangle with rounded corners. Simply include the function before you create the canvas 2D context and it will be there for you to make use of. It's just like the rect function but with an extra argument that stipulates the size of the rounded corners.
<script> // // This adds a roundedRect(x, y, width, height, radius) function to the drawing // context. The radius argument dictates how severe the corners are rounded. // // @param number x The X coordinate // @param number y The Y coordinate // @param number width The width of the rectangle // @param number height The height of the rectangle // @param number radius The radius of the corners. Bigger values mean more rounded corners // CanvasRenderingContext2D.prototype.roundedRect = function (x, y, width, height, radius) { // Because the function is added to the context prototype // the 'this' variable is actually the context // Save the existing state of the canvas so that it can be restored later this.save(); // Translate to the given X/Y coordinates this.translate(x, y); // Move to the center of the top horizontal line this.moveTo(width / 2,0); // Draw the rounded corners. The connecting lines in between them are drawn automatically this.arcTo(width,0,width,height, Math.min(height / 2, radius)); this.arcTo(width, height, 0, height, Math.min(width / 2, radius)); this.arcTo(0, height, 0, 0, Math.min(height / 2, radius)); this.arcTo(0, 0, radius, 0, Math.min(width / 2, radius)); // Draw a line back to the start coordinates this.lineTo(width / 2,0); // Restore the state of the canvas to as it was before the save this.restore(); } window.onload = function () { // And you use it like this. First get the canvas and context as normal var canvas = document.getElementById('cvs') var context = canvas.getContext('2d') // Start a path and draw a rounded rectangle. The roundedRect function can be likened to the rect function context.beginPath(); context.fillStyle = 'red'; context.roundedRect(5, 5, 100, 200, 25); context.stroke(); context.fill(); } </script>