ChartJS : How to leave just points without lines

Viewed 10616

I have the following ChartJS chart:

enter image description here

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
                              });
1 Answers
Related