An SVG Funnel chart showing the key stages of plan CD1

A demonstration of the 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.

This goes in the documents header:

<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.funnel.js"></script>

Put this where you want the chart to show up:

<div style="width: 500px; height: 400px" id="chart-container"></div>

This is the code that generates the chart:

<script>
    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,
            marginLeft: 300,
            marginRight: 5,
            linewidth: 0,
            colors: ['#3EB0BB','#EE7E34','#677E9D'],
            backgroundBars: true,
            backgroundBarsColors: [
                'Gradient(#3EB0BB:white)',
                'Gradient(#EE7E34:white)',
                'Gradient(#677E9D:white)'
            ],                
            labels: [
                'Introduction (75%)',
                'Site visit (50%)',
                'Finalisation (25%)'
            ],
            labelsSize: 26,
            labelsItalic: true,
            labelsBold: false,
            labelsColor: 'gray',
            labelsHalign: 'left',
            labelsPosition: 'section', // Can also be edge                
            tooltips: [
                'Stage 1 (75%)',
                'Stage 2 (50%)',
                'Stage 3 (25%)'
            ],
            key: ['Introduction','Site visit','Finalisation']
        }
    }).draw();
    
    RGraph.SVG.tooltips.style.backgroundColor = 'black';
    RGraph.SVG.tooltips.style.color           = 'white';
    RGraph.SVG.tooltips.style.fontSize        = '26pt'
</script>