SVG Waterfall charts API reference

  Read comments...

Summary
Documentation about the SVG Waterfall chart including information on all the options and methods that are available to you.

 

Example

<script>
    var data = [59,15,-50,-4,-8,null,15,-4];
    
    new RGraph.SVG.Waterfall({
        id: 'chart-container',
        data: data,
        options: {
            xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Weekday total','Saturday','Sunday','Total'],
            tooltips: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday','Total'],
            colors: [
                'Gradient(black:#ddd)',
                'Gradient(red:#d00)',
                'Gradient(blue:#00d)'],
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxis: false,
            yaxis: false,
            yaxisMax: 100
        }
    }).draw();

    RGraph.SVG.tooltips.style.backgroundColor = 'black';
    RGraph.SVG.tooltips.style.color           = 'white';
    RGraph.SVG.tooltips.style.fontWeight      = 'bold';
</script>

The code above produces a chart like this:

 

Properties

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.

 

Background

Properties: backgroundColor, backgroundImage, backgroundImageAspect, backgroundImageOpacity, backgroundImageStretch, backgroundImageX, backgroundImageX, backgroundImageW, backgroundImageH, backgroundGrid, backgroundGridColor, backgroundGridLinewidth, backgroundGridBorder, backgroundGridHlines, backgroundGridHlinesCount, backgroundGridVlines, backgroundGridVlinesCount

backgroundColor
The color of the background.
Default: null

backgroundImage
A URL of an image to render to the background
Default: null

backgroundImageAspect
The aspect ration setting of the SVG image tag, eg it could be XMinYMin meet
Default: none

backgroundImageOpacity
The alpha/opacity value of the background image.
Default: 0.5

backgroundImageStretch
Whether the background image is stretched across the whole chart (except the gutters).
Default: true

backgroundImageX
If you're not using the stretch option you can specify the X coordinate of the image.
Default: null

backgroundImageX
If you're not using the stretch option you can specify the Y coordinate of the image.
Default: null

backgroundImageW
If you're not using the stretch option you can specify the width of the image.
Default: null

backgroundImageH
If you're not using the stretch option you can specify the height of the image.
Default: null

backgroundGrid
Whether to show the background grid or not.
Default: true

backgroundGridColor
The color of the background grid.
Default: #ddd

backgroundGridLinewidth
The linewidth that the background grid lines are. Decimals (eg 0.5) are permitted.
Default: 1

backgroundGridBorder
Determines whether a border line is drawn around the grid.
Default: true

backgroundGridHlines
Determines whether to draw the horizontal grid lines.
Default: true

backgroundGridHlinesCount
Determines how many horizontal grid lines you have. The default is linked to how many scale labels that you have.
Default: null

backgroundGridVlines
Determines whether to draw the vertical grid lines.
Default: true

backgroundGridVlinesCount
Determines how many vertical grid lines you have. The default is to be linked to how many scale labels that you have.
Default: null

 

Margins

Properties: gutterLeft, gutterRight, gutterTop, gutterBottom, hmargin

gutterLeft
The left gutter of the chart, (the gutter is where the labels and title are)).
Default: 35

gutterRight
The right gutter of the chart, (the gutter is where the labels and title are).
Default: 35

gutterTop
The top gutter of the chart, (the gutter is where the labels and title are).
Default: 35

gutterBottom
The bottom gutter of the chart, (the gutter is where the labels and title are).
Default: 35

hmargin
The horizontal margin (in pixels) of the chart. The horizontal margin is either side of the bars.
Default: 5

 

Colors

Properties: colors, colorsSequential, strokestyle, strokestyleConnector

colors
An array of the colors of the bars.
Default: An array - ['red', '#0f0', '#00f', '#ff0', '#0ff', '#0f0','pink','orange','gray','black','red', '#0f0', '#00f', '#ff0', '#0ff', '#0f0','pink','orange','gray','black']

colorsSequential
If true, for regular bar charts, (not stacked or grouped), the colors that you specify will be used in a sequential fashion.
Default: false

strokestyle
The color of the outline of the bars.
Default: #aaa

strokestyleConnector
The color of the connectors between the bars. By default the strokestyle color is used.
Default: null

 

X axis

Properties: xaxis, xaxisTickmarks, xaxisTickmarksLength, xaxisLabelsOffsetx, xaxisLabelsOffsety, xaxisColor, xaxisTextColor, xaxisTextBold, xaxisTextItalic, xaxisTextFont, xaxisTextSize

xaxis
Whether the X axis is shown or not.
Default: true

xaxisTickmarks
Whether the X axis has tickmarks or not.
Default: true

xaxisTickmarksLength
The size of the X axis tickmarks
Default: 5

xaxisLabelsOffsetx
The X pixel offset thats added to the X axis labels.
Default: 0

xaxisLabelsOffsety
The Y pixel offset thats added to the X axis labels.
Default: 0

xaxisColor
The color of the X axis.
Default: black

