[Chartjs]-Line chart with {x, y} point data displays only 2 values

by

1👍

✅

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

15👍

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

1👍

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.

Leave a comment