SVG Funnel charts API reference
Documentation about the SVG Funnel chart including information on all the options and methods that are available to you.
The code here produces a chart like this:
title: 'A "key stages of plan CD1" funnel',
titleSubtitle: 'Each stage is depicted by a separate color',
colors: ['#3EB0BB', '#EE7E34', '#677E9D'],
labels: ['Start point (100%)', 'Stage 1 (75%)', 'Stage 2 (50%)', 'Stage 3 (25%)'],
The coordinates properties
The coordinates for the segments on the Funnel chart are held in
the obj.coords array:
All of the coordinates - which are simply appended to this
array as the segments are drawn. Each element of the array is
an object which consists of x1, y1, x2,
y2, x3, y3, x4, x4,
widthTop, widthBottom, height,
element and object properties. The element
property is the SVG element and the object property
is the RGraph object.
You can use these properties to control how the chart apears.
You can set them by including them in the options section of the
configuration as above.
Property Description Default backgroundBars A true or false value that determines whether the background bars are shown. false backgroundBarsOpacity This controls the opacity used for the background bars (ie how transparent they are). 1 is fully opaque ie not transparent at all. 0.25 backgroundBarsColors By default the colors of the background bars are the same as the regular colors array but with the opacity set to the backgroundBarsOpacity setting. If you want to set specific colors though, then you can use this property. null Margin properties
Property Description Default marginLeft The left margin of the chart. 35 marginRight The right margin of the chart. 35 marginTop The top margin of the chart. 35 marginBottom The bottom margin of the chart. 35 Color properties
Property Description Default colors An array of the colors of the funnel segments. ['red', 'black', 'orange', 'green', '#6ff', '#ccc', 'pink', 'orange', 'cyan', 'maroon', 'olive', 'teal'] colorsStroke The color of the outline of the segments. white Labels and text properties
Property Description Default textColor The color of the text. black textFont The font used for text. Arial, Verdana, sans-serif textSize The size of the text. 12 textBold Whether the text is bold or not. false textItalic Whether the text is italic or not. false labels An array of labels that are added to the chart.  (An empty array) labelsFont The font that's used for the labels. null labelsSize The font size that's used for the labels. null labelsColor The color that's used for the labels. null labelsBold Whether the labels are bold or not. null labelsItalic Whether the labels are italic or not. null labelsBackground The background color thats used for the labels. null labelsHalign The horizontal alignment of the labels. center labelsPosition This can be section or edge and controls the placement of the labels (ie where they're aligned to). section Tooltip properties
Property Description Default tooltips An array of tooltips for the chart. This array should NOT be multidimensional. null tooltipsOverride If required, this can be a function that totally handles the tooltip showing instead of the default RGraph tooltips. It should look like this: tooltipsOverride: function (obj, opt)
The // Show tooltip
} opt is an argument that contains these items: object The chart object. index The index of the element (that triggered the tooltip). sequentialIndex The sequential index of the element that was clicked. text The text to be used as the tooltip. Remember that this may contain HTML (or whatever else you may have specified). event The event object (either a click or mousemove event). null tooltipsCssClass The CSS class thats applied to the tooltip DIV. RGraph_tooltip tooltipsEvent The event used for tooltips (either click or mousemove. click highlightStroke The stroke color that's used when highlighting the chart. rgba(0,0,0,0) highlightFill The fill color that's used when highlighting the chart. rgba(255,255,255,0.7) highlightLinewidth The linewidth that's used when highlighting the chart. 1 Key properties
Property Description Default key An array of the labels that appear on the key. null keyColors An array of colors to be shown on the key. If not specified then the colors option will be used instead. null keyLabelsColor The color of the text in the key. null keyLabelsBold Whether the key text is bold or not. null keyLabelsFont The font to use for the key text. null keyLabelsSize The size to use for the key text. null ketLabelsItalic Whether the key text is italic or not. null keyLabelsOffsetx The horizontal pixel offset of the key text (just the text). 0 keyLabelsOffsety The vertical pixel offset of the key text (just the text). -1 keyOffsetx The horizontal pixel offset of the entire key. 0 keyOffsety The horizontal pixel offset of the entire key. 0 keyColorShape This controls which shape should be displayed on the key. It can be a string or an array of strings. The possible options are: rect, circle, triangle, line, dot, rectdot rect Title properties
Property Description Default title The title of the chart. (An empty string) titleX The specific X coordinate of the title. This can also be a string that looks like this: "+10" or "-10" in which case it's added to the calculated position. null titleY The specific Y coordinate of the title. This can also be a string that looks like this: "+10" or "-10" in which case it's added to the calculated position. null titleHalign The horizontal alignment of the title. center titleValign The vertical alignment of the title. bottom titleColor The color of the title. null titleFont The font used to render the title. null titleSize The size of the font used to render the title. null titleBold Whether the title is bold or not. null titleItalic Whether the title is italic or not. null titleSubtitle The subtitle of the chart. If a subtitle is specified the title is moved up to accommodate it. As such you might need to give a larger marginTop value. (An empty string) titleSubtitleX The specific X coordinate of the subtitle. This can also be a string that looks like this: "+10" or "-10" in which case it's added to the calculated position. null titleSubtitleY The specific Y coordinate of the subtitle. This can also be a string that looks like this: "+10" or "-10" in which case it's added to the calculated position. null titleSubtitleHalign The horizontal alignment of the subtitle. center titleSubtitleValign The vertical alignment of the subtitle. top titleSubtitleColor The color of the subtitle. #aaa titleSubtitleFont The font used to render the subtitle. null titleSubtitleSize The size of the font used to render the subtitle. null titleSubtitleBold Whether the subtitle is bold or not. null titleSubtitleItalic Whether the subtitle is italic or not. null Other properties
Property Description Default linewidth The line width (around the segments) used. 1
This can be used to set properties if necessary. It's normally used
after the chart is drawn if you need to set additional parameters
or change them.
This function adds an event listener (such as onbeforedraw or
ondraw) to the chart object.
This function simply executes the function that you give it (there and
then - not on any particular event)