xaxisTextColor
The color of the X axis text (this overrides the textColor option)
Default: null

xaxisTextBold
Whether the X axis text is bold or not (this overrides the textColor option)
Default: null

xaxisTextItalic
Whether the X axis text is italic or not (this overrides the textItalic option)
Default: null

xaxisTextFont
The font of the X axis text (this overrides the textFont option)
Default: null

xaxisTextSize
The size of the X axis text (this overrides the textSize option)
Default: null

 

Y axis

Properties: yaxis, yaxisColor, yaxisTickmarks, yaxisTickmarksLength, yaxisScale, yaxisLabelsOffsetx, yaxisLabelsOffsety, yaxisLabelsCount, yaxisUnitsPre, yaxisUnitsPost, yaxisDecimals, yaxisPoint, yaxisThousand, yaxisRound, yaxisMax, yaxisMin, yaxisFormatter, yaxisTextColor, yaxisTextBold, yaxisTextItalic, yaxisTextFont, yaxisTextSize

yaxis
Whether the Y axis is shown or not.
Default: true

yaxisColor
The color of the Y axis.
Default: black

yaxisTickmarks
Whether the Y axis has tickmarks or not.
Default: true

yaxisTickmarksLength
The size of the Y axis tickmarks
Default: 5

yaxisScale
Whether the the Y axis scale is shown.
Default: true

yaxisLabelsOffsetx
The X pixel offset thats added to the Y axis labels.
Default: 0

yaxisLabelsOffsety
The Y pixel offset thats added to the Y axis labels.
Default: 0

yaxisLabelsCount
The number of Y labels.
Default: 5

