Problem with X-axis position when Y values are negative

Question

I have a problem with displaying the X-axis at the bottom of a Scatter-type graph when my Y values are negative. The X-Axis keeps showing at the top edge of the canvas (while the X labels are correctly positioned).
JS code used below, the div around the canvas has a black background which is why the axis and labels are white. Can anybody tell me what I am missing please ? (I'm new to RGraph, this is my first trial).
Thx Serge

    // random 100 data points, x in 100..200, y in -120..-50
    var data = [];
    for(let i = 0; i < 100; i++) data.push([100+i, -50 - Math.random() * 70]);
    var xmin = data[0][0], xmax = data[data.length - 1][0], ymin = data[0][1], ymax = data[0][1];
    for(let i = 1; i < data.length; i++) { if(data[i][1] < ymin) ymin = data[i][1]; if(data[i][1] > ymax) ymax = data[i][1]; }
    
    // scatter graph with white text, green lines, no ticks
    var chart = new RGraph.Scatter({
        id: 'chart',
        data: data,
        options: {  backgroundGridDotted: true, marginLeft: 60, marginBottom: 50, line: true, tickmarksStyle: null, textColor: 'white',
                    xaxisScale: true, xaxisScaleMin: xmin, xaxisScaleMax:xmax, xaxisColor: 'white', xaxisTitle: 'Frequency (MHz)',
                    yaxisScaleMin: ymin, yaxisScaleMax: ymax, yaxisColor: 'white', yaxisTitle: 'Received Power Level (dBm)' 
                  } 
    }).draw();

score 0 · Accepted Answer · answered Dec 01 '20 at 17:39

Try this:

https://codepen.io/rgraph/full/QWKbRwr

(use the "change view" button to see the code)

<script src="https://www.rgraph.net/libraries/RGraph.common.core.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.drawing.xaxis.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.scatter.js"></script>

<div style="display: inline-block; background-color: black">
    <canvas id="cvs" width="600" height="250"></canvas>
</div>

<script>        
    // random 100 data points, x in 100..200, y in -120..-50
    var data = [];
    for(let i = 0; i < 100; i++) data.push([100+i, -50 - Math.random() * 70]);
    
    var xmin = data[0][0], xmax = data[data.length - 1][0], ymin = data[0][1], ymax = data[0][1];
    for(let i = 1; i < data.length; i++) { if(data[i][1] < ymin) ymin = data[i][1]; if(data[i][1] > ymax) ymax = data[i][1]; }
    
    // scatter graph with white text, green lines, no ticks
    scatter = new RGraph.Scatter({
        id: 'cvs',
        data: data,
        options: {
            backgroundGridDotted: true,
            marginLeft: 60,
            marginBottom: 50,
            line: true,
            tickmarksStyle: null,
            textColor: 'white',
            xaxisScale: true,
            xaxisScaleMin: xmin,
            xaxisScaleMax:xmax,
            xaxisColor: 'white',
            xaxisTitle: 'Frequency (MHz)',
            yaxisScaleMin: ymin,
            yaxisScaleMax: ymax,
            yaxisColor: 'white',
            yaxisTitle: 'Received Power Level (dBm)',
            xaxis: false,
            yaxisTickmarksLastBottom: false
        } 
    }).trace();
    
   new RGraph.Drawing.XAxis({
        id: 'cvs',
        y: scatter.canvas.height - scatter.marginBottom,
        options: {
            xaxisLabels: ['Rich','Alex','Johnny','Kev','Pete','Luis','John','Barry'],
            xaxisTickmarksCount: 8,
            xaxisColor: 'white',
            marginLeft: scatter.get('marginLeft'),
            marginRight: scatter.get('marginRight'),
            xaxisTickmarksLastLeft: false
        }
    }).draw();
</script>

Thx Richard, you've pointed me in the right direction. However in your Codepen we can see artifacts on the X-axis labels, I assume because these labels are different. So I applied your solution but I re-used in Drawing.XAxis the same 3 "scale" properties as in the main Scatter plot, and the artifacts disappeared. Hope this will help others. — Serge, Dec 02 '20 at 17:41

Problem with X-axis position when Y values are negative

1 Answers1