An SVG Funnel chart showing the key stages of plan CD1
Summary: An SVG Funnel chart showing the key stages of plan CD1. It takes a little bit of configuration to get the default Funnel to look like this - but it's all on this page.
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.
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.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: