RGraph is a JavaScript charts library based on
HTML5 SVG and canvas. RGraph is mature (over 15 years
old) and has a wealth of features making it an ideal
choice to show charts on your website.
Get the latest version of RGraph (version 6.17) from
the download page. There's also older versions available,
minified files and links to cdnjs.com hosted libraries.
You can use these properties to control how the chart appears.
You can set them by including them in the options section of the
configuration as shown above.
Whether a grid is shown as part of the background.
Default: true
Name: backgroundGridColor
Description:
The color of the background grid.
Default: #eee
Name: backgroundGridLinewidth
Description:
The linewidth of the background grid.
Default: 1
Name: backgroundGridVlinesCount
Description:
When using autofit this allows you to specify how many vertical gridlines you want.
Default: 20
Name: backgroundGridDotted
Description:
If you want to have your background grid dashed then set this to true.
Default: false
Name: backgroundGridDashed
Description:
If you want to have your background grid dotted then set this to true. This takes precedence over dashed lines.
Default: false
Name: backgroundVbars
Description:
Vertical bars used for decorative purposes, or for marking something on the chart (an event for example). See below for further information.
Default: [] (An empty array)
Name: backgroundHbars
Description:
Horizontal bars used for decorative purposes, or for marking something on the chart (an event for example). See below for further information.
Default: [] (An empty array)
Name: backgroundColor
Description:
If you want to have a single background color for your chart you can use this. It doesn't cover the margins. If you want that then you can simply apply a css background color to the canvas tag.
Default: null
Name: backgroundBorder
Description:
You can use this property to specify that the chart area has a border around it.
Default: false
Name: backgroundBorderLinewidth
Description:
The linewidth of the border that goes around the chart area.
Default: 1
Name: backgroundBorderColor
Description:
The color of the border that goes around the chart area.
Default: #aaa
Name: backgroundBorderDashed
Description:
Whether the border around the chart area is dashed or not.
Default: false
Name: backgroundBorderDotted
Description:
Whether the border around the chart area is dotted or not.
Default: false
Name: backgroundBorderDashArray
Description:
If the default dot or dash style is not to your liking you can use this property to specify your own style. It should be an array of two or more elements that specify the dashes and spaces - for example: backgroundBorderDashArray: [5,10],
Default: null
X-axis properties
Name: xaxis
Description:
Set this to true if you want an x-axis.
Default: false
Name: xaxisScaleMax
Description:
Required. This determines how many "units" wide the Gantt chart is. For example, to represent a year, you would use 365, giving a granularity of one day.
Default: none
Name: xaxisScaleMin
Description:
This option can sometimes make using a Gantt chart spread over several pages easier.
Default: 0
Name: xaxisPosition
Description:
This determines where the x-axis labels are positioned.
Default: bottom
Name: xaxisLinewidth
Description:
The linewidth used for the x-axis and the x-axis tickmarks (if they're displayed).
Default: 1
Name: xaxisColor
Description:
The color of the x-axis (and its tickmarks.
Default: black
Name: xaxisTickmarks
Description:
Whether the x-axis tickmarks are shown.
Default: true
Name: xaxisTickmarksLastLeft
Description:
Whether the last tickmark on the left is displayed.
Default: null
Name: xaxisTickmarksLastRight
Description:
Whether the last tickmark on the right is displayed.
Default: null
Name: xaxisTickmarksLength
Description:
The length of the tickmarks.
Default: 3
Name: xaxisTickmarksCount
Description:
The number of tickmarks that are shown on the x-axis.
Default: null
Name: xaxisLabels
Description:
An array of the labels to be used on the chart.
Default: An empty array
Name: xaxisLabelsFont
Description:
The font used to render the labels.
Default: null
Name: xaxisLabelsSize
Description:
The size of the labels.
Default: null
Name: xaxisLabelsColor
Description:
The color of the labels.
Default: null
Name: xaxisLabelsBold
Description:
Whether the labels are bold or not.
Default: null
Name: xaxisLabelsItalic
Description:
Whether the labels are italic or not.
Default: null
Name: xaxisLabelsOffsetx
Description:
This allows you finer-grained control in the horizontal direction over the X label positioning if you need it.
Default: 0
Name: xaxisLabelsOffsety
Description:
This allows you finer-grained control in the vertical direction over the X label positioning if you need it.
Default: 0
Name: xaxisLabelsHalign
Description:
The horizontal alignment of the labels.
Default: center
Name: xaxisLabelsValign
Description:
The vertical alignment of the labels.
Default: top
Name: xaxisLabelsAngle
Description:
The angle of the x-axis labels. For example, you could set this to 45 to get angled labels.
Default: 0 (Horizontal)
Name: xaxisLabelsPosition
Description:
This property controls how the labels are arranged - section for most chart types and edge for Line charts. You probably won't need to change this.
Default: section
Name: xaxisLabelsClass
Description:
This property allows you to add your own css class to the x-axis labels which you can then use for styling purposes or to make retrieving the span tags easier (the dom elements). If you inspect the labels in your browser's javascript console (you will first need to enable the textAccessiblePointerevents property) you will be able to see the other css classes that are assigned to the labels.
Default: [none]
Name: xaxisTitle
Description:
This allows you to specify a title for the x-axis.
Default: none
Name: xaxisTitleSize
Description:
This allows you to specify a size for the x-axis title.
Default: null
Name: xaxisTitleFont
Description:
This allows you to specify a font for the x-axis title.
Default: null
Name: xaxisTitleBold
Description:
This controls whether the x-axis title is bold or not.
Default: null
Name: xaxisTitleItalic
Description:
This controls whether the x-axis title is italic or not.
Default: null
Name: xaxisTitleColor
Description:
This controls the color of the x-axis title.
Default: null
Name: xaxisTitleX
Description:
By giving this you can specifically set the X coordinate of the x-axis title.
Default: null
Name: xaxisTitleY
Description:
By giving this you can specifically set the Y coordinate of the x-axis title.
Default: null
Name: xaxisTitleOffsetx
Description:
The horizontal offset that's applied to the title.
Default: 0
Name: xaxisTitleOffsety
Description:
The vertical offset that's applied to the title.
Default: 0
Name: xaxisTitleHalign
Description:
The horizontal alignment of the title.
Default: center
Name: xaxisTitleValign
Description:
The vertical alignment of the title.
Default: top
Name: xaxisTitlePos
Description:
This is a multiplier (ie a digit usually between 0 and 1) that gets multiplied with the margin to get the Y position of the title.
Default: null
Y-axis properties
Name: yaxis
Description:
Whether the y-axis is drawn.
Default: false
Name: yaxisLinewidth
Description:
The linewidth of the y-axis.
Default: 1
Name: yaxisColor
Description:
The color of the y-axis.
Default: black
Name: yaxisLabelsPosition
Description:
This controls how the specific labels are positioned on the y-axis. It has no effect on a scale.
Default: section
Name: yaxisLabelsFont
Description:
The font that's used by the y-axis labels.
Default: null
Name: yaxisLabelsSize
Description:
The size of the y-axis labels.
Default: null
Name: yaxisLabelsColor
Description:
The color of the y-axis labels.
Default: null
Name: yaxisLabelsBold
Description:
Whether the y-axis labels are bold or not.
Default: null
Name: yaxisLabelsItalic
Description:
Whether the y-axis labels are italic or not.
Default: null
Name: yaxisLabelsOffsetx
Description:
This allows you finer-grained control in the horizontal direction over the Y label positioning if you need it.
Default: 0
Name: yaxisLabelsOffsety
Description:
This allows you finer-grained control in the vertical direction over the Y label positioning if you need it.
Default: 0
Name: yaxisLabelsHalign
Description:
The horizontal alignment of the y-axis labels.
Default: null
Name: yaxisLabelsValign
Description:
The vertical alignment of the y-axis labels.
Default: null
Name: yaxisTitle
Description:
This allows you to specify a title for the y-axis.
Default: none
Name: yaxisTitleSize
Description:
This allows you to specify a size for the y-axis title.
Default: null
Name: yaxisTitleFont
Description:
This allows you to specify a font for the y-axis title.
Default: null
Name: yaxisTitleBold
Description:
This controls whether the y-axis title is bold or not.
Default: null
Name: yaxisTitleColor
Description:
This controls what color the y-axis title is.
Default: null
Name: yaxisTitleItalic
Description:
This controls whether the y-axis title is italic or not.
Default: null
Name: yaxisTitlePos
Description:
This is multiplied with the margin to give the position of the y-axis title.
Default: 0.25
Name: yaxisTitleOffsetx
Description:
The pixel offset that's added to the y-axis titles X coordinate.
Default: 0
Name: yaxisTitleOffsety
Description:
The pixel offset that's added to the y-axis titles Y coordinate.
Default: 0
Name: yaxisTitleX
Description:
By giving this you can specifically set the X position of the y-axis title.
Default: null
Name: yaxisTitleY
Description:
By giving this you can specifically set the Y position of the y-axis title.
Default: null
Name: yaxisTitleHalign
Description:
The horizontal alignment of the y-axis title.
Default: 0
Name: yaxisTitleValign
Description:
The vertical alignment of the y-axis title.
Default: 0
Name: yaxisTitleAccessible
Description:
With this property you can control whether the y-axis title is accessible or not.
Default: true
Color properties
Name: colorsDefault
Description:
The default color of bars. If you don't specify a color for the event, this will be used.
Default: white
Margin properties
Name: marginLeft
Description:
The left margin of the chart, (the margin is where the labels and title are)).
Default: 75
Name: marginRight
Description:
The right margin of the chart, (the margin is where the labels and title are).
Default: 35
Name: marginTop
Description:
The top margin of the chart, (the margin is where the labels and title are).
Default: 35
Name: marginBottom
Description:
The bottom margin of the chart, (the margin is where the labels and title are).
Default: 35
Name: marginInner
Description:
Acts much like the marginInner setting for the Bar chart. By using this setting you can give yourself thin bars.
Default: 2
Labels and text properties
Name: textAccessible
Description:
A new feature in 2016 that allows you to use dom text in place of canvas text. It makes for much higher quality text that you can also select if desired (for copy/paste operations). It won't fit all situations and you can read more about the DOM text feature here. A good way to control borders/margins/padding etc is not to set them on the canvas but to wrap the canvas in a div and set them on that like this:
This can be visible or hidden and it controls whether the text is clipped to the edges of the canvas. It defaults to be visible and means you can set small margins if you wish.
Default: visible
Name: textAccessiblePointerevents
Description:
This controls whether the dom text responds to mouse-based events or not (it sets the pointer-eventscss property to none).
Default: false
Name: textSize
Description:
The size of the text (in points).
Default: 12
Name: textFont
Description:
The font used to render the text.
Default: Arial, Verdana, sans-serif
Name: textColor
Description:
The color of the labels.
Default: black
Name: textBold
Description:
Whether the text on the chart is bold or not.
Default: false
Name: textItalic
Description:
Whether the text on the chart is italic or not.
Default: false
Name: labelsInbar
Description:
An array of labels that are drawn inside the Gantt chart bars. These labels can also be drawn on the right of these bars.
Default: null
Name: labelsInbarAlign
Description:
This controls whether the labels are aligned left, center or right when the labels are drawn inside the bars.
Default: left
Name: labelsInbarBackground
Description:
The background color for the text. By default, there's no background to the text.
Default: null
Name: labelsInbarColor
Description:
The color of the labels.
Default: null
Name: labelsInbarFont
Description:
The font used to draw the labels.
Default: null
Name: labelsInbarSize
Description:
The size of the text labels.
Default: null
Name: labelsInbarBold
Description:
Whether the inbar labels are bold or not.
Default: null
Name: labelsInbarItalic
Description:
Whether the inbar labels are italic or not.
Default: null
Name: labelsInbarAbove
Description:
If you prefer, the labels can be drawn "above" the bars (actually to the right but for api compatibility it's called "above").
Default: false
Name: labelsInbarOffsetx
Description:
This allows you finer-grained control in the horizontal direction over the text positioning if you need it.
Default: 0
Name: labelsInbarOffsety
Description:
This allows you finer-grained control in the vertical direction over the text positioning if you need it.
Default: 0
Name: labelsComplete
Description:
This allows you to turn off the "percent complete" indicator if you want to.
Default: true
Name: labelsCompleteFont
Description:
The font used to render the percent-complete number.
Default: null
Name: labelsCompleteSize
Description:
The size of the text.
Default: null
Name: labelsCompleteColor
Description:
The color of the text.
Default: null
Name: labelsCompleteBold
Description:
Whether the text is bold or not.
Default: null
Name: labelsCompleteItalic
Description:
Whether the text is italic or not.
Default: null
Name: labelsCompleteOffsetx
Description:
This allows you finer-grained control in the horizontal direction over the text positioning if you need it.
Default: 0
Name: labelsCompleteOffsety
Description:
This allows you finer-grained control in the vertical direction over the text positioning if you need it.
The font that the title is rendered in. If not specified the textFont setting is used (usually Arial).
Default: null
Name: titleSize
Description:
The size of the title. If not specified the size is usually 4pt bigger than the textSize setting.
Default: null
Name: titleBold
Description:
Whether the title is bold or not.
Default: null
Name: titleItalic
Description:
Whether the title is italic or not.
Default: null
Name: titleColor
Description:
The color of the title.
Default: null
Name: titleX
Description:
To give the exact X coordinate for the title - use this. This can also be a string like this: "-5" - in which case it's converted to a number and added to the calculated coordinate - allowing you to adjust the calculated coordinate.
Default: null
Name: titleY
Description:
To give the exact Y coordinate for the title - use this. This can also be a string like this: "-5" - in which case it's converted to a number and added to the calculated coordinate - allowing you to adjust the calculated coordinate.
Default: null
Name: titleHalign
Description:
The horizontal alignment of the title.
Default: center (can change depending on other options)
Name: titleValign
Description:
The vertical alignment of the title.
Default: center (can change depending on other options)
Name: titleOffsetx
Description:
You can use this property to adjust the positioning of the title in the horizontal direction (positive values adjust the title to the right and negative values adjust it to the left).
Default: 0
Name: titleOffsety
Description:
You can use this property to adjust the positioning of the title in the vertical direction (positive values adjust the title downwards and negative values adjust it upwards).
Default: 0
Name: titleSubtitle
Description:
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.
Default: null
Name: titleSubtitleSize
Description:
The size of the font used to render the subtitle.
Default: null
Name: titleSubtitleColor
Description:
The color of the subtitle.
Default: #aaa
Name: titleSubtitleFont
Description:
The font used to render the subtitle.
Default: null
Name: titleSubtitleBold
Description:
Whether the subtitle is bold or not.
Default: null
Name: titleSubtitleItalic
Description:
Whether the subtitle is italic or not.
Default: null
Name: titleSubtitleOffsetx
Description:
Use this property to adjust the horizontal position of the subtitle.
Default: 0
Name: titleSubtitleOffsety
Description:
Use this property to adjust the vertical position of the subtitle.
Default: 0
Interactive features properties
Name: tooltips
Description:
An array of tooltips that are shown when the bars are clicked. They can contain html.
Default: (An empty array)
Name: tooltipsEvent
Description:
This is the event that triggers the tooltips. It can be either click or mousemove.
Default: onclick
Name: tooltipsEffect
Description:
The effect used for showing tooltips. Possible values are slidefade or none.
Default: slide
Name: tooltipsOverride
Description:
If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the tooltips documentation page.
Default: null
Name: tooltipsFormattedPoint
Description:
When using formatted tooltip strings this is used as the point when using the %{value_formatted} option.
Default: .
Name: tooltipsFormattedThousand
Description:
When using formatted tooltip strings this is used as the thousand separator when using the %{value_formatted} option.
Default: ,
Name: tooltipsFormattedDecimals
Description:
When using formatted tooltip strings this specifies the number of decimals when using the %{value_formatted} option.
Default: 0
Name: tooltipsFormattedUnitsPre
Description:
When using formatted tooltip strings these units are prepended to the number when using the %{value_formatted} option.
Default: (an empty string)
Name: tooltipsFormattedUnitsPost
Description:
When using formatted tooltip strings these units are appended to the number when using the %{value_formatted} option.
Default: (an empty string)
Name: tooltipsFormattedListType
Description:
With this property you can switch between an unordered list (the default) and an ordered list. Possible values are ul and ol.
Default: ul
Name: tooltipsFormattedListItems
Description:
This should be a two-dimensional array of the list items that are to be shown for all of the tooltips. An example of this property is:
tooltipsFormattedListItems: [
['Bill','Jerry','Berty'], // First tooltip
['Gill','Carrie','Lucy'], // Second tooltip
['Pob','Nobby','Hilda'] // Third tooltip
]
You can use css to style this list - for example:
.RGraph_tooltip ul#rgraph_formatted_tooltips_list li {
text-align: left;
color: yellow;
}
Default: null
Name: tooltipsFormattedTableHeaders
Description:
When showing a table in the tooltips this can be an array of headers for the table. These are added to the tooltip using th tags.
Default: null
Name: tooltipsFormattedTableData
Description:
This is the data that is added to the table. This is a 3-dimensional array so it's easy to make a mistake. See the example, copy the code from it and then modify it suit. You'll create fewer bugs this way.
Default: null)
Name: tooltipsPointer
Description:
By default, the tooltips have a small triangular pointer that points to the shape that was clicked on. You can turn this off with this property.
Default: true
Name: tooltipsPointerCss
Description:
If you want any css values applied to the tooltips pointer (for example, a css border) then specify an object containing those values to this property. For example:
This allows you to adjust the vertical position of the tooltips pointer.
Default: 0
Name: tooltipsPointerOffsety
Description:
This allows you to adjust the vertical position of the tooltips pointer (for example, if you add a border you may need to move it down slightly).
Default: 0
Name: tooltipsPositionStatic
Description:
The new default (as of August 2020) is for tooltips to be positioned statically and not be dependent on the mouse position. If you don't want this for whatever reason, you can disable it with this setting. When you set it to false tooltips are positioned next to the mouse pointer.
Default: true
Name: tooltipsCss
Description:
If you want to specify some css that gets applied to all of the tooltips, but don't want to use the RGraph.tooltips.style object (which gets applied to all of the tooltips on the page for every chart) you can use this property to give some per-objectcss for the tooltips. These are css styles that get applied to all of the tooltips for the specific object only. It should look like this:
This property allows you to shift the tooltips left or right.
Default: 0
Name: tooltipsOffsety
Description:
This property allows you to shift the tooltips up or down.
Default: 0
Name: tooltipsHotspotIgnore
Description:
This can be a number of things and can be used to ignore certain tooltip hotspots - which can allow charts to the rear to be clickable. There's an example of this in the download archive called pie-tooltipshotspotignore.html. You can use the transparent color to allow the rear chart to be seen in such a case. It can be:
A single boolean value (ie true or false) to enable or disable all of the hotspots - true means the hotspot will be ignored
A single number (the zero-indexed number corresponding to the hotspot to ignore)
An array of numbers (the numbers are the indexes of hotspots to ignore)
An array of booleantrue or false values - the position of these values correspond to the index(es) of the segments to ignore (for example [false, false, true, false, false] - true means the corresponding hotspot will be ignored)
Default: null
Name: contextmenu
Description:
An array of context menu items. Cannot be used in conjunction with tooltips.
Default: (An empty array)
Name: annotatable
Description:
Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
Default: false
Name: annotatableColor
Description:
If you do not allow the use of the palette, then this will be the only color allowed for annotations.
Default: black
Name: annotatableLinewidth
Description:
This is the linewidth of the annotations.
Default: 1
Name: adjustable
Description:
Defaulting to false, this determines whether your Gantt chart will be adjustable.
Default: false
Name: adjustableOnly
Description:
This should be an array of values that determine whether a Bar is adjustable or not. A truthy value for when it is, a falsey value for when it's not.
Default: null
Miscellaneous properties
Name: highlightStyle
Description:
By default, this is null but you can set it to a function if you wish so that function is called to do the chart highlighting. It's passed the shape object as an argument. As of version 5.23 you can also set this to invert as well. If you do this on a dark background you may find that you need to change the highlightFill color setting as well.
Default: null
Name: highlightStroke
Description:
If you use tooltips, this controls the color of the highlight stroke.
Default: black
Name: highlightFill
Description:
If you use tooltips, this controls the color of the highlight fill.
Default: rgba(255,255,255,0.5)
Name: borders
Description:
Whether a border is shown on the event bars.
Default: true
Name: clearto
Description:
This is used in animations and effects as the default color to use when the canvas is cleared.
Default: null
Name: responsive
Description:
This option is new to the July 2023 release (v6.13) and allows you to inline the responsive configuration instead of appending it on to the end of the object it as a function. The documentation and demo pages have been updated to use this new option. You can read more about the responsive feature by reading the responsive configuration page.
Default: null
Name: corners
Description:
This option controls whether the corners of the bars are round or square. To use rounded corners set this to round
Default: square
Name: cornersRoundRadius
Description:
This option allows you to increase or decrease the severity of the rounding of the corners of the bars. There's a demo of a Gantt chart which uses rounding to good effect in the download archive called gantt-dark.html
Default: 25
Methods
obj.get(name)
An accessor function that you can use to retrieve the
values of properties.
obj.set(name, value)
An accessor that you can use to set the values of
properties.
obj.getShape(event)
This method makes it easy to get hold of which bar has been clicked on or
hovered over. It returns an object which has the following indexes available:
object
The chart object
x
The X coordinate for the bar that was clicked on.
y
The Y coordinate for the bar that was clicked on.
width
The width of the bar that was clicked on.
height
The height of the bar that was clicked on.
dataset
This is the numerical index that represents the relevant "row" of the
Gantt chart. The group in effect.
index
This is the index in the group. If you only have one bar per row then this
will always be zero. If you have two bars in a row then the getShape
function will return zero for the first bar and one for the second bar.
sequentialIndex
The sequential index of the bar. This number can be used to find the relevant
tooltip for example.
tooltip
If a tooltip is associated with this bar this will be it. id
strings are expanded for you (where the tooltip text is retrieved from the html
tag with the matching ID).
<script>
gantt.canvas.onclick = function (e)
{
RGraph.redraw();
var canvas = e.target,
obj = canvas.__object__,
shape = obj.getShape(e);
if (shape) {
var x = shape.x,
y = shape.y,
width = shape.width,
height = shape.height;
obj.path(
'b r % % % % s black f red',
x, y, width, height
);
}
}
</script>
obj.getXCoord(value)
This method can be used to get an appropriate X coordinate for a value
when you're doing custom drawing on the chart. It
returns null if the value is out of range.
obj.getValue(mixed)
This method can be used to get the value when the chart has been clicked on.
The argument is the event object. You can also
use this method outside of an event listener by giving the function an
array as the argument containing the X/Y coordinates.
obj.canvas.onclick = function (e)
{
var obj = e.target.__object__;
var value = obj.getValue(e);
// ...
}
obj.on(event, function)
This method can be used to set an event listener on an object. It
operates similarly to the jqueryon function.
The first argument is the event that you wish to attach to and the second
is the handler function. For example:
.on('draw', function (obj)
{
// Put your event code here
});
The responsive function helps your charts
respond to different browser window sizes and screen
resolutions. For example, for smaller screens, you
might want to have angled labels or show shorter
versions of them completely.
Update:
There is now the responsive configuration option available to you
and this is now the preferred method of configuration.
The start value is the (zero-indexed) start number relative to your
xaxisScaleMax value. So if you have set your
xaxisScaleMax to 62, (to represent
two months), and this value is 31, the start will be the start of the
second month. In this case, you could give two labels -
['July', 'August'].
The duration value is the duration. So using the previous example,
if you set this to 7, you would have an event lasting a week.
The complete value is the "percentage complete" indicator. This is
shown to the right of the event and is optional - you can
specify null if you wish.
The label value is the label that is used on the left-hand-side.
The optional background value stipulates the background color
that the bar is. The default is white.
The optional color value is the foreground color of the bar.
This defaults to #0c0.
The optional border value is the border color, defaulting to black
And the optional linewidth value is the numerical linewidth of the
border. The default for this is 1.
Adding vertical and horizontal bars to your Gantt chart
You can add decorative vertical or horizontal bars like so:
You can use these for decorative purposes, or to mark events/limits. For
the vertical bars, the first value is the start index, the same as above.
The second value is the unit length, again, the same as above. The third
value is the color of the vertical bar.
And for the horizontal bars you can specify the color of the bar - they
automatically extend across the entire Gantt chart area. If you don't
specify a color (as is demonstrated above) then there won't be a bar for
that entry.
Events
RGraph supports custom events that allow you to easily add interactivity to your charts if
required. The following events are available:
adjustbegin This event fires at the start of adjusting - like the standard mousedown event.
adjust This event fires (repeatedly) during adjusting - like the standard mousemove event.
adjustend This event fires at the end of adjusting - like the standard mouseup event.
annotatebegin This event fires at the start of annotating - like the standard mousedown event.
annotate This event fires (repeatedly) during annotating - like the standard mousemove event.
annotateend This event fires at the end of annotating - like the standard mouseup event.
annotateclear This event fires at the end of the RGraph.clearAnnotations function.
beforeclear This event fires at the start of the RGraph.clear function.
clear This event fires at the end of the RGraph.clear function.
click This is similar to the standard canvasclick event but this only fires when you click on a bar - not the whole canvas.
beforecontextmenu This event fires when you have the contextmenu enabled and it is about to appear.
contextmenu This event fires when you have the contextmenu enabled and it has been displayed.
beforedraw This event fires at the start of the draw method before anything has been done.
firstdraw This event fires at the end of the draw function - but only the first time that the draw function is called.
draw This event fires at the end of the draw function.
mousemove This event is similar to the standard mousemove event but only fires when you move the mouse over a bar on the chart.
mouseover This event is similar to the standard mouseover event but only fires when you move the mouse over a bar on the chart.
mouseout This event is similar to the standard mouseout event but only fires when you move the mouse away from a bar on the chart that you've previously hovered over.
beforetooltip This event fires at the start of the tooltip showing process.
tooltip This event fires after a tooltip has been shown.
beforebackground This event fires before the background (grid, image, bars etc) has been drawn.
background This event fires after the background (grid, image, bars etc) has been drawn.
These effects are available and can be used instead of the
draw function. There are also generic effects available which
you can see here:
Generic effects and transitions