ChartJS - line chart release with 1 point

Question

I just found this little mistake when I wanted to show one single point using a line chart. I do not know why this did not make sense. Here is a screenshot:

This is how I created my object:

avg_payment = { 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] } ] } 

This is my current workaround, although it still gives me the same result:

 if avg_payment.labels.length is 1 max_val = Math.max(avg_payment.datasets[0].data) opt = { scaleOverride : true scaleSteps : 2 scaleStepWidth : 1 scaleStartValue : max_val - 1 } myLineChart = new Chart(ctx1).Line(avg_payment, opt) 

Is there any workaround?

Answer 1

These problems are caused by the fact that the variable becomes infinite when chartjs tries to draw the x axis. The fix for this should go to the core of the Chartjs chart so that you can either expand the scale as shown below or add this fix to your own chart assembly 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>