Display only points in line chart

Question

Is it possible to display only points in line chart? I have this basic line chart and I want to hide the line and the fill inside it so it only shows the points.

Here is my code:

var renChart = new Chart($('#ren-chart'), {
  type: 'line',
  data: {
    labels: ren_labels,
    datasets: [{
      label: 'Renovation',
      data: ren_data,
      backgroundColor: 'rgba(244, 81, 30, 0.5)',
      borderColor: 'rgba(244, 81, 30, 0.8)',
      pointBackgroundColor: 'rgba(244, 81, 30, 0.5)',
      pointBorderColor: 'rgba(244, 81, 30, 0.8)',
      pointRadius: 5
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          stepSize: 20
        }
      }]
    }
  }
});

Any help on this is appreciated. Thanks in advance.

score 0 · Accepted Answer · answered Sep 19 '17 at 19:04

You can set showLine property to false for your dataset, that will make chart hide the border-line (as well as the background-fill), and only show the data-points.

...
datasets: [{
   label: 'Renovation',
   data: ren_data,
   backgroundColor: 'rgba(244, 81, 30, 0.5)',
   borderColor: 'rgba(244, 81, 30, 0.8)',
   pointBackgroundColor: 'rgba(244, 81, 30, 0.5)',
   pointBorderColor: 'rgba(244, 81, 30, 0.8)',
   pointRadius: 5,
   showLine: false
}]
...

ᴅᴇᴍᴏ ⧩

var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
      datasets: [{
         label: 'Renovation',
         data: [3, 1, 4, 2, 5, 3],
         backgroundColor: 'rgba(244, 81, 30, 0.5)',
         borderColor: 'rgba(244, 81, 30, 0.8)',
         pointBackgroundColor: 'rgba(244, 81, 30, 0.5)',
         pointBorderColor: 'rgba(244, 81, 30, 0.8)',
         pointRadius: 5,
         showLine: false
      }]
   },
   options: {
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true,
               stepSize: 2
            }
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

Display only points in line chart

1 Answers1