score:6
I had the same problem and i've modified this version like this:
var lastPoint = null;
helpers.each(dataset.points, function (point, index) {
if (!point.ignore && dataset.skipNullValues && lastPoint) {
ctx.beginPath();
ctx.moveTo(lastPoint.x, lastPoint.y);
if (this.options.bezierCurve) {
ctx.bezierCurveTo(
lastPoint.controlPoints.outer.x,
lastPoint.controlPoints.outer.y,
point.controlPoints.inner.x,
point.controlPoints.inner.y,
point.x,
point.y
);
} else {
ctx.lineTo(point.x, point.y);
}
ctx.stroke();
}
if (index > 0 && !dataset.points[index - 1].ignore && !point.ignore) {
if (this.options.bezierCurve) {
ctx.bezierCurveTo(
dataset.points[index - 1].controlPoints.outer.x,
dataset.points[index - 1].controlPoints.outer.y,
point.controlPoints.inner.x,
point.controlPoints.inner.y,
point.x,
point.y
);
}
else {
ctx.lineTo(point.x, point.y);
}
lastPoint = point;
}
else if (index === 0 || !point.ignore) {
ctx.moveTo(point.x, point.y);
if (!point.ignore) {
lastPoint = point;
}
}
}, this);
For a better structure i have set a property for the dataset called "skipNullValues":
var datasetObject = {
label: dataset.label || null,
fillColor: dataset.fillColor,
strokeColor: dataset.strokeColor,
pointColor: dataset.pointColor,
pointStrokeColor: dataset.pointStrokeColor,
tooltip: dataset.tooltip,
line: dataset.line,
fill: dataset.fill,
points: [],
skipNullValues: dataset.skipNullValues
};
Here is the full working version!
Maybe there is a better solution, but for my uses it works.
Let me know if it is working for you!
score:2
For charts.js v2
Use the plugin hooks. The following seems to work pretty well for data returning null. It will draw the line with out the point. It connect points though null values.
Chart.pluginService.register({
beforeDatasetsDraw: function(chart) {
for (dataset of chart.config.data.datasets) {
for(data of dataset._meta[chart.id].data) {
data._model.skip = false;
data._model.tension = 0;
}
}
}
});
I am not too exited about a double for loop. This can possibly be more efficient. Perhaps there is also more proper hooks to use. However, this should do what you need.
See https://github.com/chartjs/Chart.js/blob/master/docs/09-Advanced.md
score:12
For charts.js v2, you just define it in the dataset:
var data = {
labels: labels,
datasets: [ {
backgroundColor: "#94b5c244",
borderColor: "#94b5c2",
data: data,
label: "AAPL",
spanGaps: true
}]
};
score:65
New version supports skipping missing data. You can set spanGaps: true in the options. Then if you have null or NaN for missing data, it will skip it and connect to the next point.
.....
showTooltips: true,
options: {
spanGaps: true,
.....
}
.....
Source: stackoverflow.com
Related Query
- Connecting points between missing data in chart.js
- Chart.js Timeseries chart - formatting and missing data values
- Chart JS show multiple data points for the same label
- ChartJs line chart - display permanent icon above some data points with text on hover
- ChartJs: Different Fill Colour Between Data Points
- Missing Tooltip for some data points using chartjs
- How can I achieve displaying data points on chart but Dotted? Chart.js V3.7.0
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- Chart JS pass in custom data for points
- How to set the gap between data items in a chartjs chart
- Chart.js combined line and bar chart with differing data points
- Chart Js - Limit points on graph without limiting data
- ChartJS: Draw line between two data points on hover
- Limit data points with chart js
- How do I destroy/update Chart Data in this chart.js code example?
- getting additional value fields from data source for dx.chartjs doughnut chart
- How to adjust spaces between points in chart js?
- How can I add new data points to an existing chart with chart.js?
- Chart JS - Title missing when clearing canvas if no data is available
- Line chart plotting multiple points for duplicate data on x and y axis using chart.js
- Chart.js scatter chart plot data joins start and finish points together
- How to chart missing data in chartjs
- Position of the x-axis labels is not in sync with the line chart data points
- chart.js mixed chart with different data points
- Limit data points with chart js in React
- Chart.js: Is it able to connect two points of data where there are no data between them?
- Chartjs Bar Chart showing old data when hovering
- Chart.js - Increase spacing between legend and chart
- Chartjs random colors for each part of pie chart with data dynamically from database
- Chart.js - Hover labels to display data for all data points on x-axis
More Query from same tag
- How to add colored points with white shadow border in chart.js?
- Chart.js 2 - how to show all tooltips always and stylize it
- Colors not showing up on charts in ionic 3
- set y-axis scale manually in a bar chart using angular-chart.js
- How to update css for doughnut chart with ng2-charts
- Bootstrap modal not working with chartjs line graph
- How to Remove Unnecessary Spaces around a semi-Doughnut Chart.js Chart
- Adding Vertical lines to charts
- Chart.js: trouble with resizing on window resize
- Styling the middle text of Chart.js's doughnut chart
- Resize pie chart from chart.js
- Array is not being updated in useState hook?
- How do I display a different chartjs tooltip title?
- Is there any way to show a tooltip for points which are not visible on the chart in Chart.js?
- Make Chart.js Radar labels clickable
- ChartJs + ie11 doesn't work
- Accessing conditionally rendered canvas element in React for plotting
- chart.js - line chart - can I visualize positive/negative change somehow?
- How to use same backgroundcolors out of an array to unknown data in chartjs?
- Format Y axis of Chart.JS as Time
- Chart.js - Vertical crosshair (vertical annotation that moves with mouse) in line graph
- Getting "TypeError: document.getElementById(...) is null" when using react.js with chart.js
- Chartjs in Vue integrate parsed Json Data
- How to plot date/time on X but display only dates in Chart.js?
- Chartjs initial animation want to change from left to right (default it is bottom to top)
- How can I achieve displaying data points on chart but Dotted? Chart.js V3.7.0
- How to dynamically use chartjs-plugin-annotation with ng2-charts?
- Chart.js: grid lines only on dataset points
- Remove all borders from my chart in angular-chart-js
- Output (column bars) from Chart.js blurry in Opera browser?