.net Powerful JavaScript charts
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to use for showing charts on your website.

More »


Get the latest version of RGraph (version 6.18, 1st June 2024) from the download page. You can read the changelog here. There's also older versions available, minified files and links to hosted libraries.

More »


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.

More »

The isPointInPath function

The isPointInPath function can be used to determine if the coordinates that you give it are contained within the current path or not. It only determines the current path so if you have multiple shapes that you want to test you will need to replay the paths but not stroke or fill them (so that they're not drawn onto the canvas) and then use the isPointInPath function each time. The isPointInPath function can be used to determine hits for complex shapes that involve angles or curves. For example, the Funnel chart and drawing api Marker1 objects use the function to facilitate hit testing.

The function only gives you a true or false as to whether the coordinates that you give it are in the path. So you need to create your own functions to get the mouse coordinates and also take the relevant action should the point that you give it be in the current path.

Arguments to the function

The isPointinPath function can take two or three arguments:

context.isPointInPath(path, x, y)
context.isPointInPath(x, y)

An example

    window.onload = function ()
        var canvas  = document.getElementById("cvs");
        var context = canvas.getContext('2d');
        // Draw something on the canvas
        // Install a mousemove event listener onto the canvas
        canvas.onmousemove = function (e)
            var canvas =;
            var context = canvas.getContext('2d');
            // This gets the mouse coordinates (relative to the canvas). It uses the RGraph.getMouseXY(event)
            // function
            var mouseXY = RGraph.getMouseXY(e);
            var mouseX  = mouseXY[0];
            var mouseY  = mouseXY[1];
            // Because the rect was the last path drawn onto the canvas theres no need to replay it
            if (context.isPointInPath(mouseX, mouseY)) {
       = 'pointer';
   = 'default';

See also