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>
Source: stackoverflow.com
Related Query
- ChartJS - Line chart issue with only 1 point
- line chart with {x, y} point data displays only 2 values
- Empty circle - only point strok in line chart for ChartJS
- Display line chart with connected dots using chartJS
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Chartjs linechart with only one point - how to center
- How to display Line Chart dataset point labels with Chart.js?
- chartjs show dot point on hover over line chart
- ChartJS - Line Chart with different size datasets
- ChartJs line chart - display permanent icon above some data points with text on hover
- ChartJS - how to display line chart with single element as a line? (not as a dot)
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Gradient line chart with ChartJS
- Adding line over stacked line chart with ChartJS
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- How to reduce the number of points shown on line chartjs chart with a large dataset?
- ChartJS pie chart with simple parsing options doesn't render, only works when set as bar/line chart
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- angular-chart.js : issue with pointHoverBorderColor property for line chart
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- Vertical Line chart with ChartJS
- Real-time line chart with ChartJS using Ajax data
- plot a point on top on line chart in chartjs
- Plot Multiple Line Chart in Ionic 3 with ChartJS
- drawing line chart with chartjs
- Chartjs chart with only one axis
- Can chart.js display text associated with each point on a line chart that is permanently visible?
- VueJS + Chartjs - Chart only renders after code change
- How to plot line chart with multiple datas, but only 2 labels?
- Trouble with setting background color for Line chart at Chartjs version 3.5.1
More Query from same tag
- How to insert arrays into objects that are inside an array? For ng2-charts / Charts.js
- How to display the values inside the pie chart of PrimeNG (chart) using JavaScript or Angular
- chart js graph not showing on canvas
- Chartjs charts drawing with the same colour after update
- Strange issue with Chart.js bar chart, image scattering
- Graph getting messed up when user resizes page
- ChartJs is not working in angular 4 with no errors
- Detect if the click is in bar or outside of bar in ChartJS
- Padding Between Pie Charts in chart js
- Chart.js dynamically-created charts do not obey chart options
- Create multiple dynamic stacked chart using chart.js in Angular 10?
- How can I display `Null` value data on Y Axis using the Primitive dataset format in Chart.js V3.7.0?
- Add rectangle fill to line chart
- Chart.js onClick function for bar graph
- How make border radius for chart area chart.js?
- Uncaught TypeError: Cannot read property 'format' of undefined
- The chart doesn't display the data from my call to the API with Axios
- How I can increase the number of colors for bar labels in ChartJS?
- Chart js data decimation not working, parsing issue
- Chart.js - Writing Labels Inside of Horizontal Bars?
- Dashed line for missing data in Chart.JS (spanGaps style)
- Parse a JSON object to ChartJS
- Make months on x-axis clickable on chart.js line chart
- impressions in google analytics is zero while sessions and users are more
- How to update chart.js chart with new data?
- Datalabels not showing on Chart.js
- $.function is not a function - jQuery
- How to add color to text using pluginService for Chart.js?
- Canvas JS using ajax call
- ChartJS different border color for legend