Chartjs-ChartJS scale ticks with scatter plot

by

2👍

✅

You are configuring your chart incorrectly. Here is how it should be created …

var linedata = {
   datasets: [{
      label: 'Simple Line',
      fill: false,
      data: [
         {x: 1, y: 2},
         {x: 2, y: 4},
         {x: 3, y: 6},
         {x: 4, y: 8},
         {x: 5, y: 10},
         {x: 6, y: 12},
         {x: 7, y: 14}
      ]
   }]
};

var chartOptions = {
   responsive: true,
   maintainAspectRatio: true,
   scales: {
      xAxes: [{
         ticks: {
            beginAtZero: true,
            max: 8
         },
         type: 'linear',
         position: 'bottom'
      }],
      yAxes: [{
         ticks: {
            beginAtZero: true,
            max: 16
         }
      }]
   }
};

var lineID = document.getElementById('linechart').getContext('2d');
var lineChart = new Chart(lineID, {
   type: 'scatter',
   data: linedata,
   options: chartOptions
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="linechart"></canvas>

Leave a comment