.net Powerful JavaScript charts
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 »


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 hosted libraries.

More »


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 »

CSS classes

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


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


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


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


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


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.


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


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


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


This class controls the ModalDialog itself.


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:

    .RGraph_png {

    .RGraph_palette {

    .RGraph_tooltip {
    .RGraph_contextmenu {
    .RGraph_contextmenu_background {
    .RGraph_contextmenu_item {
    .ModalDialog_background {
    .ModalDialog_dialog {
    .ModalDialog_topbar {

! 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:

    .RGraph_tooltip {
        background-color: white !important;

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'

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 variable because those css styles are applied to the tooltips of every chart on the page.