Chart.js - Plot line graph with X , Y coordinates

Question

I'm trying to create a simple line graph with x,y coordinates but i'm getting a blank page .

I don't want to set labels , but have them generated automatically from the x,y coordinates. I think chartjs already implements that but my syntax is wrong.

var x = new Chart(document.getElementById("myChart1"), {
    type: 'line',
    data: {
        datasets: [{
            label: "Test",
            data: [{
                x: 0,
                y: 5
            }, {
                x: 5,
                y: 10
            }, {
                x: 8,
                y: 5
            }, {
                x: 15,
                y: 0
            }],
        }]
    },
    options: {
        responsive: true,
    }
});

Any idea how to fix the code above ?

score 29 · Accepted Answer · answered Jul 14 '17 at 08:44

29

I believe, what you are looking for, is a scatter graph, not line.

var x = new Chart(document.getElementById("myChart1"), {
   type: 'scatter',
   data: {
      datasets: [{
         label: "Test",
         data: [{
            x: 0,
            y: 5
         }, {
            x: 5,
            y: 10
         }, {
            x: 8,
            y: 5
         }, {
            x: 15,
            y: 0
         }],
      }]
   },
   options: {
      responsive: true
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart1"></canvas>

Refer here, to learn more about scatter chart.

answered Jul 14 '17 at 08:44

ɢʀᴜɴᴛ

32,025
15
116
110

11

Version 2.7.1 doesn't connect the dots on scatter plot, and it makes sense since what the op is trying to do is a line chart, not a scatter. https://jsfiddle.net/sdz2ot42/ – Eduardo Wada Mar 07 '18 at 11:26
21

What @EduardoWada said is true. You can however enable the lines by using the setting: showLine: true for the dataset. – Flipbed May 15 '18 at 12:58
Can we somehow remove the "splines" and connect via straight lines? – Tobi Apr 09 '20 at 21:07
@Tobi - yes, answered there https://stackoverflow.com/questions/34403510/chart-js-straight-lines-instead-of-curves – PolyGlot Aug 28 '20 at 09:45

alex · Answer 2 · 2023-03-10T08:34:10.700

my fresh answer: the x values should be strings. transform your data this way:

data = data.map(
    v=>({y:v.y,x:''+v.x}));

i found it by chance. the labels array isn't needed.

to use the numeric values of x, and arrange the labels and points according to their numeric values, you can use the linear scale type for the x-axis as follows:

options: {
  scales: {
    x: {
      type: 'linear',
    },
  },
}

in this case, the mapping of the function above is not needed.

Chart.js - Plot line graph with X , Y coordinates

2 Answers2

Linked