dc.js 4.2.7 pieChart with legend having extra space

Question

I am using dc.js to create some charts and one of the pie charts with legend is having issue with the whitespace.

I have tried fixing it by adjusting the width attribute of the pie chart but it didn't work. It only happens with a pie chart with legend, other charts on the page are well placed. I want to remove extra space on the right for the first chart as shown in the image. I want to remove the space marked in red to be completely removed and all three charts have equal space all around.

Here is a jsFiddle if you want to see a demo. Here is my html and JavaScript code.

I am using dc.js version v4.2.7 and d3.js version v7.8.4.

const statusChart = new dc.PieChart('#status-chart');
const data = d3.csvParse(paymentsCsv);

statusChart
  .width(400)
  .height(180)
  .radius(80)
  .dimension(status)
  .group(statusGroup)
  .legend(dc.legend().x(10).y(40).gap(5))
  .label(d => {
    if (statusChart.hasFilter() && !statusChart.hasFilter(d.key)) {
      return `0%`;
    }
    let label = '';
    if (all.value()) {
      label += `${Math.floor(d.value / all.value() * 100)}%`;
    }
    return label;
  })

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div id="status-chart">
      <strong>Status Counts</strong>
      <a class="reset" href="javascript:statusChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
      <div class="clearfix"></div>
    </div>

    <div id="quarter-chart">
      <strong>Quarters</strong>
      <a class="reset" href="javascript:quarterChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
      <div class="clearfix"></div>
    </div>

    <div id="day-of-week-chart">
      <strong>Day of Week</strong>
      <a class="reset" href="javascript:dayOfWeekChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

      <div class="clearfix"></div>
    </div>
  </div>

  <div class="row">
    <div>
      <div class="dc-data-count">
        <span class="filter-count"></span> selected out of <span class="total-count"></span> records | <a href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
      </div>
    </div>

    <table class="table table-hover dc-data-table">
    </table>
  </div>

  <div class="clearfix"></div>
</div>

<div id="payments-csv" style="display: none;">
  id,client,date,amount,status 10000,genesis,2022-03-03,35.7,payment settled 10001,optimum,2022-07-05,29.64,settlement success 10002,optimum,2022-11-22,28.06,payment success 10003,citizen,2023-02-01,13.7,settlement error 10004,genesis,2022-05-02,53.25,payment
  settled 10005,citizen,2022-12-20,43.87,payment declined 10006,citizen,2022-04-02,91.28,payment pending 10007,genesis,2022-11-22,74.57,settlement error 10008,optimum,2022-11-22,59.31,settlement error 10009,citizen,2023-02-01,29.28,settlement error
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/4.2.7/style/dc.min.css"></script>