gRaphael drawing it wrong

This is the basic use of gRaphael.linechart from the official demo, it seems that using it with milliseconds as x starts to throw it off, more-so with just 2 data points.

HTML

<script src="http://blog.fruitsoftware.com/wp-content/raphaeljs/raphael-min.js"></script>
<script src="http://blog.fruitsoftware.com/wp-content/raphaeljs/g.raphael-min.js"></script>
<script src="http://blog.fruitsoftware.com/wp-content/raphaeljs/g.line-min.js"></script>
<div class="holder" id="holder"></div>
<div class="holder" id="holder2"></div>

CSS

.holder {
    height: 300px;
    width: 400px;
}

JavaScript

var r = Raphael("holder"),
txtattr = { font: "12px sans-serif" };

                
var x = [], y = [], y2 = [], y3 = [];

var demoX = [[1, 2, 3, 4, 5, 6, 7],[3.5, 4.5, 5.5, 6.5, 7, 8]];
var demoY = [[12, 32, 23, 15, 17, 27, 22], [10, 20, 30, 25, 15, 28]];

var xVals = [9,10, 20, 30, 40, 50, 60, 70, 80, 80];
var yVals = [-20,20, 21, 24, 20, 23, 22, 20, 25,30];
var i=1
var lines = r.linechart(10, 10, 300, 220, xVals, yVals, { nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true })

// Modify the x labels
var yText = lines.axis[1].text.items;      

    yText[0].attr({'text':  " "}); // Set the text of the current elem with the result
    //lines.lines[0].attr({'stroke-width': 8});  
    console.log( lines.lines[0].attr());
            
lines.symbols.attr({ r: 3 });