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

Question

https://codepen.io/shaz1234/pen/PEKjOV

The codepen has my code

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
                 }
              ]
             },
             "options":{
             }
          }
     );

Very simple example but the chart displays only the first two points. I would have expected the chart to scale to the min and max provided x values. Do I misunderstand how point line charts are designed to work or do I have a bug?

Thanks in advance for looking.

Answer 1

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'
                        }
                    }],
                }
            }
        }
     ); 

Answer 2

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 }]

Answer 3

Point objects ( {x:2, y:4}) can be interpreted by line chart and should be displayed correctly if you just specified a labels key before the datasets key:

data: {
        labels:["a","b","c",...]
        datasets: [{
            label: 'my Dataset',
            data: [{x: 0, y: 65}, 
                     {x: 4, y: 59}, 
                     {x: 100, y: 80}, 
                     {x: 110, y: 81}, 
                     {x: 125, y: 56}]
        }]
    },

note that the labels array and the data object inside the datasets should have the same number of elements.