I have made a piechart in javascript and I'm now trying to bring it inside a react component. However, it only draws a single slice and that one isn't even complete it's cutoff. Here are images of the cut off slice from the react component and how it looks just rendering in html.

I am not sure why.

This is my function drawing it:

  function drawDonut(inputData: DealNumbers[]) {
const radius = Math.min(width, height) / 2;

const color = d3.scaleOrdinal(d3.schemeCategory10);

const arc = d3.arc()
  .outerRadius(radius - margin.top)
  .innerRadius(radius - radius * 0.5);

const pie = d3
  .pie()
  .padAngle(0)
  .value((d) => d.deals);

svg
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform', `translate(${(width / 2) + margin.left}, ${(height / 2) + margin.top})`);

svg
  .selectAll('.arc')
  .data(pie(inputData))
  .enter()
  .append('g')
  .attr('class', 'arc')
  .append('path')
  .attr('d', arc)
  .style('fill', (d) => color(d.data.name)); 

It is pretty much the same except that I'm using a svg view box and I pass width and height as props instead of hardcoding it. It draws perfectly fine from a javascript.

Thanks for any hints and tips you are able and take the time to give!

Best Regards,

Oliver