CSS classes

• Introduction
• The available classes
• An example usage
• ! important
• CSS classes added to accessible text
• The toolips CSS configuration property

Introduction

This is information about the CSS classes available to you to allow you to customise the appearance of various things.

The available classes

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_tooltipsFormattedKeyColor {
    }
    
    .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.