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 ?

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 ?

• javascript
• chart.js

2 Answers 2

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.

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.