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 use for showing charts on your website.
Get the latest version of RGraph (version 6.19, 28th September 2024) from
the download page. You can read the changelog here. There's also older versions available,
minified files and links to cdnjs.com hosted libraries.
<script>
// Data that is to be shown on the Horizontal Bar chart. To show a stacked or grouped chart
// each number should instead be an array of numbers (as shown below).// data = [280,45,133,152,278,221,56];// An example of the data used by stacked and grouped charts
// data = [[1,5,6], [4,5,3], [7,8,9], [4,7,7], [9,6,5], [5,2,3], [4,8,6]]
data = [[542,623],[453,646],[756,688]];
days = ['Monday','Tuesday','Wednesday'];
function getTotal (index)
{
return RGraph.SVG.numberFormat({num: RGraph.SVG.arraySum(data[index])});
}
hbar = new RGraph.SVG.HBar({
id: 'chart-container',
data: data,
options: {
xaxis: false,
xaxisScaleUnitsPost: 'k',
yaxisLabels: '%{global:days[%{index}]} (%{function:getTotal(%{index})})',
yaxisLabelsBold: true,
yaxisTickmarks: false,
colors:['orange','#1F77B4'],
backgroundGridHlines: false,
backgroundGridBorder: false,
marginTop: 50,
marginInner: 10,
marginInnerGrouped: 5,
grouping: 'grouped',
title: 'A Horizontal Bar chart showing three days of sales',
titleSubtitle: 'Sales are confirmed and cards have been charged',
tooltips: '<i style="font-size: 16pt">Results for <b>%{property:yaxisLabels[%{dataset}]}</b></i>%{key}',
tooltipsFormattedKeyLabels: ['David','Richard'],
tooltipsFormattedUnitsPre: '$',
tooltipsFormattedUnitsPost: ',000',
tooltipsCss: {
backgroundColor: '#333',
fontWeight: 'bold',
fontSize: '14pt',
opacity: 0.85
}
}
}).draw();
</script>
The coordinates properties
The coordinates for the bars on the chart are held in the following
arrays:
obj.coords
All of the coordinates - that are appended to this
array as the bars are drawn. Each element of the array is
an object which consists of x, y, width,
height, element and object properties. The
element property is the svgrect element - and the
object property is the RGraph object.
obj.coords2
Again, this is all of the coordinates - but arranged slightly
differently. This is only used by stacked and grouped charts -
each element is an array of that groups/stacks segments. Then each
sub-element is an object which consists of x, y,
width, height, element and object
properties. The
element property is the svgrect element - and the
object property is the RGraph object.
Properties
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.
The aspect ratio setting of the svg image tag, eg it could be XMinYMin meet.
Default: none
Name: backgroundImageOpacity
Description:
The opacity value of the background image.
Default: 0.5
Name: backgroundImageStretch
Description:
Whether the background image is stretched across the whole chart (except the margins).
Default: true
Name: backgroundImageX
Description:
If you're not using the stretch option you can specify the x-axis coordinate of the image.
Default: null
Name: backgroundImageX
Description:
If you're not using the stretch option you can specify the y-axis coordinate of the image.
Default: null
Name: backgroundImageW
Description:
If you're not using the stretch option you can specify the width of the image.
Default: null
Name: backgroundImageH
Description:
If you're not using the stretch option you can specify the height of the image.
Default: null
Name: backgroundGrid
Description:
Whether to show the background grid or not.
Default: true
Name: backgroundGridColor
Description:
The color of the background grid.
Default: #ddd
Name: backgroundGridLinewidth
Description:
The linewidth that the background grid lines are. Decimals (eg 0.5) are permitted.
Default: 1
Name: backgroundGridBorder
Description:
Determines whether a border is drawn around the grid.
Default: true
Name: backgroundGridHlines
Description:
Determines whether to draw the horizontal grid lines.
Default: true
Name: backgroundGridHlinesCount
Description:
Determines how many horizontal grid lines you have. The default is linked to how many scale labels that you have.
Default: null
Name: backgroundGridVlines
Description:
Determines whether to draw the vertical grid lines.
Default: true
Name: backgroundGridVlinesCount
Description:
Determines how many vertical grid lines you have. The default is to be linked to how many scale labels that you have.
Default: null
Name: backgroundGridDashed
Description:
You can specify a dashed background grid by setting this to true. This option takes precedence over the dotted variant.
Default: false
Name: backgroundGridDotted
Description:
You can specify a dotted background grid by setting this to true.
Default: false
Name: backgroundGridDashArray
Description:
With this option you can specify exactly what the array used for the linedash setting should be. It should be an array consisting of two numbers.
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
Margin properties
Name: marginLeft
Description:
The left margin of the chart (the margin is where the labels and title are).
Default: 100
Name: marginLeftAuto
Description:
By default the left margin automatically resizes to fit the size of the labels (and ignores the marginLeft setting. So to set your own marginLeft setting you'll need to set this to false.
Default: true
Name: marginRight
Description:
The right margin of the chart, (the margin is where the labels and title are).
Default: 35
Name: marginRightAuto
Description:
If the y-axis is on the right-hand-side then you probably want to set this to true and the marginLeftAuto property to false and then size the marginLeft manually.
Default: false
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:
The vertical margin (in pixels) of the chart. The vertical margin is on the inside of the axes.
Default: 3
Name: marginInnerGrouped
Description:
On a grouped Horizontal Bar chart this is the margin between bars that are in the same group.
Default: 2
Name: marginInnerTop
Description:
This is the space that's inside the regular margins at the top of the chart. There's a demo in the download archive calleddemos/svg-hbar-basic-grouped.html that shows this property.
Default: 0
Name: marginInnerBottom
Description:
This is the space that's inside the regular margins at the bottom of the chart. There's a demo in the download archive calleddemos/svg-hbar-basic-grouped.html that shows this property.
The decimal point character to use for the labelsAbove labels.
Default: null
Name: labelsAboveThousand
Description:
The thousand separator character to use for the labelsAbove labels.
Default: null
Name: labelsAboveDecimals
Description:
The number of decimals to use for the labelsAbove labels.
Default: 0
Name: labelsAbovePre
Description:
A string to prepend to the labelsAbove labels.
Default: null
Name: labelsAbovePost
Description:
A string to append to the labelsAbove labels.
Default: null
Name: labelsAboveFormatter
Description:
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
Name: labelsAboveOffsetx
Description:
The horizontal offset of the labelsAbove labels.
Default: 0
Name: labelsAboveOffsety
Description:
The vertical offset of the labelsAbove labels.
Default: 0
Name: labelsAboveFont
Description:
The font of the labelsAbove labels.
Default: null
Name: labelsAboveSize
Description:
The size of the labelsAbove labels.
Default: null
Name: labelsAboveBold
Description:
Whether the labelsAbove labels are bold or not.
Default: null
Name: labelsAboveItalic
Description:
Whether the labelsAbove labels are italic or not.
Default: null
Name: labelsAboveColor
Description:
The color of the labelsAbove labels.
Default: null
Name: labelsAboveBackground
Description:
The background color of the labelsAbove labels.
Default: #fffc
Name: labelsAboveBackgroundPadding
Description:
The padding of the labelsAbove labels.
Default: 0
Name: labelsAboveHalign
Description:
The horizontal alignment of the labelsAbove.
Default: left
Name: labelsAboveValign
Description:
The vertical alignment of the labelsAbove.
Default: center
Name: labelsAboveSpecific
Description:
This property allows you to make the labelsAbove labels specific strings instead of numbers.
Default: null
Name: labelsInbar
Description:
Whether to show the labelsInbar style labels.
Default: false
Name: labelsInbarPoint
Description:
The decimal point character to use for the labelsInbar labels.
Default: null
Name: labelsInbarThousand
Description:
The thousand separator character to use for the labelsInbar labels.
Default: null
Name: labelsInbarDecimals
Description:
The number of decimals to use for the labelsInbar labels.
Default: 0
Name: labelsInbarPre
Description:
A string to prepend to the labelsInbar labels.
Default: null
Name: labelsInbarPost
Description:
A string to append to the labelsInbar labels.
Default: null
Name: labelsInbarFormatter
Description:
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
Name: labelsInbarOffsetx
Description:
The horizontal offset of the labelsInbar labels.
Default: 0
Name: labelsInbarOffsety
Description:
The vertical offset of the labelsInbar labels.
Default: 0
Name: labelsInbarHalign
Description:
The horizontal alignment of the labelsInbar labels.
Default: center
Name: labelsInbarValign
Description:
The vertical alignment of the labelsInbar labels.
Default: center
Name: labelsInbarFont
Description:
The font of the labelsInbar labels.
Default: null
Name: labelsInbarSize
Description:
The size of the labelsInbar labels.
Default: null
Name: labelsInbarBold
Description:
Whether the labelsInbar labels are bold or not.
Default: null
Name: labelsInbarItalic
Description:
Whether the labelsInbar labels are italic or not.
Default: null
Name: labelsInbarColor
Description:
The color of the labelsInbar labels.
Default: null
Name: labelsInbarBackground
Description:
The background color of the labelsInbar labels.
Default: null
Name: labelsInbarBackgroundPadding
Description:
The padding of the labelsInbar labels.
Default: 0
Name: labelsInbarSpecific
Description:
This property allows you to make the labelsInbar labels specific strings instead of numbers.
Default: null
Tooltip properties
Name: tooltips
Description:
An array of tooltips for the chart. This array should NOT be multidimensional - even for stacked or grouped charts. You can also check the canvas tooltips documentation for more information.
Default: null
Name: tooltipsOverride
Description:
This can be a function that 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:
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).
Default: null
Name: tooltipsEvent
Description:
The event used for tooltips (either click or mousemove.
Default: click
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: tooltipsFormattedKeyLabels
Description:
The labels that are used in the formatted tooltip key.
Default: [] (an empty array)
Name: tooltipsFormattedKeyColors
Description:
The colors that are used in the formatted tooltip key. Normally these are automatically taken from the colors on the chart but can be specified differently using this property.
Default: null
Name: tooltipsFormattedKeyColorsShape
Description:
This is the shape that's used in the tooltip key. It can be square or circle
Default: square
Name: tooltipsFormattedKeyColorsCss
Description:
By using this property you can add css values to the key color shape that appears in the tooltip key. Note the property name is "color" and not "colors" like previous properties. It should be an object of css properties like this:
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-dimension 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 in the canvas documentation, 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 (a css border, for example) then specify an object containing those values to this property. For example:
This allows you to adjust the horizontal position of the tooltips pointer.
Default: 0
Name: tooltipsPointerOffsety
Description:
This allows you to adjust the vertical position of the tooltips pointer.
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.SVG.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: highlightStroke
Description:
The stroke color that's used when highlighting the chart.
Default: rgba(0,0,0,0)
Name: highlightFill
Description:
The fill color that's used when highlighting the chart.
Default: rgba(255,255,255,0.7)
Name: highlightLinewidth
Description:
The linewidth that's used when highlighting the chart.
Default: 1
Shadow properties
Name: shadow
Description:
Whether a drop shadow is applied to the lines.
Default: false
Name: shadowOffsetx
Description:
The horizontal offset of the shadow.
Default: 2
Name: shadowOffsety
Description:
The vertical offset of the shadow.
Default: 2
Name: shadowBlur
Description:
The extent of the blurring effect that's applied to the shadow.
Default: 2
Name: shadowColor
Description:
The color of the shadow.
Default: rgba(0,0,0,0.25)
Title properties
Name: title
Description:
The title of the chart.
Default: (An empty string)
Name: titleX
Description:
The specific x-axis 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.
Default: null
Name: titleY
Description:
The specific y-axis 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.
Default: null
Name: titleOffsetx
Description:
An offset value that is added to the calculated x-axis coordinate.
Default: 0
Name: titleOffsety
Description:
An offset value that is added to the calculated y-axis coordinate.
Default: 0
Name: titleHalign
Description:
The horizontal alignment of the title.
Default: center
Name: titleColor
Description:
The color of the title.
Default: null
Name: titleFont
Description:
The font used to render the title.
Default: null
Name: titleSize
Description:
The size of the font used to render the title.
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: 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: (An empty string)
Name: titleSubtitleColor
Description:
The color of the subtitle.
Default: #aaa
Name: titleSubtitleFont
Description:
The font used to render the subtitle.
Default: null
Name: titleSubtitleSize
Description:
The size of 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
Key properties
Name: key
Description:
An array of the labels that appear on the key.
Default: null
Name: keyColors
Description:
An array of colors to be shown on the key. If not specified then the colors option will be used instead.
Default: null
Name: keyLabelsColor
Description:
The color of the text in the key.
Default: null
Name: keyLabelsBold
Description:
Whether the key text is bold or not.
Default: null
Name: keyLabelsFont
Description:
The font to use for the key text.
Default: null
Name: keyLabelsSize
Description:
The size to use for the key text.
Default: null
Name: ketLabelsItalic
Description:
Whether the key text is italic or not.
Default: null
Name: keyLabelsOffsetx
Description:
The horizontal pixel offset of the key text (just the text).
Default: 0
Name: keyLabelsOffsety
Description:
The vertical pixel offset of the key text (just the text).
Default: -1
Name: keyOffsetx
Description:
The horizontal pixel offset of the entire key.
Default: 0
Name: keyOffsety
Description:
The horizontal pixel offset of the entire key.
Default: 0
Name: keyColorShape
Description:
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.
Default: rect
Line properties
Name: line
Description:
Enabling this will draw a line across the tops of the bars on the chart. So by setting this to true and setting the color of the bars to transparent (ie colors: ['transparent']) you can get a Vertical Line chart. There are examples of this in the download archive called demos/svg-hbar-vertical-line.html and demos/svg-hbar-vertical-line-multiple.html The latter uses multiple Horizontal Bar chart objects to show multiple lines (one per object) drawn on the same canvas tag.
Default: false
Name: lineColor
Description:
With this property you can specify the color of the line. Note that it should be a string (because you can only have one line per Horizontal Bar object).
Default: black
Name: lineJoin
Description:
This property controls how the joins of lines are drawn - it can be miter, bevel or round. For a visualisation of these options you can refer to the lineJoin reference page.
Default: round
Name: lineCap
Description:
This property controls how the ends of lines are drawn - it can be butt, square or round. For a visualisation of these options you can refer to the lineCap reference page.
The magnitude of the blurring effect of the shadow. If you're having issues with animation frame rates with canvas-based animations on slower devices - try reducing, or turning off completely, the blur.
Default: 2
Name: lineShadowOffsetx
Description:
The horizontal offset in pixels of the shadow.
Default: 2
Name: lineShadowOffsety
Description:
The vertical offset in pixels of the shadow.
Default: 2
Name: lineSpline
Description:
Whether or not the line is drawn as a spline (curvy).
Default: false
Name: lineTickmarksStyle
Description:
This determines the style of the Line chart tooltips. It can be one of: circleendcirclefilledcirclefilledendcirclesquareendsquarefilledsquarefilledendsquare
Default: null
Name: lineTickmarksSize
Description:
This determines the size of the tickmarks
Default: 5
Name: lineTickmarksDrawNonNull
Description:
If you have a point, with null values on both sides, there wouldn't normally be a tickmark drawn either for the null values or the valid point in the middle. This is because you need two consecutive non-null values for a line to be drawn. With this setting though you can tell RGraph to draw the tickmark for the non-null point so that you can at least see it on the chart (despite there being no connecting line).
Default: false
Other properties
Name: verticalLines
Description:
With this property you can add vertical lines to your chart.
This feature was initially designed with adding an average line indicator
in mind but can be used to indicate any value with any label. The
value of this property should be an array of objects and
each object can consist of the following:
value: The value you want the line positioned at or the keyword average(default: average)
color: The color of the line (default: #666)
dashed: Whether the line is dashed or not (default: true)
dotted: Whether the line is dotted or not (default: false)
linewidth: The linewidth of the line (default: 1)
label: this is The label that appears above the line. If you don't want a label you can set this to an empty string. default: Average (%{value})
labelPosition: This can be a string that consists of either the words top or bottom. (default: top)
labelFont: The font that the label is drawn in (default: [the same as the textFont property])
labelColor: The color that the label is drawn in (default: #666)
labelSize: The size of the label (in points) (default: the same as the textSize setting)
labelBold: Whether the label is bold or not (default: null [falls back to the textBold setting])
labelItalic: Whether the label is italic or not (default: null [falls back to the textItalic setting])
labelValueDecimals: How many decimals are shown on the number. (default: 0)
labelValuePoint: The character used as the decimal point. (default: .)
labelValueThousand: The character used as the thousand separator charactor.(default: ,)
labelValueUnitsPre: This string is prepended to the number. (default: [an empty string])
labelValueUnitsPost: This string is appended to the number. (default: [an empty string])
labelOffsetx: The offset that's applied to the X coordinate. (default: 0)
labelOffsety: The offset that's applied to the Y coordinate. (default: 0)
labelValueFormatter: This function handles ALL of the formatting of the number. (default: null)
labelX: If you want to specify the exact X coordinate for the label you can do so with this property. (default: null)
labelY: If you want to specify the exact Y coordinate for the label you can do so with this property. (default: null)
labelHalign: The horizontal alignment of the text. (default: center)
labelValign: The vertical alignment of the text. (default: bottom - but depends on the labelPosition setting)
Whether to show a grouped or stacked Bar chart. It can be stacked or grouped.
Default: grouped
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: zoom
Description:
Allow zooming of the chart. The svg zoom feature, added in version 6.19, allows you to zoom in on a certain area of your chart and then pan around by dragging the zoom. You can also increase or decrease the zoom level by using your mousewheel if you have one. You can read a documentation page about the SVG zoom feature here.
Default: false
Methods
obj.get(name)
This can be used to get properties if necessary. It's normally used
after the chart is drawn if you need to get parameters (if you're
doing custom coding for example).
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.getXCoord(value)
This method can be used to get an appropriate x-axis coordinate for a value when you're
doing your own custom drawing on the chart. It returns null if the value is out of
range.
obj.getWidth(value)
This method can be used to get the appropriate width for a value that you give it. It doesn't
give you an x-axis coordinate - just the width for the given value.
obj.on(event, handler)
This function adds an event listener (such as beforedraw or
draw) to the chart object. For example:
obj.on('draw', function (obj)
{
// Put your code here
});
obj.exec(func)
This function can be used to execute a function (immediately). It's not event-based
(ie it doesn't run when something happens) - it just runs immediately - and only once.
You might use it when you need to get something from the chart when it's drawn and
then call the redraw function. Because this function only runs once the RGraph.SVG.redraw
function would not cause a loop - which would happen if you used the draw event.
obj.exec(function (obj)
{
// Put your code here
});
obj.responsive(configuration)
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 svgrect elements that represent the bars on the Horizontal Bar chart
have various data attributes added to them that hold various bits of information. These
are:
data-original-x
data-original-y
data-original-width
data-original-height
data-index
data-sequential-index
data-tooltip
data-value
These can be retrieved by using standard dom methods: