Chart not fill ant-row width, even with zero margin and padding

Question

As you can see from the picture below, the chart cannot use 100% of the antd row's width. I tried setting the width to 100% and window.innerWidth but none of those worked.

The chart is drawn using react-chartjs-2 which is a thin wrapper of chart.js, and I have not found any useful information from their documentations yet.

I also found this Chart.js responsive option - Chart not filling container, but my packages are the latest versions when checked (react-chartjs-2@2.7.6 and chart.js@2.8.0).

I have been banging my head over this for a while now, and I am not sure where to look for clues next. If you know something about this please inform me, thank you very much!

Here is the options I used for the bar chart:

var options = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true,
        min: 0,
        maxTicksLimit: 5
      },
      gridLines: {
        display: true
      }
    }],

    xAxes: [{
      barPercentage: 0.7,
      gridLines: {
        display: false
      },
      offset: true,
      type: "time",
      time: {
        unit: "day",
        stepSize: 1
      }
    }]
  },
  maintainAspectRatio: true
};

Its render method (I am using React):

render() {
      return (
        <Bar
          data={this.state.chartData}
          width={this.state.appWindow.width}
          height={this.state.appWindow.width*0.5}
          options={this.changeDateOptions(options)}
          legend={legend}
        />
      )
    //}
  }

The style used for ant-row:

const rowStyle = {
  width: '100%',
  display: 'flex',
  flexFlow: 'row wrap',
};

And the picture showing how the chart does not fill 100% of the width: