score:9

Accepted answer

this issues was caused by a variable becoming infinity when chartjs is trying to draw the x axis. the fix for this has to go into the core of chartjs's scale so you could either extend scale like below or i have added this fix to my custom build of chartjs https://github.com/leighquince/chart.js

chart.scale = chart.scale.extend({
  calculatex: function(index) {
    //check to ensure data is in chart otherwise we will get infinity
    if (!(this.valuescount)) {
      return 0;
    }
    var isrotated = (this.xlabelrotation > 0),
      // innerwidth = (this.offsetgridlines) ? this.width - offsetleft - this.padding : this.width - (offsetleft + halflabelwidth * 2) - this.padding,
      innerwidth = this.width - (this.xscalepaddingleft + this.xscalepaddingright),
      //if we only have one data point take nothing off the count otherwise we get infinity
      valuewidth = innerwidth / (this.valuescount - ((this.offsetgridlines) || this.valuescount === 1 ? 0 : 1)),
      valueoffset = (valuewidth * index) + this.xscalepaddingleft;

    if (this.offsetgridlines) {
      valueoffset += (valuewidth / 2);
    }

    return math.round(valueoffset);
  },
});
var line_chart_data = {
  labels: ["jan"],
  datasets: [{
    label: "average_payment",
    fillcolor: "rgba(220,220,220,0.5)",
    strokecolor: "rgba(220,220,220,0.8)",
    highlightfill: "rgba(220,220,220,0.75)",
    highlightstroke: "rgba(220,220,220,1)",
    data: [65]
  }]
};


var ctx = $("#line-chart").get(0).getcontext("2d");
var linechart = new chart(ctx).line(line_chart_data);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://rawgit.com/nnnick/chart.js/master/chart.min.js"></script>



<canvas id="line-chart" width="100" height="100"></canvas>


Related Query

More Query from same tag