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

 

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 »

A segmented Bar chart

[No canvas support] [No canvas support]

Previously this type of chart was achievable but required custom coding. Now, however, (as of version 5.23) there is a custom class that does all of the necessary customisation for you. All you need to do is add the display customisations (as shown below).

The rear canvas shows a Bar chart just as the front one does but without any data - so you can just see the grid.

The front canvas draws the Bar chart - and then a custom draw event uses the standard canvas clearRect function to return bits of the top canvas to transparency. So the grid on the rear canvas then shows through.

All of this is done by the RGraph.SegmentedBar custom class so, again, you just need to customise it.

The responsive function on the object just resizes the canvas tag and the parent container div tag.


This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>
Put this where you want the chart to show up:
<div style="display: inline-block; position: relative; width: 600px; height: 250px; float: left">
    <canvas id="cvs1" width="600" height="250" style="position:absolute; top: 0; left: 0">[No canvas support]</canvas>
    <canvas id="cvs2" width="600" 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 canvas tag(s):
<script>
    seg = new RGraph.SegmentedBar({
        id: ['cvs1', 'cvs2'],
        data: [4,5,3,2, 4,5,1],
        options: {
            segmentsCount: 5,
            segmentsLinewidth: 10
        }
    });
    
    seg.foreground.set({
        yaxisLabelsSpecific: ['Level 5','Level 4','Level 3','Level 2','Level 1',''],
        xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
        shadow: false,
        colors: ['Gradient(#fdd:red)'],
        marginLeft: 75,
        responsive: [
            {maxWidth: null,width:600,height:250,options:{marginInner: 5,yaxisLabelsOffsety:20, textSize:16},parentCss:{width:'600px',height:'250px'}},
            {maxWidth: 800,width:400,height:200,options:{marginInner: 3,yaxisLabelsOffsety:15, textSize:12},parentCss:{width:'400px',height:'200px'}}
        ]
    });
    
    seg.background.set({
        marginLeft: 75,
        responsive: [
            {maxWidth: null,width:600,height:250,options:{marginInner: 5,yaxisLabelsOffsety:20, textSize:16},parentCss:{width:'600px',height:'250px'}},
            {maxWidth: 800,width:400,height:200,options:{marginInner: 3,yaxisLabelsOffsety:15, textSize:12},parentCss:{width:'400px',height:'200px'}}
        ]
    });

    seg.draw();
</script>