The drawing API Y axis object

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

[No canvas support]

The Y axis object allows you to have extra Y 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>
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [[1,2,8],[3,8,7],[9,6,5],[3,5,8],[5,6,6],[1,5,8],[4,8,6]],
        options: {
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            marginInner: 5,
            axes: false,
            xaxisLabels: ['Mar','Apr','May','Jun','Jul','Aug','Sep'],
            yaxisLabels: false,
            marginLeft: 195,
            marginTop: 35,
            colors: [
                'Gradient(green:#0c0)',
                'Gradient(red:#c00)',
                'Gradient(blue:#00c)'
            ],
            tooltips: [
                'James','Jenna','Karl',
                'James','Jenna','Karl',
                'James','Jenna','Karl',
                'James','Jenna','Karl',
                'James','Jenna','Karl',
                'James','Jenna','Karl',
                'James','Jenna','Karl'
            ],
            key: ['James','Jenna','Karl'],
            keyPosition: 'margin',
            marginInner: 10,
            textSize: 16
        }
    }).wave();
    
    new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: bar.marginLeft,
        options: {
            marginTop: 35,
            yaxisScaleMax: bar.scale2.max * 2,
            yaxisScaleDecimals: 1,
            textColor: 'blue',
            textSize: 16,
            colors: ['blue']
        }
    }).draw();

    new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: bar.marginLeft - 70,
        options: {
            marginTop: 35,
            yaxisScaleMax: bar.scale2.max * 5,
            yaxisScaleDecimals: 1,
            textColor: 'red',
            textSize: 16,
            colors: ['red']
        }
    }).draw();
    
    new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: bar.marginLeft - 140,
        options: {
            marginTop: 35,
            yaxisScaleMax: bar.scale2.max,
            yaxisScaleDecimals: 1,
            tooltips: ['Rainfall measured by the MET office'],
            colors: ['green'],
            textSize: 16
        }
    }).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']

X axis properties

PropertyDescriptionDefault
xaxisPositionThis can facilitate when you have an X axis in the center (eg the Bar chart).bottom
xaxisPosition
This can facilitate when you have an X axis in the center (eg the Bar chart).
Default: bottom

Y axis properties

PropertyDescriptionDefault
yaxisThis option can be specified if you don't want an axis drawn (the labels are still drawn).false
yaxisTickmarksCountThe number of tickmarks shown on the axis. You may need to +/- 1 to get alignment with grids.null
yaxisTickmarksAlignWhether the tickmarks are aligned to the left or to the right of the axis.left
yaxisTickmarksLastTopThis option can be used to prevent the top end tickmark from being drawn.false
yaxisTickmarksLastBottomThis option can be used to prevent the bottom end tickmark from being drawn.false
yaxisLabelsCountThis determines how many labels are shown by default.5
yaxisLabelsSpecificInstead of having a scale you can instead have specific labels (eg low/medium/high).null
yaxisLabelsFontThe font used to render the Y axis labels.null
yaxisLabelsSizeThe size of the labels.null
yaxisLabelsColorThe color of the labels.null
yaxisLabelsBoldWhether the Y axis labels are bold or not.null
yaxisLabelsItalicWhether the labels are italic or not.null
yaxisLabelsOffsetxThe X offset of the labels (in pixels).0
yaxisLabelsOffsetyThe Y offset of the labels (in pixels).0
yaxisScaleFormatterA function used that handles the formatting of numbers. It should return the formatted number.null
yaxisScaleDecimalsThe number of decimals shown.0
yaxisScaleInvertWhether the scale is inverted (ie minimum value at the top).false
yaxisScaleZerostartThis determines whether zero is shown.true
yaxisScaleVisibleThis determines whether the scale is drawn. This value is not checked if you choose to use labels instead.true
yaxisScaleUnitsPreThe units for the scale. This is prepended to the number.An empty string
yaxisScaleUnitsPostThe units for the scale. This is appended to the number.An empty string
yaxisScalePointThe character used as a decimal point..
yaxisScaleThousandThe character used as the thousand separator.,
yaxisScaleMaxThe maximum value of the scale.null
yaxisScaleMinThe minimum value of the scale.0
yaxisTitleThe title for the axis.An empty string
yaxisTitleFontThe font used for the title.null
yaxisTitleSizeThe size of the title.null
yaxisTitleColorThe color of the title.null
yaxisTitleBoldWhether the title is bold or not.null
yaxisTitleItalicWhether the title is italic or not.null
yaxis
This option can be specified if you don't want an axis drawn (the labels are still drawn).
Default: false

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

yaxisTickmarksAlign
Whether the tickmarks are aligned to the left or to the right of the axis.
Default: left

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

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

yaxisLabelsCount
This determines how many labels are shown by default.
Default: 5

yaxisLabelsSpecific
Instead of having a scale you can instead have specific labels (eg low/medium/high).
Default: null

yaxisLabelsFont
The font used to render the Y axis labels.
Default: null

yaxisLabelsSize
The size of the labels.
Default: null

yaxisLabelsColor
The color of the labels.
Default: null

yaxisLabelsBold
Whether the Y axis labels are bold or not.
Default: null

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

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

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

yaxisScaleFormatter
A function used that handles the formatting of numbers. It should return the formatted number.
Default: null

yaxisScaleDecimals
The number of decimals shown.
Default: 0

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

yaxisScaleZerostart
This determines whether zero is shown.
Default: true

yaxisScaleVisible
This determines whether the scale is drawn. This value is not checked if you choose to use labels instead.
Default: true

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

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

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

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

yaxisScaleMax
The maximum value of the scale.
Default: null

yaxisScaleMin
The minimum value of the scale.
Default: 0

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

yaxisTitleFont
The font used for the title.
Default: null

yaxisTitleSize
The size of the title.
Default: null

yaxisTitleColor
The color of the title.
Default: null

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

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

Margin properties

PropertyDescriptionDefault
marginTopThe top margin of the axis. This can be the same or different to the chart.25
marginBottomThe bottom margin of the axis. This can be the same or different to the chart.25
marginTop
The top margin of the axis. This can be the same or different to the chart.
Default: 25

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

Other label properties

PropertyDescriptionDefault
textColorThe color of the text labels.black
textFontThe font used to render the text.Arial, Verdana, san-serif
textSizeThe size that the text is rendered in.12
textBoldWhether the text is bold or not.false
textItalicWhether the text is italic or not.false
textColor
The color of the text labels.
Default: black

textFont
The font used to render the text.
Default: Arial, Verdana, san-serif

textSize
The size that the text is rendered in.
Default: 12

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

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

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.click
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 the tooltip DOES 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: click

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 the tooltip DOES 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
linewidthThe linewidth used to draw the axis.1
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
linewidth
The linewidth used to draw the axis.
Default: 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