I have the following ChartJS chart:
I would like to know how can I remove the connecting lines between dots, because I just need to show the dots.
Here is the actual code:
var data = {
labels: ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"],
datasets: [{
data: [0.2, 0.1, 0.4, 0.1, 0.0, 0.5, 0.4]
}, {
data: [0.3, 0.2, 0.4, 0.4, 0.0, 0.7, 0.6]
},
{
data: [0.4, 0.5, 0.5, 0.4, 0.0, 0.9, 0.7]
},
{
data: [0.6, 0.7, 0.55, 0.6, 0.0, 0.9, 0.7]
}]
};
var ctx = document.getElementById("LineWithLine").getContext("2d");
Chart.types.Line.extend({
name: "LineWithLine",
initialize: function () {
Chart.types.Line.prototype.initialize.apply(this, arguments);
},
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var point = this.datasets[0].points[this.options.lineAtIndex]
var scale = this.scale
//console.log(this);
// draw line
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(scale.startPoint + 12, scale.calculateY(0.6));
this.chart.ctx.strokeStyle = '#ff0000';
this.chart.ctx.lineTo(this.chart.width, scale.calculateY(0.6));
this.chart.ctx.stroke();
// write TODAY
this.chart.ctx.textAlign = 'center';
//this.chart.ctx.fillText("TODAY", scale.startPoint + 35, point.y + 10);
this.chart.ctx.restore();
}
});
new Chart(ctx).LineWithLine(data, {
datasetFill: false,
lineAtIndex: 0.6
});
