D3 JS not display properly

I’m doing this program for my assignment. Here is my code

function init() {
    const margin = { top: 20, right: 20, bottom: 30, left: 50 };
    const width = 600 - margin.left - margin.right;
    const height = 400 - margin.top - margin.bottom;

    // Parse the date/time
    const parseDate = d3.timeParse("%Y");

    // Set the ranges
    const x = d3.scaleTime().range([0, width]);
    const y = d3.scaleLinear().range([height, 0]);

    // Define the line
    const valueline = d3.line()
      .x(d => x(d.Date))
      .y(d => y(d['High income']));

    // Create the SVG element
    const svg = d3.select("#lineChart")
      .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");

    // Get the data
    d3.csv("../data/CPI.csv").then(data => {

      // Format the data
      data.forEach(d => {
        d.Date = parseDate(d.Date);
        d['High income'] = +d['High income'];
      });

      // Scale the range of the data
      x.domain(d3.extent(data, d => d.Date));
      y.domain([0, d3.max(data, d => d['High income'])]);

      // Add the valueline path.
      svg.append("path")
        .data([data])
        .attr("class", "line")
        .attr("d", valueline);

      // Add the X Axis
      svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

      // Add the Y Axis
      svg.append("g")
        .call(d3.axisLeft(y));

    }).catch(error => console.log(error));
}

window.onload = init;

And here is the output
Output image

The output is not what I’m looking for. The shape of it is weird. Can anyone please give me solution for the line to be shown properly? Thank you