Chartjs in format Line is full points

by

-1👍

✅

You should add the property line: false to your dataset.

For further details, please consult line Dataset Properties from Chart.js documentation

👍:1

In V3 of the lib this has become default behaviour, to achieve this in V2 you can do it in 2 ways, you can specify fill: false in every dataset or you can do it in the options for the line like so:

options: {
  elements: {
    line: {
      fill: false
    }
  },
}

Example:

var labels = ["25\/04", "26\/04", "27\/04", "28\/04", "29\/04", "30\/04", "01\/05", "02\/05", "03\/05", "04\/05", "05\/05", "06\/05", "07\/05", "08\/05", "09\/05", "10\/05", "11\/05", "12\/05", "13\/05", "14\/05", "15\/05", "16\/05", "17\/05", "18\/05", "19\/05", "20\/05", "21\/05", "22\/05", "23\/05", "24\/05", "25\/05"];
var datasets = [{
  "label": "Formul\u00e1rio Site",
  "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  "backgroundColor": "#4dc9f6",
  "borderColor": "#4dc9f6"
}, {
  "label": "WhatsApp",
  "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 24, 47, 24, 2, 4, 23, 0, 0, 0, 0, 0, 0, 0, 0],
  "backgroundColor": "#f67019",
  "borderColor": "#f67019"
}, {
  "label": "Facebook",
  "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  "backgroundColor": "#f53794",
  "borderColor": "#f53794"
}, {
  "label": "Call Tracking",
  "data": [0, 27, 21, 11, 14, 20, 0, 0, 32, 22, 18, 28, 11, 0, 0, 16, 25, 22, 20, 23, 0, 0, 28, 0, 0, 0, 0, 0, 0, 0, 0],
  "backgroundColor": "#537bc4",
  "borderColor": "#537bc4"
}];
var uniqueId = '60acaa981f364';

var config = {
  type: 'line',
  data: {
    labels: labels,
    datasets: datasets
  },
  options: {
    elements: {
      line: {
        fill: false
      }
    },
    responsive: true,
    title: {
      display: true,
      text: 'Leads diários'
    },
    tooltips: {
      mode: 'index',
      intersect: true,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Dias'
        }
      }],
      yAxes: [{
        display: true,
        ticks: {
          beginAtZero: true,
        },
        scaleLabel: {
          display: true,
          labelString: 'Value'
        }
      }]
    }
  }
};

$(document).ready(function() {
  var ctx = document.getElementById(uniqueId).getContext('2d');
  window.myLine = new Chart(ctx, config);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="60acaa981f364" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

Fiddle: https://jsfiddle.net/Leelenaleee/6dL4ut85/1/

Leave a comment