About
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.

More »

 

Download
Get the latest version of RGraph (version 6.18, 1st June 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.

More »

 

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.

More »

Segmented donut chart API reference

Example

<script>
    seg = new RGraph.SVG.Segmented({
        id: 'chart-container',
        min: 0,
        max: 100,
        value: 63,
        options: {
            width: 60,
            labelsCenterDecimals: 1
        }
    }).roundRobin();
    
    var d = 2500; setTimeout(f = function ()
    {
        seg.value = seg.value + RGraph.SVG.random({min: -7, max: 5});
        seg.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

Name: centerx
Description: 
If required, you can position the Segmented donut chart using this instead of the margins. As well as a number, that gives the exact coordinate of the center position of the chart, 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 Segmented donut chart using this instead of the margins. As well as a number, that gives the exact coordinate of the center position of the chart, 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 Segmented donut chart using this instead of the margins. As well as a number, that gives the exact radius of the chart, 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
Name: width
Description: 
The width of the progress bar (ie the outer radius minus the inner radius).
Default: null

Margin properties

Name: marginLeft
Description: 
The left margin of the chart.
Default: 15
Name: marginRight
Description: 
The right margin of the chart.
Default: 15
Name: marginTop
Description: 
The top margin of the chart.
Default: 15
Name: marginBottom
Description: 
The bottom margin of the chart.
Default: 15

Color properties

Name: colors
Description: 
The colors to be used for the donut. The first color is that of the indicator segments and the second color is used as the background.
Default: ['red','white']
Name: backgroundColor
Description: 
The color of the background.
Default: black

Labels and text properties

Name: textFont
Description: 
The font used to render the text.
Default: Arial, Verdana, sans-serif
Name: textSize
Description: 
The size of the text.
Default: 60
Name: textColor
Description: 
The color of the labels.
Default: black
Name: textItalic
Description: 
Whether the labels are italic or not.
Default: false
Name: textBold
Description: 
Whether the labels are bold or not.
Default: false
Name: textLinkColor
Description: 
The color of hyperlinked text on your chart. By default this is blue like standard links.
Default: blue
Name: textLinkFont
Description: 
The font used by hyperlinked text on your chart.
Default: null
Name: textLinkSize
Description: 
The size of hyperlinked text on your chart.
Default: null
Name: textLinkBold
Description: 
Whether hyperlinked text on your chart is bold or not.
Default: null
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: labelsCenter
Description: 
Whether to show the center label.
Default: true
Name: labelsCenterFont
Description: 
The font used to render the center label.
Default: null
Name: labelsCenterSize
Description: 
The size of the center label.
Default: null
Name: labelsCenterColor
Description: 
The color of the center label.
Default: null
Name: labelsCenterItalic
Description: 
Whether the center label is italic or not.
Default: null
Name: labelsCenterBold
Description: 
Whether the center label is bold or not.
Default: null
Name: labelsCenterUnitsPre
Description: 
Units that are prepended to the center label.
Default: null
Name: labelsCenterUnitsPost
Description: 
Units that are appended to the center label.
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: labelsCenterSpecific
Description: 
The specific text to use as the center label.
Default: null
Name: labelsCenterOffsetx
Description: 
An offset to add to the horizontal position of the center label.
Default:  0
Name: labelsCenterOffsety
Description: 
An offset to add to the vertical position of the center label.
Default:  0
Name: labelsCenterFormattedDecimals
Description: 
When using formatted labels this is the number of decimals that are applied to the %{value_formatted} macro.
Default:  0
Name: labelsCenterFormattedPoint
Description: 
When using formatted labels this is the decimal point character that's used with the %{value_formatted} macro.
Default: .
Name: labelsCenterFormattedThousand
Description: 
When using formatted labels this is the thousand separator character that's used with the %{value_formatted} macro.
Default: ,
Name: labelsCenterFormattedUnitsPre
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: labelsCenterFormattedUnitsPost
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: 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

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.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 responsive function and configuration option are documented on their own page here.

obj.getAngle(event or value)

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>
    seg = new RGraph.SVG.Segmented({
        id: 'chart-container',
        min: 0,
        max: 100,
        value: 63,
        options: {
            width: 60,
            labelsCenterDecimals: 1
        }
    }).draw();
    
    seg.container.onclick = function (e)
    {
        var angle = seg.getAngle(e);
        // var angle = seg.getAngle(51); // You can also pass the function a value too
        
        alert(angle);
    };
</script>
obj.getValue(event or angle)

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>
    seg = new RGraph.SVG.Segmented({
        id: 'chart-container',
        min: 0,
        max: 100,
        value: 63,
        options: {
            width: 60,
            labelsCenterDecimals: 1
        }
    }).draw();
    
    seg.container.onclick = function (e)
    {
        var value = seg.getValue(e);
        // var value = seg.getValue(angle); // You can also pass the function an angle too
        
        alert(value);
    };
</script>
obj.getRadius(event)

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>
    seg = new RGraph.SVG.Segmented({
        id: 'chart-container',
        min: 0,
        max: 100,
        value: 63,
        options: {
            width: 60,
            labelsCenterDecimals: 1
        }
    }).draw();
    
    seg.container.onclick = function (e)
    {
        var radius = seg.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.Segmented({
    id: 'chart-container',
    min: 0,
    max: 100,
    value: 35,
    options: {
        adjustable: true
    }
}).draw().on('adjustbegin', function (obj)
{
    console.log('Adjusting has started');

}).on('adjust', function (obj)
{
    console.log('Adjusting is in progress...');

}).on('adjustend', function (obj)
{
    alert('Adjusting has finished. New value is: ' + obj.value);
});

Effects

These effects are available and can be used instead of the draw function.
<script>
    //
    // Optional callback function that's called when the effect is complete
    //
    function myCallback (obj)
    {
        // ...
    }


    new RGraph.SVG.Segmented({
        id: 'chart-container',
        min: 0,
        max: 100,
        value: 63,
        options: {
            width: 60,
            labelsCenterDecimals: 1
        }
    }).grow({frames: 60, callback: myCallback});
</script>