burndown chart in angular 6

Question

I want to implement burndown chart in my angular 6 application.I've tried to implement the burndown chart using D3-burn-down-chart but was unable to as all the samples are available in .js files and I was unable to convet them into .ts files. Here is what I've tried till now

initChart() {

var lineDataActual = [{
  'x': 0,
  'y': 200
}, {
  'x': 10,
  'y': 50
}, {
  'x': 20,
  'y': 180
}, {
  'x': 30,
  'y': 60
}, {
  'x': 40,
  'y': 120
}, {
  'x': 50,
  'y': 30
}];

var svg = d3.select("#visualisation"),
  width = 1000,
  height = 500,
  margins = {
    top: 80,
    right: 50,
    bottom: 80,
    left: 80
  },
  xMin = d3.min(lineDataActual, function (d) {          
    return d.x;
  }),
  xMax = d3.max(lineDataActual, function (d) {          
    return d.x;
  }),
  yMin = d3.min(lineDataActual, function (d) {          
    return d.y;
  }),
  yMax = d3.max(lineDataActual, function (d) {          
    return d.y;
  }),

  xRange = d3.scaleLinear().range([margins.left, width - margins.right]).domain([

  xMin,xMax
  ]),

yRange = d3.scaleLinear().range([height - margins.top, margins.bottom]).domain([

  yMin,yMax     
]),

xAxis = d3.axisBottom(xRange),

yAxis = d3.axisLeft(yRange);

function make_x_axis() {        
  return d3.axisBottom(xRange)
}

function make_y_axis() {        
  return d3.axisLeft(yRange);
}

svg.append("g")         
      .attr("class", "grid")
      .attr("transform", "translate(0," + (height - margins.top) + ")")
      .call(make_x_axis()
          .tickSize((-height) + (margins.top + margins.bottom))
          .tickFormat(null)
      )

  svg.append("g")         
      .attr("class", "grid")
  .attr("transform", "translate(" + (margins.left) + ",0)")
      .call(make_y_axis()
          .tickSize((-width) + (margins.right + margins.left))
          .tickFormat(null)
      )

svg.append("svg:g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + (height - (margins.bottom)) + ")")
  .call(xAxis);

svg.append("svg:g")
  .attr("class", "y axis")
  .attr("transform", "translate(" + (margins.left) + ",0)")
  .call(yAxis);



var lineFunc = d3.line()
  .x(function (d) {
    return xRange(d[0]);
  })
  .y(function (d) {
    return yRange(d[1]);
  })
    .curve(d3.curveCatmullRom.alpha(0.5));


var lineDataIdeal = [{
  'x': xMin,
  'y': yMax
}, {
  'x': xMax,
  'y': yMin 
}];


svg.append("svg:path")
  .attr("d", lineFunc(lineDataIdeal))
  .attr("class", "ideal");

svg.append("svg:path")
  .attr("d", lineFunc(lineDataActual))
  .attr("class", "actual");

svg.append("text")
  .attr("class", "x label")
  .attr("text-anchor", "end")
  .attr("x", width)
  .attr("y", height -6)
  .text("Days");

svg.append("text")
  .attr("class", "y label")
  .attr("text-anchor", "end")
  .attr("y", 6)
  .attr("dy", ".75em")
  .attr("transform", "rotate(-90)")
  .text("Hours remaining");
}

Here,in this part of code

svg.append("svg:path")
  .attr("d", lineFunc(lineDataIdeal))
  .attr("class", "ideal");

svg.append("svg:path")
  .attr("d", lineFunc(lineDataActual))
  .attr("class", "actual");

I'm getting an error saying Argument of type '{ 'x': number; 'y': number; }[]' is not assignable to parameter of type '[number, number][]'. Type '{ 'x': number; 'y': number; }' is missing the following properties from type '[number, number]': 0, 1, length, pop, and 28 more.

I've tried to change the structure for lineDataActual parameter but it's not working and If I tried removing those methods the graph was not plotting.

: Here is my stackblitz link

can anyone please help me through this.

thank you.