yaxisUnitsPre
Units that are prepended to the scale numbers.
Default: (An empty string

yaxisUnitsPost
Units that are appended to the scale numbers.
Default: (An empty string

yaxisDecimals
The number of decimals that the scale will show.
Default: 0

yaxisPoint
The character(s) used as the decimal point.
Default: .

yaxisThousand
The character(s) used as the thousand seperator.
Default: ,

yaxisRound
If set to true the max scale value will be rounded up.
Default: false

yaxisMax
The maximum scale value (you will need to set yaxisStrict to true if you want the maximum value to be exactly this value).
Default: null

yaxisMin
The minimum Y value. As well as a numeric value you can also set this to mirror so that the X axis is put in the center.
Default: 0

yaxisFormatter
This option should be a function. This function handles the entirety of the number formatting for the yaxis. Units are not added, decimals are not added - its all up to you. The function is passed two arguments - the chart object and the number. It should look like this:
yaxisFormatter: function (obj, num)
{
}

Default: null

yaxisTextColor
The color of the Y axis text (this overrides the textColor option)
Default: null

yaxisTextBold
Whether the Y axis text is bold or not (this overrides the textColor option)
Default: null

yaxisTextItalic
Whether the Y axis text is italic or not (this overrides the textItalic option)
Default: null

yaxisTextFont
The font of the Y axis text (this overrides the textFont option)
Default: null

yaxisTextSize
The size of the Y axis text (this overrides the textSize option)
Default: null

 

Text

Properties: textColor, textFont, textSize, textBold, textItalic

textColor
The color of the text.
Default: black

textFont
The font used for text.
Default: sans-serif

textSize
The size of the text.
Default: 12

textBold
Whether the text is bold or not.
Default: false

textItalic
Whether the text is italic or not.
Default: false

 

Other labels

Properties: labelsAbove, labelsAbovePoint, labelsAboveThousand, labelsAboveDecimals, labelsAbovePre, labelsAbovePost, labelsAboveFormatter, labelsAboveOffsetx, labelsAboveOffsety, labelsAboveFont, labelsAboveSize, labelsAboveBold, labelsAboveItalic, labelsAboveColor, labelsAboveBackground, labelsAboveBackgroundPadding, labelsAboveHalign, labelsAboveValign, labelsAboveSpecific

labelsAbove
Whether to show the labelsAbove style labels.
Default: false

labelsAbovePoint
The decimal point character to use for the labelsAbove labels.
Default: null

labelsAboveThousand
The thousand seperator character to use for the labelsAbove labels.
Default: null

labelsAboveDecimals
The number of decimals to use for the labelsAbove labels.
Default: 0

labelsAbovePre
A string to PREPEND to the labelsAbove labels.
Default: null

labelsAbovePost
A string to APPEND to the labelsAbove labels.
Default: null

labelsAboveFormatter
A function that handles ALL of the formatting of the number. The function is passed two arguments - the object and the unformatted number.
Default: null

labelsAboveOffsetx
The horizontal offset of the labelsAbove labels.
Default: 0

labelsAboveOffsety
The vertical offset of the labelsAbove labels.
Default: 0

labelsAboveFont
The font of the labelsAbove labels.
Default: null

labelsAboveSize
The size of the labelsAbove labels.
Default: null

labelsAboveBold
Whether the labelsAbove labels are bold or not.
Default: null

labelsAboveItalic
Whether the labelsAbove labels are italic or not.
Default: null

labelsAboveColor
The color of the labelsAbove labels.
Default: null

labelsAboveBackground
The background color of the labelsAbove labels.
Default: null

labelsAboveBackgroundPadding
The padding of the labelsAbove labels.
Default: 0

labelsAboveHalign
The horizontal alignment of the labelsAbove.
Default: left

labelsAboveValign
The vertical alignment of the labelsAbove.
Default: center

labelsAboveSpecific
This property allows to make the labelsAbove labels specific strings.
Default: null

 

Tooltips

Properties: tooltips, tooltipsOverride, tooltipsCssClass, tooltipsEvent, highlightStroke, highlightFill, highlightLinewidth

tooltips
An array of tooltips for the chart. This array should NOT be multidimensional - even for stacked or grouped charts.
Default: 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)
{
    // Show tooltip
}
The opt is an argument that contains these items:
Default: null

tooltipsCssClass
The CSS class thats applied to the tooltip DIV.
Default: RGraph_tooltip

tooltipsEvent
The event used for tooltips (either click or mousemove.
Default: click

highlightStroke
The stroke color that's used when highlighting the chart.
Default: rgba(0,0,0,0)

highlightFill
The fill color that's used when highlighting the chart.
Default: rgba(255,255,255,0.7)

highlightLinewidth
The linewidth that's used when highlighting the chart.
Default: 1

 

Title

Properties: title, titleX, titleY, titleHalign, titleValign, titleColor, titleFont, titleSize, titleBold, titleItalic, titleSubtitle, titleSubtitleX, titleSubtitleY, titleSubtitleHalign, titleSubtitleValign, titleSubtitleColor, titleSubtitleFont, titleSubtitleSize, titleBold, titleSubtitleItalic

title
The title of the chart.
Default: (An empty string)

titleX
The specific X coordinate of the title.
Default: null

titleY
The specific Y coordinate of the title.
Default: null

titleHalign
The horizontal alignment of the title.
Default: center

titleValign
The vertical alignment of the title.
Default: bottom

titleColor
The color of the title.
Default: black

titleFont
The font used to render the title.
Default: null

titleSize
The size of the font used to render the title.
Default: 16

titleBold
Whether the title is bold or not.
Default: false

titleItalic
Whether the title is italic or not.
Default: 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.
Default: (An empty string)

titleSubtitleX
The specific X coordinate of the subtitle.
Default: null

titleSubtitleY
The specific Y coordinate of the subtitle.
Default: null

titleSubtitleHalign
The horizontal alignment of the subtitle.
Default: center

titleSubtitleValign
The vertical alignment of the subtitle.
Default: top

titleSubtitleColor
The color of the subtitle.
Default: #aaa

titleSubtitleFont
The font used to render the subtitle.
Default: null

titleSubtitleSize
The size of the font used to render the subtitle. It defaults to be the same as the textSize setting.
Default: 10

titleBold
Whether the subtitle is bold or not.
Default: false

titleSubtitleItalic
Whether the subtitle is italic or not.
Default: false

 

Attribution

Properties: attribution, attributionX, attributionY, attributionHref, attributionHalign, attributionValign, attributionFont, attributionSize, attributionColor, attributionItalic, attributionBold

attribution
Whether to show the attribution link or not. If you're going to link to the RGraph website elsewhere on your site then set this to false.
Default: true

attributionX
The X coordinate of the link. This can be a number (in which case it's treated as the absolute coordinate) or it can be a string starting with a + or - (in which case it's treated as an adjustment to the default value).
Default: (bottom right corner of the SVG tag)

attributionY
The Y coordinate of the link. This can be a number (in which case it's treated as the absolute coordinate) or it can be a string starting with a + or - (in which case it's treated as an adjustment to the default value).
Default: (bottom right corner of the SVG tag)

attributionHref
The href of the link (ie the page to link to).
Default: http://www.rgraph.net/svg/index.html

attributionHalign
The horizontal alignment of the link.
Default: right

attributionValign
The vertical alignment of the link
Default: bottom

attributionFont
The font used to render the link.
Default: sans-serif

attributionSize
The point size of the link.
Default: 7

attributionColor
The color of the link.
Default: gray

attributionItalic
Whether the link is italic or not.
Default: false

attributionBold
Whether the link is bold or not.
Default: false

 

Other

Properties: linewidth, total

linewidth
The line width (around the bars) used.
Default: 1

total
Whether to show the total at the end or not.
Default: true

 

Methods

 

obj.set(name, value)

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.

 

obj.getYCoord(value)

This method can be used to get an appropriate X coord for a value when you're doing custom drawing on the chart. It returns null if the value is out of range.

 

obj.on(event, handler)

This function adds an event listener (such as onbeforedraw or ondraw) to the chart object.

 

obj.exec(func)

This function simply executes the function that you give it (there and then - not on any particular event)

If you like RGraph please share it: