Stacked bar won't use entire width of available space

🧐 问题描述 [详细地描述问题，让大家都能理解]

I’m currently trying to create a table where each cell has a stacked + percent bar that stretches to the entire width of the table cell. I’m assuming the width value is dependent on the “total” value, which in my case is not constant between cells.

💻 示例代码 [如果有必要，展示代码，线上示例，或仓库]

const config = {
data: [
  	{
      state: "active",
      cluster: clusterName,
      usage: resourceUsage,
    },
    {
      state: "inactive",
      cluster: clusterName,
      usage: inactiveResources,
    },
  ],

  xField: "usage",
  yField: "cluster",
  seriesField: "state",
  
  /* CHART OPTIONS */
  width: 400,
  height: 60,
  padding: "auto",
  
  /* BAR */
  isStack: true,
  isPercentage: true,
  barWidthRatio: 1,
  renderer: "svg",
  
  /* GRID/AXIS */
  xAxis: {
    grid: {
      line: {
        style: {
          stroke: "black",
          lineWidth: 1,
          strokeOpacity: 0.1,
        },
      },
    },
    label: {
      style: {
        fontSize: 0,
      },
    },
  },
  
  yAxis: {
    label: {
      style: {
        fontSize: 0,
      },
    },
    tickLine: {
      style: {
        opacity: 0,
      },
    },
    grid: {
      line: {
        style: {
          stroke: "black",
          lineWidth: 1,
          strokeOpacity: 0,
        },
      },
    },
  },
  
  tooltip: {
    domStyles: {
      "17plot-tooltip": {
        marginTop: "-5rem",
      },
    },
  },
  
  legend: {
    offsetX: 8,
    itemSpacing: 2,
  },
}

🚑 其他信息 [如截图等其他信息可以贴在这里]

[lxfu1]

[roger-sony]

import React from "react";
import { Bar } from "@ant-design/plots";

const MyTable = () => {
	return (
		<table>
			<thead>  
				...
		  	</thead>
		  	<tbody>
	             {myArray.map((index) => (
	                <TableRow key={index} />
	             ))}
          	</tbody>
		</table>
	);
}
 
const TableRow = () => {
	 return (
      	<tr>
	        {otherArray.map((index) => (
	          <td key={index}>
	            <StackedBar  />
	          </td>
	        ))}
  		</tr>
	);
}
 
const StackedBar = () => {
  return (
    <Bar {...config} />
  );
};