Show the navigation menu
RGraph: HTML5 charts library

The drawing API X axis object

[No canvas support]

The X axis object allows you to have extra X axes in your chart. Formerly this was an independent function but it's now been converted to a drawing API object. This means that it's easier to use and has added interactivity options - such as mousemove and click events and tooltips.

Usage example

<script>
    $(document).ready(function ()
    {
       var bar = new RGraph.Bar({
            id: 'cvs',
            data: [4,8,6,5,6,9,9,4],
            options: {
                noaxes: true,
                gutter: {
                    bottom: 45
                },
                background: {
                    grid: {
                        autofit: {
                            numvlines: 8
                        }
                    }
                }
            }
        }).draw()
        
        var xaxis = new RGraph.Drawing.XAxis({
            id: 'cvs',
            y: bar.canvas.height - bar.gutterBottom,
            options: {
                tooltips: ['The X axis represents each
person teaching at the college.'], labels: ['Rich','Alex','Johnny','Kev','Pete','Luis','John','Barry'], colors: ['#666'], title: 'The X axis' } }).draw() }) </script>

Properties

 

Colors

colors
An array of colors. Event though it's an array only the first color is used.
Default: ['black']

 

Titles

title
The title for the axis.
Default: An empty string

title.color
The color of the title. If not specified then it's the same as the colors option.
Default: null

 

Margins

gutter.left
The left gutter of the axis. This can be the same or different to the chart.
Default: 25

gutter.right
The rightgutter of the axis. This can be the same or different to the chart.
Default: 25

hmargin
The horizontal margin of the axis. Useful for matching up labels/points of the Line chart.
Default: 0

 

Labels and text

labels
Instead of a scale you can use this to specify labels for the X axis.
Default: null

labels.position
This cand be edge or section and detemines how the labels are aligned. For an illustration compare the labels of the Bar chart vs the labels of the Line chart.
Default: section

numlabels
When showing a scale this determines how many labels are shown by default.
Default: 5

text.color
The color of the text. If not specified then it's the same as the colors option.
Default: null

text.font
The font used when rendering the text.
Default: Arial

text.size
The size used when rendering text
Default: 10

 

Axis properties

numticks
The number of tickmarks shown on the axis. You may need to +/- 1 to get alignment with grids.
Default: null

align
The alignment of the tickmarks and labels. This can be top or bottom.
Default: bottom

yaxispos
This can facilitate when you have a Y axis in the center (eg the Horizontal Bar chart).
Default: left

noendtick.left
This option can be used to prevent the left end tickmark from being drawn.
Default: false

noendtick.right
This option can be used to prevent the right end tickmark from being drawn.
Default: false

noxaxis
This option can be specified if you don't want an axis drawn (the labels are still drawn).
Default: false

linewidth
The linewidth used to draw the axis.
Default: 1

xaxispos
Uusually bottom, though you can set this to center and the tickmarks will start above the axis and end below the axis.
Default: bottom

 

Scale

scale.formatter
This should be a function that returns the correctly formatted number. For example:
function myFormatter (obj, number)
{
    // Return the formatted number
    return number;
}

xaxis.set('scale.formatter', myFormatter)

Default: null

scale.decimals
The number of decimals shown.
Default: 0

scale.invert
Whether the scale is inverted (ie minimum value at the top)
Default: false

scale.zerostart
This determines whether zero is shown.
Default: true

scale.visible
This determines whether the scale is displayed.
Default: true

units.pre
The units for the scale. This is prepended to the number.
Default: An empty string

units.post
The units for the scale. This is appended to the number.
Default: An empty string

max
The maximum value of the scale.
Default: null

min
The minimum value of the scale.
Default: 0

 

Interactive features

tooltips
This can be array of tooltips (only the first element is used) that are shown when the axis is clicked on.
Default: null

tooltips.event
This is the event that triggers the tooltips. It can be either onclick or onmousemove.
Default: onclick

tooltips.effect
The effect used for showing tooltips. Can be either fade or none.
Default: fade

tooltips.css.class
This is the name of the CSS class the chart uses.
Default: RGraph_tooltip

tooltips.override
If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the tooltips documentation page
Default: null

 

Events

events.click
If you want to add your own onclick function you can do so by assigning it to this property. See here for details.
Default: null

events.mousemove
If you want to add your own onmousemove function you can do so by assigning it to this property. See here for details.
Default: null