SVG Funnel charts API reference
Summary 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 Margins
Property Description Default gutterLeft The left gutter of the chart. 35 gutterRight The right gutter of the chart. 35 gutterTop The top gutter of the chart. 35 gutterBottom The bottom gutter of the chart. 35 Colors
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'] colorsOpacity The defaault opacity setting thats used for the colors. 1 strokestyle The color of the outline of the segments. white Labels and text
Property Description Default textColor The color of the text. black textFont The font used for text. 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. This falls back to the textFont property. null labelsSize The font size that's used for the labels. This falls back to the textSize property. null labelsColor The color that's used for the labels. This falls back to the textColor property. null labelsBold Whether the labels are bold or not. This falls back to the textBold property. null labelsItalic Whether the labels are italic or not. This falls back to the textItalic property. null labelsBackground The background color thats used for the labels. null labelsAlign 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 Tooltips
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
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 keyTextBold Whether the key text is bold or not. false keyTextFont The font to use for the key text. If not specified it defaults to the textFont setting. null keyTextSize The size to use for the key text. If not specified then the textSize is used. null ketTextItalic Whether the key text is italic or not. false keyTextOffsetx The horizontal pixel offset of the key text (just the text). 0 keyTextOffsety 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
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. It defaults to be the same as the textColor property. null titleFont The font used to render the title. null titleSize The size of the font used to render the title. It defaults to be a little larger than the textSize property null titleBold Whether the title is bold or not. false titleItalic Whether the title is italic or not. false 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 gutterTop 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. It defaults to be the same as the textSize setting. null titleBold Whether the subtitle is bold or not. false titleSubtitleItalic Whether the subtitle is italic or not. false Other
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)