The drawing API X axis object

Summary: The drawing API X axis object which can 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>
   new RGraph.Bar({
        id: 'cvs',
        data: [4,8,6,5,6,9,9,4],
        options: {
            xaxis: false,
            yaxis: false,
            textSize: 14,
            marginBottom: 45,
            colors: ['gradient(white:red)'],
            shadow: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false
        }
    }).draw();
    
    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'],
            xaxisTickmarksCount: 8,
            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.35
marginRightThe right margin of the axis. This can be the same or different to the chart.35
marginTopThe top margin of the axis.35
marginBottomThe bottom margin of the axis.35
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: 35

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

marginTop
The top margin of the axis.
Default: 35

marginBottom
The bottom margin of the axis.
Default: 35

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

X axis properties

PropertyDescriptionDefault
xaxisSet this to true if you don't want an X axis.true
xaxisPositionThis determines where the X axis is positioned. If you wish to show negative values then you should set this to center or you can now (Jul 2016) use an offset X axis by leaving this property at the default bottom and using the yaxisScaleMax and yaxisScaleMin properties.bottom
xaxisLinewidthThe linewidth used for the X axis and the X axis tickmarks.1
xaxisColorThe color of the X axis (and its tickmarks.black
xaxisTickmarksWhether the X axis tickmarks are shown.true
xaxisTickmarksLastLeftWhether the last tickmark on the left is displayed.null
xaxisTickmarksLastRightWhether the last tickmark on the right is displayed.null
xaxisTickmarksLengthThe length of the tickmarks.3
xaxisTickmarksCountThe number of tickmarks that are shown on the X axis.null
xaxisLabelsAn array of the labels to be used on the chart.An empty array
xaxisLabelsFontThe font used to render the labels.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
xaxisLabelsOffsetxThis allows you finer grained control in the horizontal direction over the X label positioning if you need it.0
xaxisLabelsOffsetyThis allows you finer grained control in the vertical direction over the X label positioning if you need it.0
xaxisLabelsHalignThe horizontal alignment of the labels.center
xaxisLabelsValignThe vertical alignment of the labels.top
xaxisLabelsAngleThe angle of the X axis labels. For example you could set this to 45 to get angled labels.0 (Horizontal)
xaxisLabelsPositionThis property controls how the labels are arranged - section for most chart types and edge for Line charts. You probably won't need to change this.section
xaxisTitleThis allows you to specify a title for the X axis.none
xaxisTitleSizeThis allows you to specify a size for the X axis title.null
xaxisTitleFontThis allows you to specify a font for the X axis title.null
xaxisTitleBoldThis controls whether the X axis title is bold or not.null
xaxisTitleItalicThis controls whether the X axis title is italic or not.null
xaxisTitleColorThis controls the color of the X axis title.null
xaxisTitleXBy giving this you can specifically set the X position of the X axis title.null
xaxisTitleYBy giving this you can specifically set the Y position of the X axis title.null
xaxisTitleOffsetxThe X pixel offset that's applied to the title.0
xaxisTitleOffsetyThe Y pixel offset that's applied to the title.0
xaxisTitleHalignThe horizontal alignment of the title.center
xaxisTitleValignThe vertical alignment of the title.top
xaxisTitlePosThis is a multiplier (ie a digit usually between 0 and 1) that gets multiplied with the margin to get the Y position of the title.null
xaxisScaleIf true then an X scale is drawn instead of X labels.false
xaxisScaleUnitsPreThese are units that are prepended to the number.none
xaxisScaleUnitsPostThese are units that are appended to the number.none
xaxisScaleDecimalsThe number of decimals used for the X scale. If not specified the scaleDecimals property is used.null
xaxisScalePointThe character used as a decimal point..
xaxisScaleThousandThe character used as the thousand separator.,
xaxisScaleFormatterThis can be a function, which is passed the object and the number and should return a formatted number (formatted as you wish).
function myFormatter(obj, num)
{
    return num + 'F'; // An example of formatting
}
null
xaxisScaleLabelsCountThis is a number representing how many X labels there should be when you're using the X scale.10
xaxisScaleMinThe minimum X axis value you wish to set.0
xaxisScaleMaxThe maximum X axis value you wish to set. For example if you're displaying products sold in a year, you might use 365.none - must be supplied if you want to show a scale
xaxis
Set this to true if you don't want an X axis.
Default: true

xaxisPosition
This determines where the X axis is positioned. If you wish to show negative values then you should set this to center or you can now (Jul 2016) use an offset X axis by leaving this property at the default bottom and using the yaxisScaleMax and yaxisScaleMin properties.
Default: bottom

xaxisLinewidth
The linewidth used for the X axis and the X axis tickmarks.
Default: 1

xaxisColor
The color of the X axis (and its tickmarks.
Default: black

xaxisTickmarks
Whether the X axis tickmarks are shown.
Default: true

xaxisTickmarksLastLeft
Whether the last tickmark on the left is displayed.
Default: null

xaxisTickmarksLastRight
Whether the last tickmark on the right is displayed.
Default: null

xaxisTickmarksLength
The length of the tickmarks.
Default: 3

xaxisTickmarksCount
The number of tickmarks that are shown on the X axis.
Default: null

xaxisLabels
An array of the labels to be used on the chart.
Default: An empty array

xaxisLabelsFont
The font used to render the labels.
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
This allows you finer grained control in the horizontal direction over the X label positioning if you need it.
Default: 0

xaxisLabelsOffsety
This allows you finer grained control in the vertical direction over the X label positioning if you need it.
Default: 0

xaxisLabelsHalign
The horizontal alignment of the labels.
Default: center

xaxisLabelsValign
The vertical alignment of the labels.
Default: top

xaxisLabelsAngle
The angle of the X axis labels. For example you could set this to 45 to get angled labels.
Default: 0 (Horizontal)

xaxisLabelsPosition
This property controls how the labels are arranged - section for most chart types and edge for Line charts. You probably won't need to change this.
Default: section

xaxisTitle
This allows you to specify a title for the X axis.
Default: none

xaxisTitleSize
This allows you to specify a size for the X axis title.
Default: null

xaxisTitleFont
This allows you to specify a font for the X axis title.
Default: null

xaxisTitleBold
This controls whether the X axis title is bold or not.
Default: null

xaxisTitleItalic
This controls whether the X axis title is italic or not.
Default: null

xaxisTitleColor
This controls the color of the X axis title.
Default: null

xaxisTitleX
By giving this you can specifically set the X position of the X axis title.
Default: null

xaxisTitleY
By giving this you can specifically set the Y position of the X axis title.
Default: null

xaxisTitleOffsetx
The X pixel offset that's applied to the title.
Default: 0

xaxisTitleOffsety
The Y pixel offset that's applied to the title.
Default: 0

xaxisTitleHalign
The horizontal alignment of the title.
Default: center

xaxisTitleValign
The vertical alignment of the title.
Default: top

xaxisTitlePos
This is a multiplier (ie a digit usually between 0 and 1) that gets multiplied with the margin to get the Y position of the title.
Default: null

xaxisScale
If true then an X scale is drawn instead of X labels.
Default: false

xaxisScaleUnitsPre
These are units that are prepended to the number.
Default: none

xaxisScaleUnitsPost
These are units that are appended to the number.
Default: none

xaxisScaleDecimals
The number of decimals used for the X scale. If not specified the scaleDecimals property is used.
Default: null

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

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

xaxisScaleFormatter
This can be a function, which is passed the object and the number and should return a formatted number (formatted as you wish).
function myFormatter(obj, num)
{
    return num + 'F'; // An example of formatting
}

Default: null

xaxisScaleLabelsCount
This is a number representing how many X labels there should be when you're using the X scale.
Default: 10

xaxisScaleMin
The minimum X axis value you wish to set.
Default: 0

xaxisScaleMax
The maximum X axis value you wish to set. For example if you're displaying products sold in a year, you might use 365.
Default: none - must be supplied if you want to show a scale

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
tooltipsFormattedPointWhen using formatted tooltip strings this is used as the point when using the %{value_formatted} option..
tooltipsFormattedThousandWhen using formatted tooltip strings this is used as the thousand separator when using the %{value_formatted} option.,
tooltipsFormattedDecimalsWhen using formatted tooltip strings this specifies the number of decimals when using the %{value_formatted} option.0
tooltipsFormattedUnitsPreWhen using formatted tooltip strings these units are prepended to the number when using the %{value_formatted} option.(an empty string)
tooltipsFormattedUnitsPostWhen using formatted tooltip strings these units are appended to the number when using the %{value_formatted} option.(an empty string)
tooltipsCssIf you want to specify some CSS that gets applied to all of the tooltips, but don't want to use the RGraph.tooltips.style object (which gets applied to all of the tooltips on the page for every chart) you can use this property to give some per-object CSS for the tooltips. These are CSS styles that get applied to all of the tooltips for the specific object only. It should look like this:
tooltipsCss: {
    fontFamily: 'Verdana',
    fontSize: '20pt',
    backgroundColor: 'black',
    color: 'white'
}
null
tooltipsOffsetxThis property allows you to shift the tooltips left or right.0
tooltipsOffsetyThis property allows you to shift the tooltips up or down.0
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

tooltipsFormattedPoint
When using formatted tooltip strings this is used as the point when using the %{value_formatted} option.
Default: .

tooltipsFormattedThousand
When using formatted tooltip strings this is used as the thousand separator when using the %{value_formatted} option.
Default: ,

tooltipsFormattedDecimals
When using formatted tooltip strings this specifies the number of decimals when using the %{value_formatted} option.
Default: 0

tooltipsFormattedUnitsPre
When using formatted tooltip strings these units are prepended to the number when using the %{value_formatted} option.
Default: (an empty string)

tooltipsFormattedUnitsPost
When using formatted tooltip strings these units are appended to the number when using the %{value_formatted} option.
Default: (an empty string)

tooltipsCss
If you want to specify some CSS that gets applied to all of the tooltips, but don't want to use the RGraph.tooltips.style object (which gets applied to all of the tooltips on the page for every chart) you can use this property to give some per-object CSS for the tooltips. These are CSS styles that get applied to all of the tooltips for the specific object only. It should look like this:
tooltipsCss: {
    fontFamily: 'Verdana',
    fontSize: '20pt',
    backgroundColor: 'black',
    color: 'white'
}

Default: null

tooltipsOffsetx
This property allows you to shift the tooltips left or right.
Default: 0

tooltipsOffsety
This property allows you to shift the tooltips up or down.
Default: 0

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

Methods

obj.get(name)
An accessor that you can use to retrieve the values of properties.

obj.set(name, value)
An accessor that you can use to set the values of properties.

obj.getShape(event)
This method makes it easy to get hold of the X axis when it has been clicked on or hovered over. It returns an object which has the following indexes available:
object The chart object.
x The X coordinate for the axis (usually equivalent to the left margin).
y The Y coordinate for the axis.
width The width of the axis (usually equivalent to the canvas width minus the left and right margins).
height The height of the X axis (including the label area).
dataset As there's only ever one element this is always zero.
index As there's only ever one element this is always zero.
sequentialIndex As there's only ever one element this is always zero.
tooltip If a tooltip is associated with the X axis object this will be it.id: strings are expanded for you (where the tooltip text is retrieved from the HTML tag with the matching ID).
<script>
    xaxis.canvas.onclick = function (e)
    {
        RGraph.redraw();
    
        var canvas = e.target,
            obj    = canvas.__object__,
            shape  = obj.getShape(e);

        if (shape) {            
            // Highlight the main body of the X axis object.
            obj.path(
                'lw 10 b r % % % % s black f rgba(255,0,0,0.25)',
                shape.x, shape.y, shape.width, shape.height
            );
        }
    }
</script>

obj.on(event, function)

This method can be used to set an event listener on an object. It operates in a similar way to the jQuery on() function. The first argument is the event that you wish to attach to and the second is the handler function. For example:

obj.on('draw', function (obj)
{
    // Put your event code here
});

The function is useful if you use method chaining when creating your charts:

obj = new RGraph.Drawing.XAxis({
    id: 'cvs',
}).on('draw', function (obj)
{
    // Put your draw event code here

}).on('click', function (e, shape)
{
    // Handle the click event

}).draw();

obj.exec(function)

The exec function is documented here.

Custom RGraph events that are available

Custom RGraph events are events that RGraph fires when certain actions occur. There is a more comprehensive list of these events here . Here's some example code that show you how to add these events to your chart.

There's more documentation about events available here: Summary of events documentation

<script>
    xaxis = new RGraph.Drawing.XAxis({
        id: 'cvs',
        y: 50,
        options: {
        }
    }).draw().on('click', function (e, shape)
    {
        // Add your click event listener code here

    }).on('mousemove', function (e, shape)
    {
        // Add your mousemove event listener code here

    }).on('mouseover', function (e, shape)
    {
        // Add your mouseover event listener code here

    }).on('mouseout', function (obj)
    {
        // Add your mouseout event listener code here
    });
</script>