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 show charts on your website.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

 

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

More »

CSS classes

This is information about the css classes available to you to allow you to customise the appearance of tooltips and context menus.

RGraph_png

This controls the appearance of the png image which is shown when you use the contextmenu option RGraph.showPNG.

RGraph_palette

This controls the appearance of the mini-palette that can be used with annotating.

RGraph_tooltip

This controls the appearance of tooltips. The default is to have black and white.

RGraph_contextmenu

This controls how context menus appear. The default is similar to the look that Windows XP had.

RGraph_contextmenu_item

This controls how individual items on the context menu will appear, for example, the default has roughly 25px padding-left to accommodate the left bar.

RGraph_contextmenu_background

This is the Windows XP style left vertical bar. By default. this is light grey.

RGraph_tooltipsFormattedKeyColor

This can be used to configure the color blob in the tooltips key.

ModalDialog_background

This class controls the dark semi-opaque background for the ModalDialog.

ModalDialog_dialog

This class controls the ModalDialog itself.

ModalDialog_topbar

This class controls the top bar for the ModalDialog. You could, for example, use the display css property to hide this if you don't want it.

Example usage

Here is an example of using the css classes. At the time of writing, some of the items here were only implemented in newer web browsers:

<style>
    .RGraph_png {
    }

    .RGraph_palette {
    }

    .RGraph_tooltip {
    }
    
    .RGraph_contextmenu {
    }
    
    .RGraph_contextmenu_background {
    }
    
    .RGraph_contextmenu_item {
    }
    
    .ModalDialog_background {
    }
    
    .ModalDialog_dialog {
    }
    
    .ModalDialog_topbar {
    }
</style>

! important

If you're attempting to override default styles, then because of the ordering (ie the script is setting the style AFTER your own css) you may need to use the !important modifier, for example:

<style>
    .RGraph_tooltip {
        background-color: white !important;
    }
</style>

CSS classes added to accessible text

As of September 2019, the accessible text that RGraph uses has had various css classes added to the span tags that the text sits in. This makes it far easier for you to manipulate and select the text that RGraph adds to the chart with your own css.

These classes are:

The tooltips CSS configuration property

Since version 5.22 a new property has been added to both the canvas and svg charts in RGraph: tooltipsCSS This property can be used like this:

new RGraph.Bar({
    id: 'cvs',
    data: [3,5,4,7,5,4,8],
    options: {
        tooltips: 'Results: %{value_formatted}',
        tooltipsCSS: {
            backgroundColor: 'black',
            color: 'white',
            fontWeight: 'bold',
            fontSize: '16pt'
        }
    }
}).draw();

Notice that the javascript versions of the property names are used - so replace hyphens with capitals and the float property is called cssFloat.

The css that is applied using this method applies only to this chart - no matter how many charts are on the page. This is different from using the RGraph.tooltips.style variable because those css styles are applied to the tooltips of every chart on the page.