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:
    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: [
            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(); = 'black';           = 'white';        = '26pt'