[Chartjs]-ChartJS – Line chart issue with only 1 point

by

9👍

✅

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>

Leave a comment