Line ChartJS empty / null values do not destroy the string
I want to break a chart line when the values are null or empty, but I cannot. Perhaps I am missing something?
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [ {
label: "My First dataset",
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, null, 80, 81, 56, 55, 40]
}, {
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, null, 19, null, 27, 90]
} ]
};
Here is the code: http://jsfiddle.net/YvanBarbaria/sLgefm04/31/
source to share
Chart.js doesn't directly support this.
- You must turn off the default segment drawing and
- write instead
For 1.setting the stroke width to 0 doesn't work because the canvas ignores 0 (and NaN, undefined ...), so you set it to a very small value to make the string invisible (there is datasetStroke, but no code on it yet)
It would be logical to also turn off the fill. However, when filling the dataset, the points are filled with black (Chart.js bug?), So make the points solid by decreasing the radius and increasing the line width.
var myLineChart = new Chart(ctx).LineAlt(data, {
datasetStrokeWidth: 0.01,
datasetFill: false,
pointDotRadius : 2,
pointDotStrokeWidth: 3
});
Note that the type is LineAlt - how do you take care of 2.- extending the line chart type
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;
})
})
}
});
Fiddle - http://jsfiddle.net/sLgefm04/66/
source to share