MENU
.net Powerful JavaScript charts
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 use for showing charts on your website.

More »

 

Download
Get the latest version of RGraph (version 6.19, 28th September 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.

Download »

 

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.

More »

An SVG Line with a simple look

Here is a simple Line chart that has three separate datasets. The labels for the chart (on the x-axis) are not a scale - they're just regular labels as you would normally give to a Line chart but they're numbers instead of words - that's all. The Line doesn't have the facility to show a scale across the x-axis - for that you'll need to use a Scatter chart with the line option enabled.

As for the tickmarks, while at first glance it may appear that they're 'hollow' they're actually just using a fill color that matches the background.

Other than this it's a pretty basic dark-themed Line that uses the trace effect.

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.line.js"></script>
Put this where you want the chart to show up:
<div style="float: right">
    <div id="cc" style="width:700px; height: 300px; background-color: black"></div>
</div>
This is the code that generates the chart - it should be placed AFTER the div tag:
<script>
    line = new RGraph.SVG.Line({
        id: 'cc',
        data: [
            [9,9,0,9,0],
            [6,7,10,5,0],
            [9,4,0,3,4]
        ],
        options: {
            colors: ['#cc0','blue','red'],
            xaxis: false,
            yaxis: false,
            linewidth: 3,
            backgroundGridColor: '#999',
            xaxisLabels: ['5.0','6.0','7.0','8.0','9.0'],
            textColor: '#ccc',
            tickmarksStyle: 'circle',
            tickmarksFill: 'black',
            tickmarksLinewidth: 3,
            responsive: [
                {maxWidth:null,width:700,height:300,options:{textSize: 12,tickmarksSize:5},css:{'float':'right'}},
                {maxWidth:800,width:450,height:200,options:{textSize: 10,tickmarksSize:4},css:{'float':'none'}}
            ]
        }
    }).trace();
</script>

How to get transparent tickmarks using the canvas Line chart

[No canvas support] [No canvas support]

You may have noticed that on the chart above the center of the tickmarks are not transparent - they're just colored black in order to make them blend in with the rest of the chart.

Making them transparent is more complicated than you might think for these reasons:

The solution here is to use layers. "But wait! canvas doesn't have layers!" you might cry. And yes - you would be correct - but they can be simulated by using - in this case - multiple canvas tags.

So there are two canvas tags being utilised here (positioned one in front of the other) - one on to which the background is drawn and a second on to which the lines are drawn. When the insides of the tickmarks are cleared to transparency then the canvas at the back shows through. And that is the canvas that has the background grid on it.

There's more code required than a regular chart (as you might imagine) - but as you can see it's not a lot more and nor is it complicated. Feel free to copy and paste the code.


This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.line.js"></script>
Put this where you want the chart to show up:
<div style="position: relative; background-color: black; width: 650px; height: 250px">
    <canvas id="cvs1" width="750" height="250" style="position: absolute; top: 0; left: 0">[No canvas support]</canvas>
    <canvas id="cvs2" width="750" height="250" style="position: absolute; top: 0; left: 0">[No canvas support]</canvas>
</div>
This is the code that generates the chart - it should be placed AFTER the div tag:
<script>
    line1 = new RGraph.Line({
        id: 'cvs1',
        data: [null,null,null,null,null],
        options: {
            xaxis: false,
            yaxis: false,
            backgroundGridColor: '#999',
            yaxisLabels: false
        }
    }).on('beforedraw', function (obj)
    {
        RGraph.clear(obj.canvas, 'black');
    }).draw();


    line2 = new RGraph.Line({
        id: 'cvs2',
        data: [
            [9,9,0,9,0],
            [6,7,10,5,0],
            [9,4,0,3,4]
        ],
        options: {
            colors: ['#cc0','blue','red'],
            xaxis: false,
            yaxis: false,
            linewidth: 3,
            backgroundGrid: false,
            xaxisLabels: ['5.0','6.0','7.0','8.0','9.0'],
            textColor: '#ccc',
            tickmarksSize: 6,
            tickmarksStyle: function (obj, data, value, index, x, y, color, prevX, prevY)
            {
                // Draw the fill of the tickmark
                obj.path(
                    'gco destination-out b a % % % 0 6.29 false f red s % gco source-over',
                    x, y, obj.get('tickmarksSize') - 1, color
                );

                // This draws the outline of the tickmark
                obj.path(
                    'b lw 2 a % % % 0 6.29 false s %',
                    x, y, obj.get('tickmarksSize'), color
                );
            },
            tickmarkSize: 6,
            responsive: [
                {maxWidth:null,width:650,height:250,options:{textSize: 12,tickmarksSize:5},parentCss:{'float':'right'},callback:function (obj){var canvas = document.getElementById('cvs1');canvas.width  = 650;canvas.height = 250;RGraph.cache = [];RGraph.redraw();}},
                {maxWidth:800,width:450,height:200,options:{textSize: 10,tickmarksSize:4},parentCss:{'float':'none'},callback:function (obj){var canvas = document.getElementById('cvs1');canvas.width  = 450;canvas.height = 200;RGraph.cache = [];RGraph.redraw();}}
            ]
        }
    }).draw();
</script>