How to show customised Y labels

A guide showing you how to customise the labels on your chart

[No canvas support]

In order to show significantly customised labels you can either draw the axes yourself using the draw event or, as is done in this case, you can use the drawing API Y axis object. The axes are offset slightly by using the margins so the labels appear to be sitting on top of the grid lines. The axes of the Line chart are turned off and the colour of the axis line is transparent so that just the text labels are visible.

    var labels = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];
    var line = new RGraph.Line({
        id: 'cvs',
        data: [7,5,6,9,5,4,7],
        options: {
            spline: true,
            xaxisLabels: labels,
            tooltips: labels,
            hmargin: 35,
            tickmarksStyle: 'endcircle',
            tickmarksSize: 5,
            linewidth: 3,
            axes: false,
            yaxisLabels: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            yaxisScaleUnitsPost: 'Kg',
            textSize: 14
    }).on('draw', function (obj)
        var ca = obj.canvas;
        var co = obj.context;

        * Because we're not drawing an axis, draw an extra grid line
        co.strokeStyle = obj.get('backgroundGridColor');
            ca.height - obj.get('marginBottom'),
            ca.width - obj.get('marginRight') - obj.get('marginLeft'),
    var yaxis = new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: 20,
        options: {
            marginTop: 16,
            marginBottom: 34,
            yaxisScaleMax: 10,
            yaxisScaleUnitsPost: 'Kg',
            yaxisTickmarksAlign: 'right',
            textColor: '#bbb',
            colors: ['rgba(0,0,0,0)'],
            textSize: 14