About
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 show charts on your website.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

 

Download
Get the latest version of RGraph (version 6.16) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

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>
    </div>
</div>

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.

<script>
    // 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
        }
    }).draw();
    
    new RGraph.Drawing.YAxis({
        id: 'axes',
        x: 40,
        options: {
            yaxisScaleMax: line.scale2.max,
            colors: ['black'],
            textSize: 14
        }
    }).draw();
</script>