The drawing API Y-axis object API reference

• Usage example
• Properties
• Methods
• Events

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

See all of the 1200+ demos in the download archive.

<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
• Margin properties
• Other label properties
• Interactive features properties
• Miscellaneous properties

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

    return String(num)
}
obj.set('yaxisScaleFormatter', myFormatter);

<div style="margin-left: 50px; display: inline-block">
    <canvas id="cvs" width="650" height="250"></canvas>
</div>

tooltipsFormattedListItems: [
    ['Bill','Jerry','Berty'],// First tooltip
    ['Gill','Carrie','Lucy'],// Second tooltip
    ['Pob','Nobby','Hilda']  // Third tooltip
]

.RGraph_tooltip ul#rgraph_formatted_tooltips_list li {
    text-align: left;
    color: yellow;
}

tooltips: {
    borderLeft: 'gray 2px solid',
    borderBottom: 'gray 2px solid'
}

tooltipsCss: {
    fontFamily: 'Verdana',
    fontSize: '20pt'
}

Methods

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

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

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

}).draw();

<script>
    new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: 35,
        options: {
             events: {
                beforedraw: function () {alert('The beforedraw event fired');},
                draw: [
                    function (obj) {alert('The first draw event listener function.');},
                    function (obj) {alert('The second draw event listener function.');}
                ]
            }
        }
    }).draw();
</script>

obj.exec(function (obj)
{
    // Put your code here
});

<script>
    yaxis.canvas.onclick = function (e)
    {
        RGraph.redraw();
    
        var canvas = e.target,
            obj    = canvas.__object__,
            shape  = obj.getShape(e);

        if (shape) {            
            // Highlight the Y-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>

Events

RGraph supports custom events that allow you to easily add interactivity to your charts if required. The following events are available:

new RGraph.Drawing.YAxis({
    id: 'cvs',
    x: 35,
    options: {
        events: {
            draw: function (obj){console.log('The draw event has fired');},
            
            // Alternatively you can give an array of functions
            //to run.
            firstdraw: [
                function (obj) {console.log('First function');},
                function (obj) {console.log('Second function');}
            ]
        }
    }
}).draw();