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
- keep 2 chart.js contained in a div
- Chart.js: How to calculate the labelOffset based on the distance between ticks?
- Why don't my datasets show up on line graph using Chart.js?
- Vue pie chart show after a while (like show console with a warning)
- Show gridlines over graph in chart.js, show bold x-axis label in chart.js, mixure of intersecting graph colors in chart.js
- How do I change the colours of specific labels in ng2-charts?
- base chart slice color on series value?
- "Type of import (".../charjs/types/indexsm" has no construct signatures issue on Vue3 and ChartJS?
- hover/mouseover not activated on every move inside element
- How to draw bars of a chart for a chart to full height?
- Why chartjs lags pages on mobile browsers?
- Prevent label of another data from being toggled whenever a label from one data is toggled
- Multiple ChartJS scripts are not working at the same time
- Chartjs in Reactjs - how can I update data dynamically?
- bind angularjs currency to scaleLabel in chart.js
- Cannot read property 'length' of null error in Javascript
- How to get Max Values of a Multidimensional Array for 30 Days
- Chart.js - Increase space between y Axes and the first column bar
- How to display label inside pie chart in Chartkick?
- chartjs: How to create single outer border for stacked barchart
- Add HTML to label of bar chart - chart js
- Storybook: Changing the value of the control doesnot rerender the Chart.js canvas
- Syntax to instantiate chart.js chart
- How to compare one value to another in chartJS
- How to install plugin for chartjs in javascript
- Canvas not rendering after animation without resizing viewport
- How do I present progress in an Angular bar chart?
- hide data of the datasets in radar chart?
- Getting chart.js to work with Django and Apache
- How to integrate basic ChartJs customizations when using react-chartjs-2?