The drawing API X axis object

The drawing API X axis object which be added to your charts to give them extra X axes. You can add any number of extra X axes to your chart as you need them.

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>
   var bar = new RGraph.Bar({
        id: 'cvs',
        data: [4,8,6,5,6,9,9,4],
        options: {
            axes: false,
            textSize: 14,
            marginBottom: 45,
            colors: ['gradient(white:red)'],
            shadow: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false
        }
    }).draw();
    
    var xaxis = new RGraph.Drawing.XAxis({
        id: 'cvs',
        y: bar.canvas.height - bar.marginBottom,
        options: {
            tooltips: ['The X axis represents each<br />person teaching at the college.'],
            xaxisLabels: ['Rich','Alex','Johnny','Kev','Pete','Luis','John','Barry'],
            colors: ['#666'],
            xaxisTitle: 'The X axis',
            textSize: 14
        }
    }).draw();
</script>

Color properties

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

Title properties

Property	Description	Default
title	The title for the axis.	An empty string
titleColor	The color of the title. If not specified then it's the same as the colors option.	null

Margin properties

Property	Description	Default
marginLeft	The left margin of the axis. This can be the same or different to the chart.	25
marginRight	The right margin of the axis. This can be the same or different to the chart.	25
hmargin	The (inner) horizontal margin of the axis. Useful for matching up labels/points of the Line chart.	0

X axis properties

Property	Description	Default
xaxis	This option can be specified if you don't want an axis drawn (the labels are still drawn).	true
xaxisLabels	Instead of a scale you can use this to specify labels for the X axis.	null
xaxisLabelsPosition	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.	section
xaxisLabelsCount	When showing a scale this determines how many labels are shown.	5
xaxisTickmarksCount	The number of tickmarks shown on the axis. You may need to +/- 1 to get alignment with grids.	null
xaxisTickmarksAlign	The alignment of the tickmarks and labels. This can be top or bottom.	bottom
xaxisTickmarksEndLeft	This option can be used to prevent the left end tickmark from being drawn.	false
xaxisTickmarksEndRight	This option can be used to prevent the right end tickmark from being drawn.	false
xaxisPosition	Uusually bottom, though you can set this to center and the tickmarks will start above the axis and end below the axis.	bottom
xaxisScaleVisible	This determines whether the scale is displayed.	true
xaxisScaleFormatter	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)	null
xaxisScaleDecimals	The number of decimals shown.	0
xaxisScaleInvert	Whether the scale is inverted (ie minimum value at the top)	false
xaxisScaleZerostart	This determines whether zero is shown.	true
xaxisScaleUnitsPre	The units for the scale. This is prepended to the number.	An empty string
xaxisScaleUnitsPost	The units for the scale. This is appended to the number.	An empty string
xaxisScaleMax	The maximum value of the scale.	null
xaxisScaleMin	The minimum value of the scale.	0

Y axis properties

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

Other label properties

Property	Description	Default
textColor	The color of the text. If not specified then it's the same as the colors option.	null
textFont	The font used when rendering the text.	Arial
textSize	The size used when rendering text	10

Interactive features properties

Property	Description	Default
tooltips	This can be array of tooltips (only the first element is used) that are shown when the axis is clicked on.	null
tooltipsEvent	This is the event that triggers the tooltips. It can be either onclick or onmousemove.	onclick
tooltipsEffect	The effect used for showing tooltips. Can be either fade or none.	fade
tooltipsCssClass	This is the name of the CSS class the chart uses.	RGraph_tooltip
tooltipsOverride	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	null
tooltipsNohideonclear	Not an option that you'll need particularly often if at all. Setting this to true means that when you call the RGraph.clear() API function tooltip DO NOT get hidden.	false

Event properties

Property	Description	Default
eventsClick	If you want to add your own onclick function you can do so by assigning it to this property. See here for details.	null
eventsMousemove	If you want to add your own onmousemove function you can do so by assigning it to this property. See here for details.	null

Miscellaneous properties

Property	Description	Default
highlightStyle	By default this is null but you can set it to a function if you wish so that function is called to do the chart highlighting. Its passed the shape object as an argument.	null
linewidth	The linewidth used to draw the axis.	1