line chart with {x, y} point data displays only 2 values

To help those who are stuck on this in 2019 (Chart.js 2.0), please see below :

For those who prefer to dig into the details and form your own inferences, You can refer to the chartjs example at https://www.chartjs.org/samples/latest/scales/time/line-point-data.html (go and view its source).

For those who want a quick answer: In short you can maintain your existing code, but add the following options: (I re-append Shaz's code for completeness)

new Chart(document.getElementById("chartjs-0"), {
    "type":"line",
    "data": {
              "datasets": [
                 { 
                   "label":"My First Dataset",
                   "data": [
                     {x: 0, y: 65}, 
                     {x: 4, y: 59}, 
                     {x: 100, y: 80}, 
                     {x: 110, y: 81}, 
                     {x: 125, y: 56}
                    ],
                   "fill":false,
                   "borderColor":"rgb(75, 192, 192)",
                   "lineTension":0.1
                 }
              ]
             },
             // this is the part that will make it work... see .. xAxes type:'linear'
             "options":{
                 responsive: true, 
                 title: {
                     // optional: your title here
                 },
                 scales: {
                     xAxes: [{
                           type: 'linear', // MANDATORY TO SHOW YOUR POINTS! (THIS IS THE IMPORTANT BIT) 
                           display: true, // mandatory
                           scaleLabel: {
                                display: true, // mandatory
                                labelString: 'Your label' // optional 
                           },
                      }], 
                     yAxes: [{ // and your y axis customization as you see fit...
                        display: true,
                        scaleLabel: {
                             display: true,
                             labelString: 'Count'
                        }
                    }],
                }
            }
        }
     ); 

Try this, This link may be helpful to you http://www.chartjs.org/docs/latest/charts/scatter.html

var ctx = document.getElementById("myChart");

var scatterChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Scatter Dataset',
            data: [{x: 0, y: 65}, 
                     {x: 4, y: 59}, 
                     {x: 100, y: 80}, 
                     {x: 110, y: 81}, 
                     {x: 125, y: 56}]
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'linear',
                position: 'bottom'
            }]
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
 <canvas id="myChart" width="400" height="400"></canvas>

Edit: Why We use Scatter chart instead of line Chart? Line Chart is use when we want to plot data set on same difference,and data structure is one dimensional array, for example, data: [20, 10] then we use line chart.

But When we want plot data on different differences and data structure is 2 dimensional array then we use scatter chart. for example, data: [{ x: 10, y: 20 }, { x: 15, y: 10 }]

Tags:

Chart.Js