HOWTO: Show a static Y-axis

• Example
• Introduction
• The necessary HTML
• The JavaScript to produce the chart

Example

Introduction

In the past, showing a custom static y-axis meant drawing the entire y-axis yourself. However now, with the drawing API Y-axis object, (and also the X-axis object) a lot of the coding that was necessary to achieve a custom y-axis has been eliminated. This example shows you how you can implement it.

The necessary HTML

This is the necessary html code that positions the second canvas for the axes over the top of the first. Relative and absolute positioning is used so that the canvas doesn't move and is directly over the first canvas.

<div style="position: relative; position: relative; width: 600px; margin-left: auto; margin-right: auto">
    <canvas id="axes" width="41" height="200" style="position: absolute; top: 0; left: 0; z-index: 3; background-color: white"></canvas>
    <div style="width: 600px; overflow: auto">
        <canvas id="cvs" width="1000" height="200"></canvas>
    </div>
</div>

The JavaScript to produce the chart

And here is the javascript to produce the chart. Usually, when doing custom drawing on your canvas and using dynamic features (eg tooltips), you would need to use the draw custom RGraph event so that your drawing is repeated after the canvas has been cleared. Here though, because the axes are being drawn on a separate canvas that isn't being redrawn, that isn't necessary.

<script>
    // This is the code that produces the chart
    new RGraph.Line({
        id: 'cvs',
        data: [4,6,8,5,9,6,4,8,4,6,15,2],
        options: {
            xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            tooltips: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            xaxis: false,
            yaxis: false,
            yaxisScale: false,
            marginInner: 25,
            marginInner: 25,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            textSize: 16,
            linewidth: 15,
            shadowColor: 'gray'
        }
    }).draw();
    
    new RGraph.Drawing.YAxis({
        id: 'axes',
        x: 40,
        options: {
            yaxisScaleMax: line.scale2.max,
            colors: ['black'],
            textSize: 14
        }
    }).draw();
</script>