score:2

Accepted answer

you can extend the chart to do this - you override the calculatexlabelrotation method of the scale object.


preview(s)

enter image description here


script

chart.types.line.extend({
  name: "linealt",
  initialize: function() {
    chart.types.line.prototype.initialize.apply(this, arguments);

    var scale = this.scale;
    var chart = this.chart;
    scale.calculatexlabelrotation = function() {
      var originallabelwidth = chart.helpers.longesttext(chart.ctx, scale.font, scale.xlabels);
      var firstwidth = ctx.measuretext(scale.xlabels[0]).width;
      var firstrotated = math.cos(chart.helpers.radians(scale.xlabelrotation)) * firstwidth;
      scale.xlabelrotation = 45;
      scale.endpoint -= math.sin(chart.helpers.radians(scale.xlabelrotation)) * originallabelwidth + 3;
      scale.xscalepaddingleft = firstrotated + scale.fontsize / 2;
    }
    this.scale.fit();
  }
});

and then

...
new chart(ctx).linealt(data);

fiddle - http://jsfiddle.net/vvlttjz4/


Related Query

More Query from same tag