score:6
Posting the summary of the answer at Line ChartJS empty / null values doesn't break the line WITH (slight) corrections for the question above
Extend the line chart
Chart.types.Line.extend({
name: "LineAlt",
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
// now draw the segments
var ctx = this.chart.ctx
this.datasets.forEach(function (dataset) {
ctx.strokeStyle = dataset.strokeColor
var previousPoint = {
value: null
};
dataset.points.forEach(function (point) {
if (previousPoint.value !== null && point.value !== null) {
ctx.beginPath();
ctx.moveTo(previousPoint.x, previousPoint.y);
ctx.lineTo(point.x, point.y);
ctx.stroke();
}
previousPoint = point;
})
})
}
});
You have to call the LineAlt thus
var myLineChart = new Chart(ctx).LineAlt(data, {
datasetStrokeWidth: 0.01,
datasetFill: false,
pointDotRadius : 2,
pointDotStrokeWidth: 3
});
Other changes made for your question - data should be an array and not a comma separated set of values value
Fiddle - http://jsfiddle.net/zu3p2nky/
Edit Aug 2016
This now works out of box without the need for an extension, just be using the null
as a data point.
score:12
I read line documentation and found a boolean option which is called spanGaps
Here's a piece of code, which i used to display this:
{
'type': 'line',
'data': {
'labels': [1, 2, 3, 4, 5],
'datasets': [{
'label': 'example',
'data': [4, 1, null, 3],
// These are style properties, there is no need to copy them
'borderColor': 'rgba(255,99,132,1)',
'borderWidth': 1,
'fill': false,
tension: 0.2,
}]
},
'options': {
spanGaps: true // this is the property I found
}
}
Chart with spanGaps = false
:
Source: stackoverflow.com
Related Query
- How to add an empty data point to a linechart on Chart.js?
- Using chart js version 3, how to add custom data to external tooltip?
- How to add new data point and remove leftmost data point dynamically in Chartjs
- How to add unused data background to bar in chart js
- How does one add data to a Chart in an ajax call?
- Chart.js How can I embed additional values to each data point in radar chart
- How to add data dynamically to primevue Line chart from vuejs3?
- How do I destroy/update Chart Data in this chart.js code example?
- How can I add new data points to an existing chart with chart.js?
- how to add multiple data in chart js dynamically from JSON
- How to add data labels in each bar in stacked bar chart in chart.js?
- How to add percentage after value data in chart
- How to add text inside the doughnut chart using Chart.js?
- How to add an on click event to my Line chart using Chart.js
- line chart with {x, y} point data displays only 2 values
- Chartjs linechart with only one point - how to center
- How to display Line Chart dataset point labels with Chart.js?
- How to add an offset to a dataset in Chart js
- How to add second Y-axis for Bar and Line chart in Chart.js?
- How to add text in centre of the doughnut chart using Chart.js?
- chart js tooltip how to control the data that show
- How to add datas to chart js from javascript array itself?
- How to add panning to chart in chartjs?
- Add all data in the tooltip of Chart JS
- How to display data labels outside in pie chart with lines in ionic
- ChartJS: Draw vertical line at data point on chart on mouseover
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- how to add a title to my ng2-charts bar chart
- How to add a point to chart.js line chart?
- Chart.JS: How to add Data to a specific dataset
More Query from same tag
- ChartJS different border color for legend
- How to reduce number of multiple gridlines in stack bar graph chart.js
- Realtime data from a service in ionic / angular
- Trouble with chart scaling and zooming using Chart.js and chartjs-zoom-plugin
- ChartJs functional component does not refresh even when forceUpdate
- Chart.js Show Dollar Amount On Left Y And Percent Amount On Right Y
- Node.js How to save data from pg database into variable
- Draw stacked horizontal bar chart with Average line using ChartJS
- Checkboxes unchecked after cart.js end of update animation
- How to change NaN values to 0 in Chart.js?
- Missing colors in my Chart.js, my data looks fine, but no color
- How to dynamically use chartjs-plugin-annotation with ng2-charts?
- Chart JS add max value to legend
- Callback after line chart rendered
- Enter an array of datasets into the dataset field of ChartJs
- Chart.js group data by month\year
- Uncaught Error: [$injector:modulerr] (Error came up when I included chart.js)
- Bar chart is not grouped properly in chartjs
- (Lifecycle problem?) React Chart js-2 not updating data from componentDidMount
- Why isn't my X axes on my bar chart starting from zero?
- Charts.js polar area scales
- How to remove x axis scale labels Chart.Js
- Can't figure out why the values in my objects are changing
- "Cannot read property 'xyz' of undefined": How to use map or foreach on numeric json?
- How to display chart using Chartjs with JSON data in Laravel
- How to set ChartJS Y axis title?
- How to set additional options for Chart.js BarCharts using React-Chartkick
- Can't parse data from json
- problem with multiple datasets in chart.js
- Error in implementing chart.js in AngularJS