Your promise is OK (i.e. d3.text("temp.csv").then(makeChart);) but your logic in makeChart has a few issues:

  1. Remove the space between the , and y in the header you add - otherwise it's creating a object key like this " y" instead of just y
  2. The y values need to be converted to float because csvParse defaults to values as text without a conversion function
  3. datos.x and datos.y do not refer to anything as datos has no specific x and y keys - it is an array of objects, each of which has x and y keys. So, you can use map to extract the arrays of those keys

Working example below:

var url = "";

  .then(csv => makeChart(csv))
function makeChart(temp) {
  // add the header (no space between , and y
  var result = "x,y\n" + temp; //now you have the header

  // csv parse - need to convert y values to float
  var datos = d3.csvParse(result, d => {
    return {
      x: d.x,
      y: parseFloat(d.y)

  // render chart
  var chart = new Chart('chart', {
    type: 'line',
    data: {
      labels: => d.x), // <-- just get x values
      datasets: [{
        data: => d.y) // <-- just get y values

<script src=""></script>
<script src=""></script>
<canvas id="chart" width="400" height="100"></canvas>

Related Query

More Query from same tag