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 »


Get the latest version of RGraph (version 6.17) from the download page. 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 (£99) commercial license available.

More »

A customised SVG Funnel chart

A demonstration of the svg Funnel chart. This chart is customised using custom tooltips, a key, the labels are positioned in the middle of each "segment" and the background bars are set to use a gradient that goes towards white on the right-hand-side. The font size of the labels has been increased too.

The tooltips have been customised by using the RGraph.SVG.tooltips.style object. Any css property that you set on this object will be applied to any subsequent tooltip that's shown.

You have to use the javascript versions of css property names when setting properties on this object so hyphens are removed and a capital letter is added in its place and the occasional properties name is significantly different, for example (not an exhaustive list!):

CSS nameJavaScript name

There's a full list of CSS properties and the JavaScript versions of their names available here.

When the screen size is smaller, not much changes - the size of the labels and the margins.

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.common.key.js"></script>
<script src="RGraph.svg.common.tooltips.js"></script>
<script src="RGraph.svg.funnel.js"></script>
Put this where you want the chart to show up:
<div style="float: right">
    <div style="width: 650px; height: 500px; border: 1px solid #ddd" id="chart-container"></div>
This is the code that generates the chart - it should be placed AFTER the div tag:
    // Create the Funnel chart and configure it so that it has a large
    // left margin (enough space for the labels),
    funnel = new RGraph.SVG.Funnel({
        id: 'chart-container',
        data: [100,75,50,25],
        options: {
            title: 'A "key stages of plan CD1" funnel',
            titleSubtitle: 'Each stage is depicted by a separate color',
            marginTop: 75,
            linewidth: 0,
            colors: ['#3EB0BB','#EE7E34','#677E9D','#388E90'],
            backgroundBars: true,
            backgroundBarsColors: ['Gradient(#3EB0BB:white)', 'Gradient(#EE7E34:white)', 'Gradient(#677E9D:white)'],
            labels: ['Introduction (75%)', 'Site visit (50%)', 'Finalisation (25%)'],
            labelsItalic: true,
            labelsBold: false,
            labelsColor: 'gray',
            labelsHalign: 'left',
            // This can also be set to 'edge' and controls the vertical positioning
            // of the labels
            labelsPosition: 'section',

            // Tooltips for the chart that use the new formatted tooltips feature
            tooltips: '%{property:labels[%{index}]}',

            // These are CSS styles for the tooltips that are displayed.
            // The names are exactly the same as CSS properties (the JavaScript
            // versions of the names)
            tooltipsCss: {
                fontSize: '26pt'

            key: ['Introduction','Site visit','Finalisation'],
            responsive: [
                {maxWidth: null, width:650, height:400, options: {labelsSize: 26, marginRight: 5,  marginLeft: 300},parentCss:{'float':'right',textAlign:'none'}},
                {maxWidth: 900,  width:400, height:300, options: {labelsSize: 18, marginRight: 25, marginLeft: 100},parentCss:{'float':'none',textAlign:'center'}}