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 cdnjs.com 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 »

HOWTO: Show a static Y-axis

In the past, showing a custom static y-axis meant drawing the entire y-axis yourself. However now, with the drawing api y-axis object, (and also the X-axis object) a lot of the coding that was necessary to achieve a custom y-axis has been eliminated. This example shows you how you can implement it.

The necessary HTML

This is the necessary html code that positions the second canvas for the axes over the top of the first. Relative and absolute positioning is used so that the canvas doesn't move and is directly over the first canvas.

<div style="position: relative">
    <canvas id="axes" width="41" height="200" style="position: absolute; top: 0; left: 0; z-index: 3"></canvas>
    <div style="width: 600px; overflow: auto">
        <canvas id="cvs" width="1000" height="200"></canvas>

The JavaScript to produce the chart

And here is the javascript to produce the chart. Usually, when doing custom drawing on your canvas and using dynamic features (eg tooltips), you would need to use the draw custom RGraph event so that your drawing is repeated after the canvas has been cleared. Here though, because the axes are being drawn on a separate canvas that isn't being redrawn, that isn't necessary.

    // This is the code that produces the chart
    new RGraph.Line({
        id: 'cvs',
        data: [4,6,8,5,9,6,4,8,4,6,15,2],
        options: {
            xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            tooltips: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            xaxis: false,
            yaxis: false,
            yaxisLabels: false,
            marginInner: 25,
            tickmarksStyle: 'endcircle',
            marginInner: 25
    new RGraph.Drawing.YAxis({
        id: 'axes',
        x: 40,
        options: {
            yaxisScaleMax: line.scale2.max,
            colors: ['black'],
            textSize: 14