Chartjs-Chart.js issue in plotting numeric X and Y in line chart

by

1👍

When the data is specified as individual points through objects that contain an x and an y property, you should not define data.labels.

Also make sure, the x and y values are numbers but not strings.

Please take a look at your amended code below that uses the most recent stable version of Chart.js (2.9.3).

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [{
      data: [
        { x: 0, y: 0 },
        { x: 10, y: 10 },
        { x: 20, y: 20 },
        { x: 30, y: 30 },
        { x: 40, y: 40 },
        { x: 50, y: 50 }
      ],
      showLine: true,
      fill: false,
      borderWidth: 1
    }]
  },
  options: {
      legend: {
        display: false
      },
      scales: {
      yAxes: [{
        ticks: {
          suggestedMin: 0,
          suggestedMax: 100,
          maxTicksLimit: 10
        }
      }],
      xAxes: [{
        ticks: {
          suggestedMin: 0,
          suggestedMax: 100,
          maxTicksLimit: 3
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>

To update your chart with new data, simply add or replace the data in the dataset and invoke chart.update() afterwards.

myChart.data.datasets[0].data = <new data>;
myChart.update();

Leave a comment