About
RGraph is a JavaScript charts library based on
HTML5 SVG and canvas. RGraph is mature (over 17 years
old) and has a wealth of features making it an ideal
choice to use for showing charts on your website.
Version 7.01 released
Version 7.01 (released in October 2025) is the
latest version of RGraph and now includes a new tree
structure object. The accompanying Treemenu object can then turn
the object into a fully dynamic tree menu.
You can read the API documentation for the tree on
the main API documentation page
and see an example of the Treemenu
feature by following this link...
New HTML datagrid
In the April 2025 (v6.21) release a new datagrid object
was added.
This makes it easy to add static or dynamic data
tables to your pages. It can be used whether you use the
canvas or SVG libraries or entirely standalone.
Download
Get the latest version of RGraph (version 7.01, 8th October 2025) 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.
License
RGraph can be used for free under the GPL or if
that doesn't suit your situation there's an
inexpensive (£129) commercial license available.Horseshoe meter API reference
Example
See all of the 1200+ demos in the download archive.
<script>
horseshoe = new RGraph.SVG.Horseshoe({
id: 'chart-container',
min: 0,
max: 100,
value: 63,
options: {
labelsCenterDecimals: 1,
labelsCenterUnitsPost: '%'
}
}).grow();
var d = 2500; setTimeout(f = function ()
{
horseshoe.value = horseshoe.value + RGraph.SVG.random({min: -7, max: 5});
horseshoe.grow();
setTimeout(f, d);
}, d);
</script>
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.
- Chart configuration properties
- Margin properties
- Color properties
- Labels and text properties
- Other properties
Chart configuration properties
Name: centerx
Description:
If required, you can position the Horseshoe meter using this instead of the margins. As well as a number, that gives the exact coordinate of the center position of the meter, this can also be a string like this: centerx: '+25' or this: centerx: '-40' which is then used to adjust the calculated coordinate.
Default: null
Name: centery
Description:
If required, you can position the Horseshoe meter using this instead of the margins. As well as a number, that gives the exact coordinate of the center position of the meter, this can also be a string like this: centery: '+25' or this: centery: '-40' which is then used to adjust the calculated coordinate.
Default: null
Name: radius
Description:
If required, you can size the Horseshoe meter using this instead of the margins. As well as a number, that gives the exact coordinate of the center position of the meter, this can also be a string like this: radius: '+25' or this: radius: '-40' which is then used to adjust the calculated coordinate.
Default: null
Margin properties
Color properties
Labels and text properties
Name: textLinkColor
Description:
The color of hyperlinked text on your chart. By default this is blue like standard links.
Default: blue
Name: textLinkItalic
Description:
Whether hyperlinked text on your chart is italic or not.
Default: null
Name: text
Description:
This allows you to add custom text to your chart if you want to. There's a dedicated page that describes this option here.
Default: null
Name: labelsCenterPoint
Description:
The character that's used as the decimal point for the center label.
Default: null
Name: labelsCenterThousand
Description:
The character that's used as the thousand separator for the center label.
Default: null
Name: labelsCenterDecimals
Description:
The number of decimals to apply to the center label.
Default: null
Name: labelsSpecificFormattedDecimals
Description:
When using formatted labels this is the number of decimals that are applied to the %{value_formatted} macro.
Default: 0
Name: labelsSpecificFormattedPoint
Description:
When using formatted labels this is the decimal point character that's used with the %{value_formatted} macro.
Default: .
Name: labelsSpecificFormattedThousand
Description:
When using formatted labels this is the thousand separator character that's used with the %{value_formatted} macro.
Default: ,
Name: labelsSpecificFormattedUnitsPre
Description:
When using formatted labels these are the units that are prepended to the number with the %{value_formatted} macro.
Default: (an empty string)
Name: labelsSpecificFormattedUnitsPost
Description:
When using formatted labels these are the units that are appended to the number with the %{value_formatted} macro.
Default: (an empty string)
Other properties
Name: ends
Description:
With this property you can disable the circles at the ends of the meter.
Default: true
Name: endsRadius
Description:
If specified this is the radius of the circles at each end of the meter.
Default: null
Name: endsColor
Description:
If specified this is the color of the circles at each end of the meter.
Default: null
Name: endsStroke
Description:
If specified this is the stroke color of the circles at each end of the meter (the stroke goes around the fill).
Default: null
Name: adjustable
Description:
If true then the meter will be adjustable. Click on the meter to alter its value.
Default: false
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
Name: events
Description:
This option is new to version 6.22 and allows you to specify event listener functions for the various RGraph events (eg beforedraw, firstdraw, draw etc). There's an example of its usage in the events section below. It's an object and the properties are the names of the events. The values of those properties can either be the function that you want to attach to the event or an array of functions that you want to run.
Default: {}
Methods
Name: mixed get(string name)
Description:
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).
Name: object set(string name, mixed value)
Description:
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. The return value is the chart object so you can chain your set calls if you wish
Name: object on(event name, function handler)
Description:
This function adds an event listener (such as beforedraw draw or tooltip) to the chart object. For example:
obj.on('draw', function (obj)
{
// Put your code here
});
You can also use the new (added in version 6.22) events property to add events and that looks like this:
<script>
new RGraph.SVG.Horseshoe({
id: 'chart-container',
min: 0,
max: 100,
value: 49,
options: {
events: {
beforedraw: function () {alert('The beforedraw event fired');},
draw: [
function (obj) {alert('The first draw event listener function.');},
function (obj) {alert('The second draw event listener function.');}
]
}
}
}).draw();
</script>
Name: object exec(function func)
Description:
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 RGraph.SVG.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
});
Name: object responsive(object configuration)
Description:
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.
The responsive function is documented on its own page here
in the canvas section of the website
(though the information applies equally to SVG charts).
Update: There is now the responsive configuration option available to you and this is now the preferred method of configuration.
Name: number getValue(object event or number angle)
Description:
When you click on the chart this method can be used to get the corresponding value. The value is based on the minimum and maximum values. Example usage is:
<script>
horseshoe = new RGraph.SVG.Horseshoe({
id: 'chart-container',
min: 0,
max: 100,
value: 63,
options: {
width: 60,
labelsCenterDecimals: 1
}
}).draw();
horseshoe.container.onclick = function (e)
{
var value = horseshoe.getValue(e);
// var value = horseshoe.getValue(angle); // You can also pass the function an angle
alert(value);
};
</script>
Name: number getAngle(object event or number value)
Description:
When you click on the chart this method can be used to get the corresponding angle. Angles are measured in radians and go from (approximately) -(Math.PI / 2) (middle top) to 1.5 * Math.PI. Example usage is:
<script>
horseshoe = new RGraph.SVG.Horseshoe({
id: 'chart-container',
min: 0,
max: 100,
value: 63,
options: {
width: 60,
labelsCenterDecimals: 1
}
}).draw();
horseshoe.container.onclick = function (e)
{
var angle = horseshoe.getAngle(e);
// var angle = horseshoe.getAngle(51); // You can also pass the function a value
alert(angle);
};
</script>
Name: number getRadius(event)
Description:
When you click on the chart this method can be used to get the corresponding radius of the click starting from the center of the chart. Example usage is:
<script>
horseshoe = new RGraph.SVG.Horseshoe({
id: 'chart-container',
min: 0,
max: 100,
value: 63,
options: {
width: 60,
labelsCenterDecimals: 1
}
}).draw();
horseshoe.container.onclick = function (e)
{
var radius = horseshoe.getRadius(e);
alert(radius);
};
</script>
Events
RGraph supports custom events that allow you to easily add interactivity to your charts if required. The following events are available:
For example:
new RGraph.SVG.Horseshoe({
id: 'chart-container',
min: 0,
max: 100,
value: 54,
options: {
events: {
draw: function (obj){console.log('The draw event has fired');},
// Alternatively you can give an array of functions to run
firstdraw: [
function (obj) {console.log('First function');},
function (obj) {console.log('Second function');}
]
}
}
}).draw();
Effects
These effects are available and can be used instead of the draw function.- The grow effect (demo available in the download archive)
<script>
//
// Optional callback function that's called when the effect is complete
//
function myCallback (obj)
{
// ...
}
horseshoe RGraph.SVG.Horseshoe({
id: 'chart-container',
min: 0,
max: 100,
value: 63,
options: {
width: 60,
labelsCenterDecimals: 1
}
}).grow({frames: 60, callback: myCallback});
</script>