Chartjs-Line chart plotting multiple points for duplicate data on x and y axis using chart.js

by

0👍

The best thing you can do is manipulate your data beforehand by removing the duplicate values from your data array, the other option you can use is the object notation in combination with a linear x axis, this will still plot the point double but it will put it in the same place

var options = {
  type: 'line',
  data: {
    datasets: [{
      label: '# of Votes',
      data: [{
        x: 79,
        y: 80
      }, {
        x: 80,
        y: 81
      }, {
        x: 80,
        y: 81
      }, {
        x: 81,
        y: 77
      }],
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'linear'
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

Leave a comment