About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

 

Download
Get the latest version of RGraph (version 6.16) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

The Y-axis object

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

View example on CodePen
<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,
            xaxis: false,
            yaxis: false,
            xaxisLabels: ['Mar','Apr','May','Jun','Jul','Aug','Sep'],
            yaxisScale: 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,
            yaxisColor: ['blue'],
            tooltips: 'Moisture measured by the MET office',
            tooltipsCss: {
                backgroundColor: 'black',
                color: 'white'
            }
        }
    }).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,
            yaxisColor: ['red'],
            tooltips: 'Sunshine measured by the MET office',
            tooltipsCss: {
                backgroundColor: 'black',
                color: 'white'
            }
        }
    }).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'],
            tooltipsCss: {
                backgroundColor: 'black',
                color: 'white'
            },
            yaxisColor: ['green'],
            textColor: 'green',
            textSize: 16
        }
    }).draw();
</script>

Properties

Y-axis properties

Name: yaxis
Description: 
Whether the y-axis is drawn.
Default: true
Name: yaxisPosition
Description: 
Specifies the y-axis position. Can be left or right.
Default: left
Name: yaxisLinewidth
Description: 
The linewidth of the y-axis.
Default: 1
Name: yaxisColor
Description: 
The color of the y-axis.
Default: black
Name: yaxisTickmarks.
Description: 
Whether the y-axis tickmarks are drawn.
Default: true
Name: yaxisTickmarksLength
Description: 
The length of the y-axis tickmarks.
Default: 3
Name: yaxisTickmarksCount
Description: 
This allows you to stipulate how many y-axis tickmarks there are.
Default: null (related to how many labels there are)
Name: yaxisTickmarksLastTop
Description: 
Whether the top-most tickmark is drawn.
Default: null (displayed if the x-axis position warrants it)
Name: yaxisTickmarksLastBottom
Description: 
Whether the bottom-most tickmark is drawn.
Default: null (displayed if the x-axis position warrants it)
Name: yaxisLabelsCount
Description: 
A value that controls how many Y labels there are. This value could formerly be either 1/3/5/10 however now it can be any number.
Default: 5
Name: yaxisLabelsSpecific
Description: 
You can use this option to give your own Y labels (eg ['Low', 'Medium', 'High']. Note: Since March 2013 you may now need to add an extra (optionally) empty element to the array of labels to achieve your desired result.
Default: null
Name: yaxisLabelsPosition
Description: 
This controls how the specific labels are positioned on the y-axis. It has no effect on a scale.
Default: edge
Name: yaxisLabelsOffsetx
Description: 
This allows you finer-grained control in the horizontal direction over the Y label positioning if you need it.
Default:  0
Name: yaxisLabelsOffsety
Description: 
This allows you finer-grained control in the vertical direction over the Y label positioning if you need it.
Default:  0
Name: yaxisLabelsFont
Description: 
The font that's used by the y-axis labels.
Default: null
Name: yaxisLabelsSize
Description: 
The size of the y-axis labels.
Default: null
Name: yaxisLabelsColor
Description: 
The color of the y-axis labels.
Default: null
Name: yaxisLabelsBold
Description: 
Whether the y-axis labels are bold or not.
Default: null
Name: yaxisLabelsItalic
Description: 
Whether the y-axis labels are italic or not.
Default: null
Name: yaxisLabelsHalign
Description: 
The horizontal alignment of the y-axis labels.
Default: null
Name: yaxisLabelsValign
Description: 
The vertical alignment of the y-axis labels.
Default: null
Name: yaxisLabelsClass
Description: 
This property allows you to add your own css class to the y-axis labels which you can then use for styling purposes or to make retrieving the span tags easier (the dom elements). If you inspect the labels in your browser's javascript console (you will first need to enable the textAccessiblePointerevents property) you will be able to see the other css classes that are assigned to the labels.
Default: [none]
Name: yaxisTitle
Description: 
This allows you to specify a title for the y-axis.
Default: none
Name: yaxisTitleSize
Description: 
This allows you to specify a size for the y-axis title.
Default: null
Name: yaxisTitleFont
Description: 
This allows you to specify a font for the y-axis title.
Default: null
Name: yaxisTitleBold
Description: 
This controls whether the y-axis title is bold or not.
Default: null
Name: yaxisTitleColor
Description: 
This controls what color the y-axis title is.
Default: null
Name: yaxisTitleItalic
Description: 
This controls whether the y-axis title is italic or not.
Default: null
Name: yaxisTitlePos
Description: 
This is multiplied with the margin to give the position of the y-axis title.
Default: 0.25
Name: yaxisTitleOffsetx
Description: 
The pixel offset that's added to the y-axis titles X coordinate.
Default:  0
Name: yaxisTitleOffsety
Description: 
The pixel offset that's added to the y-axis titles Y coordinate.
Default:  0
Name: yaxisTitleX
Description: 
By giving this you can specifically set the X position of the y-axis title.
Default: null
Name: yaxisTitleY
Description: 
By giving this you can specifically set the Y position of the y-axis title.
Default: null
Name: yaxisTitleHalign
Description: 
The horizontal alignment of the y-axis title.
Default:  0
Name: yaxisTitleValign
Description: 
The vertical alignment of the y-axis title.
Default:  0
Name: yaxisScale
Description: 
Whether the y-axis scale is displayed or not.
Default: true
Name: yaxisScaleRound
Description: 
Whether the y-axis scale is rounded up or not.
Default: false
Name: yaxisScaleUnitsPre
Description: 
The units that the y-axis is measured in. This string is displayed before the actual number, allowing you to specify values such as "$50".
Default: none
Name: yaxisScaleUnitsPost
Description: 
The units that the y-axis is measured in. This string is displayed after the actual number, allowing you to specify values such as "50ms".
Default: none
Name: yaxisScaleMax
Description: 
The optional maximum Y scale value. If not specified then it will be calculated.
Default: null (It's calculated)
Name: yaxisScaleMin
Description: 
The optional minimum Y scale value. If not specified then it will be 0.
Default:  0
Name: yaxisScaleFormatter
Description: 
To allow thoroughly custom formats of numbers in the scale, you can use this option to specify a function that is used by RGraph to format numbers. This function should handle ALL of the formatting. Eg:

function myFormatter(opt)
{
    var num = Number(opt.number) * 5;

    return String(num)
}
obj.set('yaxisScaleFormatter', myFormatter);
Default: null
Name: yaxisScaleRound
Description: 
Whether to round the scale up. eg A maximum value of 59 results in scale to 100.
Default: false
Name: yaxisScaleDecimals
Description: 
The number of decimal places to display for the Y scale.
Default:  0
Name: yaxisScalePoint
Description: 
The character that's used as the decimal point.
Default: .
Name: yaxisScaleThousand
Description: 
The character that's used as the thousand separator.
Default: ,
Name: yaxisScaleInvert
Description: 
Whether the y-axis scale is inverted or not.
Default: false

Margin properties

Name: marginTop
Description: 
The top margin of the axis. This can be the same or different to the chart.
Default: 35
Name: marginBottom
Description: 
The bottom margin of the axis. This can be the same as or different to the chart that you add the axis to.
Default: 35
Name: marginLeft
Description: 
The left margin of the axis. This is only used internally.
Default: 35
Name: marginRight
Description: 
The right margin of the axis. This is only used internally.
Default: 35

Other label properties

Name: textColor
Description: 
The color of the text labels.
Default: black
Name: textFont
Description: 
The font used to render the text.
Default: Arial, Verdana, san-serif
Name: textSize
Description: 
The size that the text is rendered in.
Default: 12
Name: textBold
Description: 
Whether the text is bold or not.
Default: false
Name: textItalic
Description: 
Whether the text is italic or not.
Default: false
Name: textAccessible
Description: 
A new feature in 2016 that allows you to use dom text in place of canvas text. It makes for much higher quality text that you can also select if desired (for copy/paste operations). It won't fit all situations and you can read more about the DOM text feature here. A good way to control borders/margins/padding etc is not to set them on the canvas but to wrap the canvas in a div and set them on that like this:
<div style="margin-left: 50px; display: inline-block">
    <canvas id="cvs" width="650" height="250"></canvas>
</div>
Default: false
Name: text
Description: 
This allows you to add custom text to your chart if you want to. There's a dedicated page that describes this option here.
Default: null

Interactive features properties

Name: tooltips
Description: 
This can be an array of tooltips (only the first element is used) that are shown when the axis is clicked on.
Default: null
Name: tooltipsEvent
Description: 
This is the event that triggers the tooltips. It can be either click or mousemove.
Default: click
Name: tooltipsEffect
Description: 
The effect used for showing tooltips. Can be either fade or none.
Default: fade
Name: tooltipsCssClass
Description: 
This is the name of the css class the chart uses.
Default: RGraph_tooltip
Name: tooltipsOverride
Description: 
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
Name: tooltipsNohideonclear
Description: 
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
Name: tooltipsFormattedPoint
Description: 
When using formatted tooltip strings this is used as the point when using the %{value_formatted} option.
Default: .
Name: tooltipsFormattedThousand
Description: 
When using formatted tooltip strings this is used as the thousand separator when using the %{value_formatted} option.
Default: ,
Name: tooltipsFormattedDecimals
Description: 
When using formatted tooltip strings this specifies the number of decimals when using the %{value_formatted} option.
Default:  0
Name: tooltipsFormattedUnitsPre
Description: 
When using formatted tooltip strings these units are prepended to the number when using the %{value_formatted} option.
Default: (an empty string)
Name: tooltipsFormattedUnitsPost
Description: 
When using formatted tooltip strings these units are appended to the number when using the %{value_formatted} option.
Default: (an empty string)
Name: tooltipsFormattedListType
Description: 
With this property you can switch between an unordered list (the default) and an ordered list. Possible values are ul and ol.
Default: ul
Name: tooltipsFormattedListItems
Description: 
This should be a two-dimensional array of the list items that are to be shown for all of the tooltips. An example of this property is:
tooltipsFormattedListItems: [
    ['Bill','Jerry','Berty'], // First tooltip
    ['Gill','Carrie','Lucy'], // Second tooltip
    ['Pob','Nobby','Hilda']   // Third tooltip
]
You can use css to style this list - for example:
.RGraph_tooltip ul#rgraph_formatted_tooltips_list li {
    text-align: left;
    color: yellow;
}
Default: null
Name: tooltipsFormattedTableHeaders
Description: 
When showing a table in the tooltips this can be an array of headers for the table. These are added to the tooltip using th tags.
Default: null
Name: tooltipsFormattedTableData
Description: 
This is the data that is added to the table. This is a 3-dimensional array so it's easy to make a mistake. See the example, copy the code from it and then modify it suit. You'll create fewer bugs this way.
Default: null)
Name: tooltipsPointer
Description: 
By default the tooltips have a small triangular pointer that points to the shape that was clicked on. You can turn this off with this property.
Default: true
Name: tooltipsPointerCss
Description: 
If you want any css values applied to the tooltips pointer (a css border, for example) then specify an object containing those values to this property. For example:
tooltips: {
    borderLeft: 'gray 2px solid',
    borderBottom: 'gray 2px solid'
}
Default: null
Name: tooltipsPointerOffsetx
Description: 
This allows you to adjust the vertical position of the tooltips pointer.
Default:  0
Name: tooltipsPointerOffsety
Description: 
This allows you to adjust the vertical position of the tooltips pointer (for example, if you add a border you may need to move it down slightly).
Default:  0
Name: tooltipsPositionStatic
Description: 
The new default (as of August 2020) is for tooltips to be positioned statically and not be dependent on the mouse position. If you don't want this for whatever reason, you can disable it with this setting. When you set it to false tooltips are positioned next to the mouse pointer.
Default: true
Name: tooltipsCss
Description: 
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'
}
Default: null
Name: tooltipsOffsetx
Description: 
This property allows you to shift the tooltips left or right.
Default:  0
Name: tooltipsOffsety
Description: 
This property allows you to shift the tooltips up or down.
Default:  0

Miscellaneous properties

Name: highlightStyle
Description: 
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

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 y-axis object 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 of the y-axis.
y The Y coordinate of the y-axis.
width The width of the y-axis (this includes the label area)(.
height The height of the y-axis.
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 y-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>
    yaxis.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 Background 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 similarly 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.YAxis({
    id: 'cvs',
    x: 25,
    options: {
    }
}).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.