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
- RGraph_palette
- RGraph_tooltip
- RGraph_contextmenu
- RGraph_contextmenu_item
- RGraph_contextmenu_background
- RGraph_tooltipsFormattedKeyColor
- ModalDialog_background
- ModalDialog_dialog
- ModalDialog_topbar
- An example usage
- ! important
- CSS classes added to accessible text
- The toolips CSS configuration property
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:
- rgraph_accessible_text Added to all of RGraphs accessible text
- rgraph_accessible_text_[canvas ID] Added to all accessible text with that
canvas
ID - rgraph_accessible_text_[tag] The tag is the internal RGraph label that is added to the text (eg title, labels, scale etc)
- rgraph_accessible_text_[chart type] The chart type is the same for all text on the same chart type (eg bar, line, pie)
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.