Offset Overlay Line on chart.js Graph

Question

I'm using the Chart.js fork by Quince (leighquince/Chart.js) and was wondering is there any way to offset the line graph dots like I have illustrated on the first two dots here:

I think I would need a second x-axis.

Answer 1

Just swap your the draw function of the Overlay chart type to add your offset, like so

   Chart.types.Overlay.extend({
     // Passing in a name registers this chart in the Chart namespace in the same way
     name: "OverlayAlt",
     draw: function(ease) { 
       // most of this is from Quince's draw function
       var easingDecimal = ease || 1; 
       this.clear(); 
       this.scale.draw(easingDecimal); 
       Chart.types.Bar.prototype.drawDatasets.call(this, this.barDatasets, easingDecimal); 

       // here we just swap out the calculateX function after we draw the scale
       var originalScaleDraw =  this.scale.draw;
       var originalCalculateX = this.scale.calculateX;
       var scale = this.scale;
       var offset = (scale.calculateX(2) - scale.calculateX(1)) / 2;
       scale.draw = function() {
         originalScaleDraw.apply(this, arguments);
         scale.calculateX = function() {
           return originalCalculateX.apply(this, arguments) + offset;
         }
       }
       Chart.types.Line.prototype.drawDatasets.call(this, this.lineDatasets, easingDecimal); 
       this.scale.draw = originalScaleDraw;
       this.scale.calculateX = originalCalculateX;
     },
   });

---

Fiddle (updated version of the one in your comment) - http://fiddle.jshell.net/4tk3aa9e/