Chart.js x-axes not working?

Question

I'm trying to make a chart that displays data. I can't seem to get the x axis to work. If I add type:'linear', then it doesn't display the data, but the x-axes displays. If I don't add that, then the data gets displayed, but the x axes doesn't work.

    var chart = new Chart(document.getElementById("graph"), 
    {
    type: 'line',
        data: {
        //labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
        datasets: [{ 
        display: true,
        data: [86,114,106,106,107,111,133,221,783,2478],
        label: "Africa",
        borderColor: "#3e95cd",
        fill: false
      }
    ]
    },
    options: {
        scaleShowValues: true,
        responsive: false,
        title: {
          display: true,
          text: 'World population (in millions)'
    },

    scales: {
        yAxes: [
            {
              type: 'linear',
              ticks: {
                beginAtZero:true,
                min: -10,
                max: 110,

              }
        }
      ],
      xAxes: [{
        display: true,
        position: 'bottom',
        //type: 'linear',

        ticks: {
          display:true,          
          min: 0,
          max: 3000,
          stepSize: 10,
          autoSkip: true



              }
            }
          ]
        }
    }
});

Answer 1

The data does not fit the type of the chart, there should be two coordinates 'x' and 'y'. Line chart must have data like:

data: [{
        x: 10,
        y: 20
    }, {
        x: 15,
        y: 10
    }]

Answer 2

And delete this rows: min: -10, max: 110, That way the graph looks more beautiful and knows how to adjust the Y values itself.