The drawing API X axis object

Summary: 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.

[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>
   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
person teaching at the college.'], xaxisLabels: ['Rich','Alex','Johnny','Kev','Pete','Luis','John','Barry'], colors: ['#666'] } }).draw(); </script>

Properties

Color properties

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

Margin properties

PropertyDescriptionDefault
marginLeftThe left margin of the axis. This can be the same or different to the chart.25
marginRightThe right margin of the axis. This can be the same or different to the chart.25
marginInnerThe (inner) horizontal margin of the axis. Useful for matching up labels/points of the Line chart.0
marginLeft
The left margin of the axis. This can be the same or different to the chart.
Default: 25

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

marginInner
The (inner) horizontal margin of the axis. Useful for matching up labels/points of the Line chart.
Default: 0

X axis properties

PropertyDescriptionDefault
xaxisThis option can be specified if you don't want an axis drawn (the labels are still drawn).true
xaxisPositionWhether the X axis has tickmarks on both sides or just underneath. This can be center or bottom.bottom
xaxisLabelsInstead of a scale you can use this to specify labels for the X axis.null
xaxisLabelsPositionThis can be edge or section and determines how the labels are aligned. For an illustration compare the labels of the Bar chart vs the labels of the Line chart.section
xaxisLabelsCountWhen showing a scale this determines how many labels are shown.5
xaxisLabelsFontThe font used to render the text.null
xaxisLabelsSizeThe size of the labels.null
xaxisLabelsColorThe color of the labels.null
xaxisLabelsBoldWhether the labels are bold or not.null
xaxisLabelsItalicWhether the labels are italic or not.null
xaxisLabelsOffsetxThe X offset of the labels (in pixels).0
xaxisLabelsOffsetyThe Y offset of the labels (in pixels).0
xaxisLabelsAngleThe angle of the X axis labels. You could, for example, set this to 45.0
xaxisTickmarksCountThe number of tickmarks shown on the axis. You may need to +/- 1 to get alignment with grids.null
xaxisTickmarksAlignThe alignment of the tickmarks and labels. This can be top or bottom.bottom
xaxisTickmarksLastLeftThis option can be used to prevent the left end tickmark from being drawn.true
xaxisTickmarksLastRightThis option can be used to prevent the right end tickmark from being drawn.true
xaxisScaleVisibleThis determines whether the scale is displayed.true
xaxisScaleFormatterThis should be a function that returns the correctly formatted number. For example:
function myFormatter (obj, number)
{
    // Return the formatted number
    return number;
}

xaxis.set('xaxisScaleFormatter', myFormatter)
null
xaxisScaleDecimalsThe number of decimals shown.0
xaxisScaleInvertWhether the scale is inverted (ie minimum value at the top).false
xaxisScaleZerostartThis determines whether zero is shown.true
xaxisScaleUnitsPreThe units for the scale. This is prepended to the number.An empty string
xaxisScaleUnitsPostThe units for the scale. This is appended to the number.An empty string
xaxisScalePointThe character used as a decimal point..
xaxisScaleThousandThe character used as the thousand separator.,
xaxisScaleMaxThe maximum value of the scale.null
xaxisScaleMinThe minimum value of the scale.0
xaxisTitleThe title displayed on the X axis.
xaxisTitleFontThe font used to render the X axis title.none
xaxisTitleSizeThe size of the title.null
xaxisTitleColorThe color of the title.null
xaxisTitleBoldWhether the title is bold or not.null
xaxisTitleItalicWhether the title is italic or not.null
xaxis
This option can be specified if you don't want an axis drawn (the labels are still drawn).
Default: true

xaxisPosition
Whether the X axis has tickmarks on both sides or just underneath. This can be center or bottom.
Default: bottom

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

xaxisLabelsPosition
This can be edge or section and determines how the labels are aligned. For an illustration compare the labels of the Bar chart vs the labels of the Line chart.
Default: section

xaxisLabelsCount
When showing a scale this determines how many labels are shown.
Default: 5

xaxisLabelsFont
The font used to render the text.
Default: null

xaxisLabelsSize
The size of the labels.
Default: null

xaxisLabelsColor
The color of the labels.
Default: null

xaxisLabelsBold
Whether the labels are bold or not.
Default: null

xaxisLabelsItalic
Whether the labels are italic or not.
Default: null

xaxisLabelsOffsetx
The X offset of the labels (in pixels).
Default: 0

xaxisLabelsOffsety
The Y offset of the labels (in pixels).
Default: 0

xaxisLabelsAngle
The angle of the X axis labels. You could, for example, set this to 45.
Default: 0

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

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

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

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

xaxisScaleVisible
This determines whether the scale is displayed.
Default: 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('xaxisScaleFormatter', myFormatter)

Default: null

xaxisScaleDecimals
The number of decimals shown.
Default: 0

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

xaxisScaleZerostart
This determines whether zero is shown.
Default: true

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

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

xaxisScalePoint
The character used as a decimal point.
Default: .

xaxisScaleThousand
The character used as the thousand separator.
Default: ,

xaxisScaleMax
The maximum value of the scale.
Default: null

xaxisScaleMin
The minimum value of the scale.
Default: 0

xaxisTitle
The title displayed on the X axis.
Default:

xaxisTitleFont
The font used to render the X axis title.
Default: none

xaxisTitleSize
The size of the title.
Default: null

xaxisTitleColor
The color of the title.
Default: null

xaxisTitleBold
Whether the title is bold or not.
Default: null

xaxisTitleItalic
Whether the title is italic or not.
Default: null

Y axis properties

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

Other label properties

PropertyDescriptionDefault
textColorThe color of the text. If not specified then it's the same as the colors option.null
textFontThe font used when rendering the text.Arial
textSizeThe size used when rendering text.10
textBoldWhether the text is bold or not.10
textItalicWhether the text is italic or not.10
textColor
The color of the text. If not specified then it's the same as the colors option.
Default: null

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

textSize
The size used when rendering text.
Default: 10

textBold
Whether the text is bold or not.
Default: 10

textItalic
Whether the text is italic or not.
Default: 10

Interactive features properties

PropertyDescriptionDefault
tooltipsThis can be an array of tooltips (only the first element is used) that are shown when the axis is clicked on.null
tooltipsEventThis is the event that triggers the tooltips. It can be either click or mousemove.onclick
tooltipsEffectThe effect used for showing tooltips. Can be either fade or none.fade
tooltipsCssClassThis is the name of the CSS class the chart uses.RGraph_tooltip
tooltipsOverrideIf 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
tooltipsNohideonclearNot 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
tooltips
This can be an array of tooltips (only the first element is used) that are shown when the axis is clicked on.
Default: null

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

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

tooltipsCssClass
This is the name of the CSS class the chart uses.
Default: 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.
Default: 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.
Default: false

Event properties

PropertyDescriptionDefault
eventsClickIf you want to add your own click function you can do so by assigning it to this property. See here for details.null
eventsMousemoveIf you want to add your own mousemove function you can do so by assigning it to this property. See here for details.null
eventsMouseoverIf you want to add your own mouseover function you can do so by assigning it to this property. See here for details.null
eventsMouseoutIf you want to add your own mouseout function you can do so by assigning it to this property. See here for details.null
eventsClick
If you want to add your own click function you can do so by assigning it to this property. See here for details.
Default: null

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

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

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

Miscellaneous properties

PropertyDescriptionDefault
highlightStyleBy 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. It's passed the shape object as an argument.null
linewidthThe linewidth used to draw the axis.1
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. It's passed the shape object as an argument.
Default: null

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