How to show customised Y labels

  Read comments...

Summary
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 ondraw 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 gutters so the labels appear to be sitting on top of the grid lines. The axes of the Line chart are turned off and the color of the axis line is transparent so that just the text labels are visible.


<script>
    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,
            labels: labels,
            tooltips: labels,
            hmargin: 35,
            tickmarks: 'endcircle',
            linewidth: 3,
            noaxes: true,
            ylabels: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            unitsPost: 'Kg',
            textAccessible: true,
            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');
        co.strokeRect(
            obj.get('gutterLeft'),
            ca.height - obj.get('gutterBottom'),
            ca.width - obj.get('gutterRight') - obj.get('gutterLeft'),
            0
        );
    }).trace2();
    
    var yaxis = new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: 20,
        options: {
            gutterTop: 16,
            gutterBottom: 34,
            max: 10,
            align: 'right',
            textColor: '#bbb',
            unitsPost: 'Kg',
            colors: ['rgba(0,0,0,0)'],
            textAccessible: true,
            textSize: 14
        }
    }).draw();
</script>
Share RGraph
X

Comments